Adobe Shadow, a New Responsive Web Design Tool for your Tool Chest

Posted by Rainey

So, as expected, Apple released the new iPad yesterday and it looks pretty fantastic. But, there was another announcement from Adobe which has me as excited, if not more, than the iPad announcement. Adobe Shadow is a new tool that makes responsive web design much easier. The short of it is, Adobe Shadow works through a Google Chrome extension to allow the connection of multiple handheld devices and tablets to your computer. Once these are wirelessly connected, each device will display the same webpage that you navigate to with Google Chrome. This tool also allows you to target a specific device and edit markup and CSS using the WebKit development tools. For example, if you want to tweak the site for the iPad portrait view you could use the WebKit development tools to figure out what the CSS should be for that view.

I downloaded Adobe Shadow for my MacBook Pro, iPhone and iPad and linked them all up with little effort. My first impression of this app is pretty solid. Set up is relatively straightforward and it works as “advertised.” But, this is a prerelease version so of course there are a few rough spots. My biggest gripe about the app is the lag when inspecting a specific device. If I choose to inspect the elements for my iPhone, the app goes through some sort of connection routine and appears to be passing through an external source. Selecting a specific element will display the CSS information after a couple of seconds. Just take care to not click around to quickly and this will not be a problem.

A Quick Run Through

Overall, I love this app and cannot wait to see it progress. I do hope they find a way to address the lag I mentioned. Even with the lag however, this is by far the best solution that I have found for trouble shooting and debugging device specific website problems.