Adobe recently unveiled Shadow, an inspection and preview tool for debugging mobile websites. Devs have responded favourably, and so we wanted to find out more about the origins of the tool. In this interview, we talk to Bruce Bowman, senior product manager, Adobe Shadow, about Shadow’s background and how it will benefit the industry.
.net: What was the initial impetus behind Adobe Shadow?
BB: Shadow conceptually started out as an idea that creative professionals needed a way to preview their work on devices while they worked. With that idea, we began talking to designers and developers, to validate it, and to better understand their workflows. The most excitement came from frontend web designers/developers, because their workflows were tedious and time consuming. They were having to touch all of their devices, over and over again, to type long URLs on tiny keyboards, and constantly fought the devices to stay awake. It was taking a toll on their productivity.
As we talked to web designers and developers about their mobile development workflows, we consistently found that those who were relatively new to mobile web projects thought they wanted ‘devices in the cloud’ – emulators and simulators for all the devices they don't own. But veterans of mobile web projects emphatically said there is no substitute for having the actual devices. They’d tried every emulator, simulator, cloud-based device service, and found they were inadequate. In order to be certain they could create a good experience, it's mandatory to have the actual devices.
Emulators and simulators cannot provide an accurate experience due to many factors: lack of device fonts, performance differences, screen size and display resolution (pixel density) differences, device browser quirks, device/carrier quirks, no way to simulate gestures, and a lack of access to device hardware such as the accelerometer, GPS, and camera.
With Shadow, from the beginning, we built it with a product principle we called ‘bring your own device’. This puts the burden on the web professional to own, or borrow devices to use with Shadow, but ensures they'll have an accurate experience. As we developed Shadow, we reminded ourselves of this principle often, and made it easy for web pros to share their devices when using Shadow. Beyond the more sophisticated workgroups in agencies and corporations, we're starting to hear that communities of freelancers and independent web professionals are organising meet-ups where they can share devices. We wanted Shadow to be able to facilitate those kinds of workflows.
.net: So do you think tools like Adobe Shadow could drive more developers to ensure sites work well on mobile?
BB: There's a good chance of that, yes, because Shadow makes it a lot easier and removes the pain involved.
The most popular modern best practices in web development today are Luke Wroblewski's Mobile First and Ethan Marcotte's Responsive Web Design. Together, they herald a new web, one that is optimised for mobile devices and reflows to provide a good experience regardless of the screen size on which it is viewed. Using these best practices, the content is embellished and enhanced as screen sizes grow larger. When done well, someone who views a mobile-first/responsive web design on a small screen sees the essence of the more full experience that can be viewed on a larger screen. There are many examples of this in practice, but one of the best is the Boston Globe.
A very common reaction to Shadow has been that it will be useful to web developers and designers as they transition a site to a responsive design. In order to build such a site, it is necessary to see what the site looks like at different screen sizes. To see that, designers have had to resize their desktop browser window constantly to check all of the different sizes, but that's tedious and only gets them so far.
With Shadow as part of their workflow, they're now able make changes to their source, reload and simply glance at their different devices to see instantly what their site looks like on those screen sizes. And when they inevitably see something wrong on one of those devices, Shadow's remote inspection feature allows them to target that device for debugging, and make and see changes on the device instantly. This makes for a much more efficient workflow, where the web pro can focus on the code/design instead of having to touch and interact with the device.
.net: Are there any plans to have Adobe Shadow as a separate product, or will it only be tied into your cloud offering?
BB: When it is ready to be sold commercially, Shadow will be available as a separate standalone product, and also included as part of the Adobe Creative Cloud Membership. There will be a variety of price points and feature options, so it can remain affordable for a web developer who is just getting started in the field, and full-featured enough for the advanced developers who work on time sensitive and world-class web experiences.
.net: Are there any upcoming features of Adobe Shadow that you can reveal at this time?
BB: We're working on a few that we hope to get out soon in Adobe Shadow Labs Release 2:
- Support for URLs that include localhost and 127.0.0.1, and on OS X, machinename.local. This feature will also enable some slick Adobe Edge workflows, where when you're working in Edge, and use the Preview in Browser command, you'll be able to see your animations on all of your Shadow devices.
- Single Page Apps support. In Shadow Labs Release 1, when you clicked on a named anchor for the page you were viewing (e.g. <a href="#tableofcontents">TOC</a>), Shadow didn't tell your devices to update. This made testing single-page applications a little more difficult. We've added some code to watch the URL bar in Chrome so that we can detect the URL change and send it out to devices. (Chrome doesn't recognise internal links as a page change, so we have to detect that ourselves).
- Shadow already works with the Amazon Kindle Fire, but it requires side loading the Shadow.apk file. We'll distribute Shadow through the Amazon App Store for Android allowing Kindle Fire owners to install Shadow more easily.
- Support for http authentication workflows, which is currently broken in Shadow Labs Release 1.
- Some Caching control features to help with the stickiness of caches on devices.
Beyond Labs Release 2, we're working on some features around a screen shots workflow. Shadow will be able to take screen shots on any or all Shadow devices, and have those screen shots transmitted back to the computer, where you can start an annotation and/or sharing workflow. This is a highly requested feature that has broad appeal to the people involved in web development.
Another thing we're working on is supporting Virtual Host File workflows, which is very important to more advanced web developers. A Virtual Host File redirects a public URL to a local instance of the source during development, and is common among web developers who work on multiple sites.
I'd like to offer this invitation to the .net readers: If you've got a feature that you'd like to see in Shadow, please come tell us about it on our Shadow Forums. The whole point of Shadow being available on Adobe Labs prior to a commercial release is to take feedback from the people who use it. We're listening, and plan to shape Shadow based on your feedback.
Get the latest Adobe CS6 review from our sister site Creative Bloq.
