Adobe Shadow Simplifies Mobile Web Development

Shadow lets you synchronize browsing between your PC and multiple phones or tablets to check content displays across different platforms.
Smartphones: Never Too Thin Or Too Organic
Smartphones: Never Too Thin Or Too Organic
(click image for larger view and for slideshow)

Adobe is on its way to solving one of the biggest problems in mobile web development: figuring out what's broken on a mobile site and why.

The Adobe Labs preview of Shadow, a product targeted for commercial release in the second half of 2012, makes it possible to browse mobile web content on a PC while one or more phones, tablets, or other iOS or Android gizmos follow along. If your HTML, CSS, and JavaScript look great on the PC, the iPhone, and the iPad but horrible on an Android phone, you can use the Chrome browser's built-in debugging tools to tweak your code until you have achieved cross-platform perfection (see the video below).

To make this work, you must pair the mobile device with the Shadow application, sort of like to pairing a Bluetooth headset with your mobile phone. You enter a code generated by the device into the application to confirm that Shadow is authorized to pilot the device by remote control. From that point until the connection is broken, you can open a web page in Chrome, and your device--or potentially a whole workbench full of devices--will follow along. You can also pick up any of the devices and interact with it directly—say, to check some touchscreen interaction--and then resume synchronized browsing to another web page or application.

[ Check out some of the highlights from Mobile World Congress 2012. See 10 Sights To See: Mobile World Congress. ]

Bruce Bowman, a senior product manager at Adobe, said Shadow is important for resolving the differences in the ways websites and web applications work and display differently on different browsers. "Web pros are really struggling today because of the demands of their clients, who increasingly are asking a seemingly simple question: Can you make this work on mobile devices? But accomplishing that adds a lot of time to the normal delivery of a website," he said. That's because even the most standards-compliant code is often interpreted subtly or dramatically differently on different devices.

"One of the things we heard repeatedly from our customers is that they couldn't imagine doing their job without browser development tools, where I can inspect my code, make a change, and see that updated on my page in real time," Bowman said. That ability doesn't exist within mobile browsers, but Shadow allows developers to use the code inspector in Chrome and see changes displayed on the paired devices in the same fashion, he said.

Adobe picked Chrome because it has the best and most popular code inspection and debugging tools and the most aggressive implementation schedule for the open-source WebKit browser engine, Bowman said. The product also makes use of Winre, an open-source remote code inspector.

"This is unique--there's nothing else like it," said Kristin Long, an independent web developer in Oakland, Calif., who does business as MightyMinnow. Adobe does something similar for web development with BrowserLab, which simulates how web content will be displayed across a variety of devices, but Shadow lets you see your content on the actual mobile devices.

"The biggest thing for me is that when you are troubleshooting on the desktop browsers, there are tools you can use to pinpoint the piece in the code that is the issue, but in the mobile browser we didn't have those tools," Long said. Shadow fills that gap, she said.

The Shadow app requires at least iOS 4.2 (iPhone 3 or greater) or Android 2.2. Versions for other mobile operating systems, such as Windows Phone or BlackBerry, could follow if there is enough interest in them, Bowman said.

In testing, Shadow has been able to control more than 30 devices simultaneously--which would be handy for testing Android phones from multiple manufacturers, for example. "We didn't see any kind of performance problems at all with that many. I don't know if there's a theoretical maximum, but I don't think people will hit it."

Follow David F. Carr on Twitter @davidfcarr. The BrainYard is @thebyard and

The Enterprise Connect conference program covers the full range of platforms, services, and applications that comprise modern communications and collaboration systems. It happens March 26-29 in Orlando, Fla. Find out more.

Editor's Choice
Brandon Taylor, Digital Editorial Program Manager
Jessica Davis, Senior Editor
John Abel, Technical Director, Google Cloud
Cynthia Harvey, Freelance Journalist, InformationWeek
Christopher Gilchrist, Principal Analyst, Forrester
Cynthia Harvey, Freelance Journalist, InformationWeek