Whats new in Adobe Shadow?
Adobe have been busy with Shadow since my last posts. Yesterday I participated in a webinar that showed off Shadow. Unfortunately I can not find a recorded video of the session.
Here are the some of the highlights of the latest updates.
- Localhost is supported (Yeah!)
- HTTP Authentication is supported
- 3rd Gen iPad and Retina display supported
- Kindle Fire Support
- URL monitoring supported to test and debug single page mSites
- Per device pull to refresh (Nice!)
- 20+ devices
- Device DOM inspection is (“for now”) using winrie
- iOS Simulator is NOT supported, but in talks with Apple
- Supports Adobe Edge (HTML5 GUI for animation)
- Full final version expected second half of 2012
- Windows & Mac support – no Linux
Localhost support is nice, it saves browsing by IP which is frequently dynamic.
The pull device to refresh is a great feature, the example workflow to use this feature is:
- Connect a bunch of devices
- In Chrome (with Shadow plugin) browse to site
- Scan devices and notice an error with one
- Change the CSS and save
- Pull down to refresh on that error prone device
- See if fix worked, refresh chrome (reloads all devices)
- Scan devices for errors
You can download Adobe Shadow here and read my Shadow install notes.
Guide to Adobe Shadow and easier mSite debugging
I recently posted about Adobe Shadow a new tool to help mobile web development. Yesterday I downloaded the beta and tested it out. Using Shadow was like a breath of fresh air and helped pinpoint the cause of a real CSS bug with high efficiency, without shadow it would have a been a real stubbon issue. Shadow extends the Chrome developer tool to mobile.
I was very impressed and recommend any website developer who cares about mobile to download it now – it is free.
Using a small set of devices (see photo), some in portrait, some in landscape, Shadow made is very fast to test and debug. Here is how to get started…
- Download Adobe Shadow an install on your desktop. (This is the gateway, “helper” app, between your computer and your mobile devices.)
- Download the Google Chrome plug in for Adobe Shadow. (This is the UI to the tool)
- Install the native Adobe Shadow app for each device, get this from the respective app store, download iPhone, download Android.
- With Chrome and the Adobe Shadow helper app open on the desktop, open Shadow on one of the mobile devices. As long as the device is on the same wifi network it should scan and then show your computer.
- On the device tap your computer name, the device will show a PIN
- Click on the SD Chrome plugin icon and select the device you trying to connect and enter the PIN. Now your device is paired.
- Repeat the pairing step (4 & 6) until you have all your devices paired.
- Now browse a website. – All the paired devices will load the same webpage.
- You can quickly scan the devices and test for errors.
This browse and follow feature is cool, but what if you find a fault? You really want to debug it and find exactly what is happening in the rendering engine for that device. Well you can! To debug on one of the devices…
- Open the Chrome plug in (click the SD icon in chrome)
- It will show a list of paired, connected devices. For the device you want to debug click the ” icon next to the device name.
- The Chrome developer inspection tool will open, give it a few seconds, it will connect to the device.
- You can now use the Chrome Developer Tool elements inspector and see the results on the device. This lets you see the classes, the metrics for tags and lets you tweak them in real time. THS IS COOL!
If you have ever chased rendering bugs before on mobile you will apprieciate that the above is fantastic! The inspector does have lag, but that is expected given the remote over the network communication and it is still in beta.
It a real sign that mobile web development is finally mainstream when large companies such as Adobe invest money in developing this kind of tool. Adobe say they support iOS, Android, Blackberry and WinPhone. I could not find the WinPhone app, it may not be live yet. (see comment from Bruce Bowman, no commitment to supporting the latter)
mSite cross device testing got a bit easier
All website developers are familiar with the pain of testing cross platform. It is much better today than it once was, but it is still painful testing and tweaking CSS or Javascript to work consistently across IE, Chrome, Firefox and Safari. Mobile multiplies the problem!
How many different smartphones and tablets can you test on?
The big hitters – iOS (Apple) and Android (Google) sounds like two but it is not! Just with Apple there is iPhone 3GS, iPhone 4, iPhone 4S, iPad, iPad2 and iPad3. Then there are various levels of iOS version which include tweaks to Safari. Just testing on each main Apple device and two OS levels say 4.2 and 5.1 is 12 different targets to test on.
Then adding Android makes things really complicated, there are dozens of different devices all with different screen ratios and different resolutions. Android also offers different browsers, such a the popular Opera Mini. These different combination would deliver 100s of different targets to test on.
Clearly, comprehensive cross platform testing is not feasible, not only would it cost tens of thousands of pounds in devices but it would take thousands of hours. The professional mSite development shops have an array of most popular devices and based on experience test on the key platforms. Even if this is just 8 devices it still takes hours, controlling each device is slow, then tweaking CSS and retesting on the device increases the time it takes. Trust me, one simple mSite page can take hours to test and tweak cross major platforms.
Adobe have observed this pain point in mSite development. From inside the Adobe Labs there is a new product currently in beta called Shadow. Adobe Shadow is free to download.
So what does it do? It enables you to load an mSite on many devices at the same time from your computer. As you browse on the computer all the devices follow. Just this is a serious time saver, but they empower the developer to target one of the devices and change the CSS in realtime to fix a bug. This brings the power of the browser “developer toolbar” to mSite development.
You can watch a video from adobe here that shows off Shadow.
