Adobe Shadow – First Impressions

With mobile devices being so popular, web users increasingly use mobile browsers instead of desktop browsers to surf the web. Developers and designers need to keep this in mind when building web sites to avoid potential revenue loss due to web pages being unattractive or unusable on mobile devices.

Designing for mobile is a real challenge because a site must be tested on an array of devices with different screen sizes which may also be running different software. Not too long ago, Adobe released a tool that can ease this tedious task: Adobe Shadow. Shadow makes it a breeze for developers and designers to preview their website on multiple devices simultaneously.

At Urban Insight, as we endeavor to make websites mobile compliant, we are considering using Shadow to supplement mobile testing. In this article, I will summarize my findings while testing this new tool.

What is Adobe Shadow

Shadow allows you to synchronize the views of multiple mobile devices with a desktop or laptop computer. As you browse in Chrome, Shadow instructs the associated mobile devices to surf to the same URL that you have navigated to in Chrome. This allows you to line up all your mobile devices, and have them navigate to the same page without having to click on or type URLs into each and every one of them.

Pros

• Shadow makes it easy to simultaneously preview the same site on multiple devices. Because typing on mobile devices tends to be slower than typing on a desktop keyboard, it is greatly burdensome to frequently type URLs into mobile devices when testing. Not to mention, you may need to type full URLs including the path and parameters - not just the domain part - when testing certain features.
• It was a pleasure to discover that Shadow runs on both Android and iOS, and the controller software runs on Windows and Mac OS, so you can mix and match devices and desktops.
• Shadow has a debugging interface similar to Firebug, which is really impressive. It provides an object browser, where you can point to certain objects in the source code, and the mobile device will highlight the corresponding object on that page. You can also make adjustments to CSS styles in the object browser, and the effect will be instantly visible on the device.

Cons

• Mobile devices and the controlling desktop or laptop must be on the same network. This is not that much of a constraint, but in certain scenarios, it might cause you some extra work. For instance, in our office, development desktops are not connected to the WiFi network for security reasons.
• Certain local addresses do not work. If you are trying to test a site that runs on your development desktop, it needs to be accessible via a local IP address. You cannot use 127.0.0.1 or localhost. Host file entries do not work either. This could be an issue with multi-site setups where the detection is based on the host name.
• Shadow seems to choke on Apache authentication on certain devices. When I tried to go to a protected site and entered the password on the desktop, the device displayed an 'access denied' message and did not follow the desktop browser beyond that point. There was no input field to type in the password either. This happened on one device but not others.
• Synchronization breaks if the visited site uses device detection and serves various contents based on the requesting device. For example, let’s suppose the site at www.example.com utilizes device detection, and redirects mobile devices to m.example.com. When I browse to www.example.com on the desktop browser I will see that content on the desktop, but the mobile device will get redirected to m.example.com and will not be in sync with the desktop.

In sum, despite Shadow having some drawbacks in certain cases, developers working on sites with responsive design will greatly benefit from using Shadow, as it will make the testing process faster by saving the effort of entering URLs and clicking links on every device separately. It is a great tool to have at your disposal, especially considering it is offered for free.