Adobe Shadow Sharpens Websites on Any Device

Adobe announced Shadow, a new labs tool for Web developers and designers that makes it easy to synchronize experiences across mobile devices.

Adobe Systems has released Adobe Shadow, a new tool for Web professionals that simplifies optimizing Web experiences across mobile devices.

Adobe delivered Adobe Shadow Labs Release 1 at the SXSW 2012 festival in Austin, Texas, on March 7. Adobe Shadow enables Web developers and designers to work faster and more efficiently by streamlining preview and customization of Websites for mobile devices.

Bruce bowman, a senior product manager at Adobe, told eWEEK Adobe Shadow "is for Web developers and designers who care about what their site looks like on mobile devices."

In a March 7 blog post, Bowman said mobile compatibility is a top demand of Web designers today, but Adobe heard from its community that building sites for mobile devices is a huge pain point in their workflow. "The common process we heard was to manually key in the URLs on each device to check the layout and performance of each page of a site design€”nothing short of tedious," he said.

However, "Adobe Shadow aims to alleviate the time and stress of working on Websites across mobile browsers," Bowman said. "Web pros can wirelessly pair multiple smartphones and tablets with their computer and simultaneously view real-time previews of Web content across multiple iOS and Android devices, quickly seeing refreshed Website designs with live updates. We heard from the community that emulators and simulators just won't cut it and it's absolutely critical that Website compatibility is checked on the actual devices. Adobe Shadow's synchronized browsing nearly eliminates the need to touch the device, but still provides a real, on-device experience."

Adobe Shadow can be used with any integrated development environment (IDE) or text editor to fit into every mobile Web development workflow. Shadow also provides remote inspection and debugging so developers can inspect the DOM, as rendered on the device, make changes to markup and styles, and see changes instantly on any paired device.

"We didn't want to tie Shadow to any one coding environment," Bowman said.

Bowman noted that Shadow does not need to be used with an Adobe product. And it delivers on Adobe's HTML5 strategy by providing tooling support for the changing landscape of the open Web.

Adobe Shadow is loosely based on the Weinre tool, according to Bowman. Weinre is WEb INspector Remote and is pronounced like the word "winery."

"We're doing a lot of this with a tool called Weinre," Bowman said. "But it's really pretty hairy. So we're making it easier to work with. We have a lot of expectations for Weinre going forward."

Bowman demonstrated Shadow for eWEEK, showing more than 20 devices€”including all manner of smartphones and tablets€”all browsing synchronously. He said Adobe has had more than 35 devices connected and browsing at once.

"For a design services agency, there's simply no better tool to ensure your users are having the experience you design for them," said Adam Chromicz, senior design engineer at design company Hot Studio. "Adobe Shadow has even helped our developers have a little bit of fun adding new devices to our testing process."

"Reviewing and debugging Web development projects on mobile devices is tedious and time-consuming," said David Bliss, founder of Odopod, a digital design agency. "After only a short time with Adobe Shadow, it is clear that it will save us a good deal of time and frustration."

"We're really excited to deliver Shadow and start simplifying the pain points of previewing, inspecting and presenting mobile Web content," Bowman said in his post. "We encourage Web Pros to download the free Labs Release 1 of Adobe Shadow available now at http://adobe.com/go/shadow and provide the team with feedback."

Adobe Shadow comprises several components, including Mac and Windows desktop software, a Google Chrome extension for desktop browser synchronization, and mobile apps for iOS and Android tablets and phones. Free Android and iOS applications for Adobe Shadow are currently available in the Android Market and the iTunes Store.

Adobe Shadow supports Windows, Mac, iOS and Android, as well as HTML, CSS and JavaScript workflows. The product is expected to become generally available in the second half of 2012 in the Adobe Store and will also be available as part of the Adobe Creative Cloud.