Adobe previews Shadow, a free Web development utility, on Adobe Labs

Adobe has unveiled Shadow, a lightweight Web development utility that helps designers and developers preview designs on multiple mobile devices at the same time. The program, posted on Adobe Labs, is in beta and available as a free download. Shadow, which allows your mobile devices to synchronously browse with your desktop computer, is designed to aid in the testing and inspection of new designs and design updates. It promises to make the reviewing and debugging process more efficient by letting the designers see how each iteration will look on all target devices simultaneously.

“Shadow is for front-end Web designers and developers who are interested in building better mobile Web experiences,” said Bruce Bowman, senior product manager of Adobe’s digital media business. “It allows them to connect devices to their computer, and when they browse on their computer, it allows the devices to stay in sync and targets devices for remote inspection and debugging.”

Shadow, a client for both Mac and Windows, supports iOS and Android, and is targeted to HTML, CSS, and JavaScript workflows. Shadow works through an extension to the Chrome browser. It is not restricted to Adobe programs, and can be used with any development tool.

View and inspect

Shadow lets users pinpoint errors, experiment with new ideas and layouts, and view the changes on their devices in real time. It works over a Wi-Fi network, where all devices are connected to the same network. It takes into account the rapid changes in the development landscape, with new devices, operating systems, browsers, and browser versions. Different browsers have varying levels of capabilities, and are enabling new technologies in advance of W3C rules, requiring constant checking to make sure that a design works everywhere, or at least degrades gracefully.

Shadow’s targeted inspection mode lets users do most of the tweaking on their desktop computer without having to interact with the devices. Adobe explains that whereas today, most developers are working via trial and error, with Shadow, they’re able to control revisions from one place.

“As a Web developer, the more I can keep my eyes on my own screen and my hands on my own mouse, and not have to touch other devices, the more efficient I can be,” Bowman said. “Shadow allows remote control of devices: There’s no ambiguity, no guesswork, just precision editing tools.“

Better browsing with HTML 5

Shadow joins other Adobe Labs Web development apps such as Edge, Muse, and Wallaby in the company’s attempt to propel its HTML 5 Web products forward, and move away from Flash-based mobile sites. This is consistent with the trend away from the company’s Flash platform for content creation on mobile devices.

Unlike native apps that are built with programming languages like Xcode and Objective C, Shadow targets the Web as a platform, so anyone who is coding in HTML 5, CSS, and JavaScript can take advantage of Shadow. The program installs on Mac or Windows with extensions for the mobile devices, and a Google Chrome extension. Once everything is installed on each targeted device, you can connect, browse, and sync with your computer via synchronized browsing. An authorization code that your type in to pair the device with your computer allows for the remote control and synchronized browsing. Shadow is compatible with Webkit, the open-source layout engine that powers Apple’s Safari and Google’s Chrome browsers, as well as iOS and Android browsers. It is compatible with iPads, iPhone’s and iPod touches running iOS4 or iOS5.

Open-source origins

Shadow leverages Weinre (Web Inspector Remote) open source software. In itself, Weinre takes some skill to use, however, Shadow places a front end on it that masks most of its complexity, thus designers need not have coding knowledge. There’s zero configuration for using Weinre as part of Shadow.

Once installed, users can see layout changes and other development updates across devices immediately and simultaneously. Adobe has tested some 20 devices at the same time, and says that an unlimited number can be viewed. “This is a real time savings, because the way people are doing this job today, they have to go directly to the device, load a long URL, and type on the tiny keyboard. And they have to do that for every device,” said Bowman. “Then they make a change and have to refresh each browser, so that they’re constantly refreshing browsers all day, and that gets old and tedious. With Shadow, we take care of that chore for you.”

The final shipping product is expected to be released in the second half of 2012 in the Adobe store. It’s also available in the iTunes Store and the Android Market. While there will be a charge for the desktop commercial version, the price has not been revealed. Shadow will also be available for subscription as part of Adobe’s new Creative Cloud, due to launch within the first half of this year.

Adobe has posted more information about Shadow on its Website and wants to hear from users about their experiences with the product before the commercial release.