Shining the Light on Shadow, Adobe’s New Mobile Web Workflow Tool

New Tool for Web Professionals Makes it Simple to Optimize Web Experiences Across Mobile Browsers

Today we’re excited to introduce a brand new offering – Adobe Shadow Labs Release 1, which enables Web developers and designers to work faster and more efficiently by streamlining preview and customization of websites for mobile devices.

Mobile compatibility is a top demand of Web designers today, but we were hearing from the web community that building sites for mobile devices was 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.

Adobe Shadow aims to alleviate the time and stress of working on websites across mobile browsers. 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 in conjunction with any integrated development environment (IDE) or text editor to fit into every mobile Web development workflow. Shadow 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’re really excited to deliver Shadow and start simplifying the pain points of previewing, inspecting and presenting mobile web content. 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.

Shadow uses the native web view provided by the OSes. For iOS devices, it is the UIWebView control which Apple provides to iOS developers. We’re not aware of any rendering differences between UIWebView and Mobile Safari. Mobile Safari does use the Nitro JavaScript engine, which is not available in the UIWebView control, so if your site/page hasa heavy dependency on JavaScript, you may see performance differences.

On Android, the answer is similar, as we’re using the web view that Google provides to Android developers. We’re not aware of any rendering differences on Android either.

We anticipated that web designers and developers using Shadow would be curious whether Shadow matches the native browsers, so we made it really easy to jump from Shadow into the native browser. Just tap the Action menu in the upper left corner, and choose Open in Browser. Shadow will send your current page URL to the native browser so you can check it.