Adobe Eases Mobile Web Testing With Shadow

Adobe Systems is offering a new tool for Web professionals dubbed Adobe Shadow, which simplifies optimising Web experiences across mobile devices.

Adobe delivered Adobe Shadow Labs Release 1 at the SXSW 2012 festival in Austin, Texas, on 7 March.

Website Experience

Adobe Shadow enables Web developers and designers to work faster and more efficiently by streamlining preview and customisation 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 7 March 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 synchronised 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.

Pretty Hairy

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.

“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 synchronisation, 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.

How much do you know about smartphones? Take our quiz.