I love using Adobe BrowserLab. It’s a great way to check how your sites look on different browser platforms. But I’m even more excited about Adobe Shadow, a new Adobe Lab that allows you to test your web sites on mobile devices by creating a dynamically-updating connection between your devices. In layman’s terms, this means that you can visit a web site on your desktop browser and simultaneously preview it on multiple phones and tablets. So, as you browse through different pages on your desktop, the mobile devices also update their screens.
Getting everything to work takes a few steps. First, you’ll need to download the Shadow desktop application from Adobe Labs. On a Windows machine, you’ll also need to install Bonjour which allows for auto discovery of devices. The Bonjour installer is included with the Shadow download and it’s already a part of Mac OS, so no need to install it there.
After downloading and installing the Shadow desktop application, you’ll need to download and install the Google Chrome extension for Adobe Shadow. You can download the extension from the Google Chrome Web Store.
Finally, you’ll need to download the Adobe Shadow app for each mobile device you want to use (it’s free!). You can do that from either the Apple App Store or Google Play, but it’s probably easier to just go to your respective device’s store.
Connecting to devices
Once you’ve got everything installed, make sure the following is true:
- Your Shadow desktop application is running.
- Bonjour is installed and running on your machine (automatic on Mac, but an additional install on a PC).
- You’re using the Chrome browser and have installed the Adobe Shadow extension.
- Your mobile devices and your desktops are in the same network and the network has Internet access.
- You are running the Shadow apps in every device you want to test with.
When you first run the Shadow apps on your phones, you’ll see your desktop appear as a device to pair with. At this point, you have to type into your desktop a series of numbers supplied from the Adobe Shadow app.
Once your devices are hooked up, any website you browse on your desktop will show up on all of your synced mobile devices. The cool thing about this is that if the site you’re browsing uses media queries to target different devices, your mobile devices will automatically display the correct version on each device.
You can interact with each device as if it were running its own browser, which, essentially, is exactly what’s happening. As soon as you go to a new tab or a page on your desktop, all mobile devices will automatically update. I tested this on a Galaxy IIs, an iPhone, a Galaxy Tab, and an iPad, and it works flawlessly. This is not like the static version of the page you see with BrowserLabs—Adobe Shadow offers a dynamic page you can interact with in real time.
Shadow does create a persistent connection to your device and uses a wireless radio to continuously try to reconnect to your device so Adobe suggests that you use Shadow with a device that is plugged into a charger. Make sure you close or hide the app when you’re not actively using it.
To accomplish some of its magic, Shadow is also using a Phonegap tool called weinre (WEb INspector REmote) that allows you to set up a server for doing some of what the Shadow Lab is doing on a local server. For this reason, inspecting the DOM requires an active Internet connection, and the process can be a bit slower than just browsing through pages because Adobe is temporarily running a copy of weinre on its servers.
Suggested courses to watch next:
• Mobile Web Design & Development Fundamentals
• Titanium Mobile App Development Essential Training
• Web Site Planning and Wireframing: Hands-On Training
• Flex 4.6 and AIR 3.0 New Features for Mobile Apps
• Web Form Design Best Practices