Adobe Shadow: a free way to test mobile sites

20 Mar 2012
Adobe shadow_128x128

Quite apart from the technical challenges of developing mobile websites, the sheer hassle of having to refresh one or more mobile devices every time you make a change is enough to drive designers to distraction.

Adobe Shadow aims to eliminate this wearying process and marks a welcome return to innovative form for a company that, to me at least, seems to have stagnated lately. Furthermore, this is a tool that could only have been dreamt up by someone actively developing websites, and if this means Adobe is getting closer to its users and responding to their needs, that can only be a good thing.

As with so many good ideas, the principle is simple (in retrospect). Once set up, the contents of your desktop web browser are displayed on the screen of the mobile device, rendered natively. So the design process is no more onerous than for standard websites: make a change, hit refresh and watch it appear on all connected devices. This is actually rather magical when you first experience it, but it very quickly becomes an invaluable resource, almost like having several attached monitors.

Shadow is made up of three parts: the desktop software is free to download from Adobe Labs and works on both Mac and PC. You then install  the Shadow Client from the Chrome Web Store into Chrome and, finally, download the mobile app for Android or iOS from their respective app stores onto your devices.

To get started, run the application on your Windows or OS X computer and fire up Chrome. Now, click the Shadow extension icon in the toolbar and start the app on your mobile device. Depending on your network configuration, the app may automatically find your computer, but I found it simpler to type its network IP address into the mobile app. This generates a passcode which you enter into the Chrome extension to pair the devices. Repeat this with your other mobile devices and then navigate to a site in Chrome.

Your iPad, iPhone, iPod Touch or Android mobile should now mirror your desktop, rendering whichever web page you visit using their native browser. Yes, it's a bit of a faff to set up, but once done your mobile site development gets a significant shot in the arm. I'm sure this technology could have other uses - in school perhaps or any situation where you'd want others to follow along.

So, for once, Adobe can enjoy a pat on the back for developing something truly innovative and, who'd of thought it, geekily cool. And it's free. Let's hope this is a sign of things to come.

Read more

Blogs