"Who knows what evil lurks in the hearts of mobiles? The Shadow knows!" No, I'm not talking about the 30s radio serial, but an incredibly useful little product from Adobe debuting at SXSW Interactive today. The evil, in this case, is the cacophony of devices that modern websites need to serve.
With the rise of mobile traffic has come an increasing awareness on the part of site owners of the importance of addressing all those devices in a comprehensive way. Responsive web design is a flexible response to the problem. The key is to not expect your site to look exactly the same on all screen sizes, but to be willing to slide components around and resize elements in a fluid way so that your content look good in all possible screen dimensions.
Sounds great, right? The only problem is that not only are screen sizes different, but different devices have different browsers that render some page elements differently, as well. So, although the dream of HTML5 web standards and responsive web design is to create unified sites with a single code base, out in the wild it's still a little wild—and getting more so.
So, what's a responsible web developer to do? Most interactive shops that do mobile have a fleet of devices that they strew across conference tables and team members take turns testing them all. Pretty hit and miss. What's more, when you actually find a problem, there's a lot of guess work involved in figuring out what exactly in the code is the culprit. Most contemporary web browsers have a developer mode that lets you "inspect element" on any part of a web page on your desktop, but there hasn't been any easy equivalent for mobile devices—until now.
Bruce Bowman, Senior Product Manager for Adobe's Digital Media Business division, gave me an advance demo of Shadow and told me that extensive interviews with mobile web developers identified device testing as a huge "pain point" in their workflow. Many of the less experienced developers wanted a "device emulator in the sky," that would enable them to test websites on a full range of virtual devices without having to physically possess them. But more experienced practitioners told them that emulators missed a lot of potential problems and the only way to be really sure is to test on actual devices.
From the bright light of that insight, Adobe Shadow was born. Simply put (this is a simple product), Shadow enables you to pair any number of mobile devices with your desktop machine and then browse the same page on all of the devices simultaneously. Any changes to the page made on the desktop machine are instantly reflected on the paired mobile devices. Now here's the really cool thing (if you're a web developer, at least), if something looks bad on one of the devices you can command-click on it and "inspect element," just like on a desktop machine. And changes that you try out in inspector mode will be instantly reflected on the page on that device. The Shadow do! All of the guess work goes out of the process.
Shadow is being released as a free, open beta through Adobe Labs. The full, paid product release will come later in the year, but developers can get their hands on it right away. And Bowman assured me that the pricing will follow a two tier model that will make it affordable to smaller and larger shops alike.
As remarkable as this product will be for its users, what Shadow reveals about the transformations within Adobe are equally remarkable. Known for professional toolsets like Photoshop, InDesign and Acrobat—and for the avowedly anti-web-standard Flash—Adobe is moving beyond the purchased software model towards cloud based software as a service (SAAS). The subscription model provides a more consistant revenue stream and is more in keeping with the emergent consumer pattern of frequent downloads of inexpensive apps than the previous long-product-cycle model.
This shift in strategy frees Adobe up to pursue "minimum viable products," like Shadow, that really meet a specific need and get them out to users quickly—just like web startups do. This nimbleness is a neat trick for a large company.
Even more importantly, now that it has begun to decommission Flash in favor of web standard HTML5 solutions Adobe is now moving with the grain of the open web. This puts it in a much more neutral, agnostic—and helpful—position with the web development community, portions of which are vigorous open source partisans. Shadow is interesting because, unlike many previous Adobe products, this one work equally well with any code editor—not just their Dreamweaver or larger Creative Suite.
You can watch a demo of Shadow on the Adobe Labs site and download the components for free if you want to try it out. And if you are working with a developer on your site, make sure they've got it, because when it comes to device testing, why have a shadow of a doubt?
