I love Adobe Shadow

11 June 2012
Jacek Rymski
Frink_Cognifide_2016_HeaderImages_0117
Adobe Shadow Logo

A few facts:

71% of smartphone users searched on their mobile after seeing an advert. Google/ OTX, The Mobile Movement, US April 2011

51.8% of EU Tablet owners are smartphone owners as well
Comscore, Connected Europe 2011

Mobile ad spend is expected to rise over 20.6 billion in 2015
Gartner Mobile Advertising Revenue Forecast, June 2011

 Clearly, mobile usage is exploding to say the least. By 2014, mobile internet is well placed to overtake desktop internet usage. You and I know that our users access websites on their mobile device while they travel to work, waiting in line, watching TV, during lunch breaks and even in... (dare I say it?) the toilet! Why? Because they can unless your corporate honchos have installed jammers there!

Now, most smartphones obviously offer limited functionality in comparison to desktop computers. Small screens, absence of a physical keyboard, limited data plans etc. are other qualms. Often, smartphone usage subscribes to the one eye one thumb approach because the user's attention is split between page content and their immediate environment. This is why it is paramount for us developers to serve webpages quickly with the information the user is looking for at that instance in time.

However, to provide a good mobile experience you have to deal with many problems during development. Let's explore how Adobe Shadow simplifies life.

Problems

One of the biggest problems, us developers often encounter during mobile website development and testing, is the need to manually enter URLs which are either long or contain some special characters using a phone keyboard across a diverse range!

A common approach is to employ URL shorteners such as bit.ly. I generally choose to send the current page URL directly to a registered phone using a browser extension and later, by Bluetooth, to other phones. Eventually, you will have the page open on all test devices. You can then find your device specific bugs and fix em! Of course, you have the joy of refreshing the browser on every phone by hand. Yeah, i hear you, there has to be an easier way! Adobe Shadow on mobile devices

Adobe Shadow to the rescue!

Adobe recently released a beta version of Adobe Shadow - a new tool for all interested in mobile website development. The idea is really simple - display the same page currently open in your browser across all connected devices. You don’t need to touch any of them to refresh the page, enter another URL, navigate etc. Adobe Shadow will follow your moves on the desktop browser just like your real shadow!

The Adobe Shadow application consists of 4 different modules - desktop helper, Chrome browser extension and 2 apps for iOS and Android. Unfortunately, at this point in time, there is no word about Adobe Shadow for Windows phone or Blackberry..

The Weinre debugging tool is embedded within the Adobe Shadow application and is just a few clicks away. And when you want to see how the page will be displayed on other mobile browser, you can choose to do so by selecting an option on your phone.

Adobe Shadow Installation and Configuration

Obviously, your next question is how easy is Adobe Shadow to set up? Thankfully, installation is quite simple and consists of 3 steps:

 1 - Install the Chrome browser extension after you have installed Adobe Shadow on your desktop computer.
2 - Go to your app store (iTunes, Google Play or Amazon) and install the mobile application on all testing devices
3 - Pair all devices with your desktop computer.
Paired devices with AS

Only paired and currently connected phones will have access to what you see on your browser. You can pair a device with multiple desktops so it very easy to share them between the dev and QA teams.

When the extension is on, all devices will follow your current view. It doesn't matter if you click the link or change the tab in Chrome - results are visible almost immediately. The mobile application uses embedded browser so every media-query or mobile override works perfectly. If you’re not sure how your website will be displayed in other mobile browsers, then Adobe blesses you with a link to open the current page in whatever mobile application you deem necessary.

The Weinre tool seriously allows for easy debugging of mobile websites. Application will take care about adding JS snippet to your page while sending it to device. The only thing you need to do is to choose the debugging mode from the menu. Note, you cannot use Weinre when you switch to other mobile browser.

After few months of mobile website development I really wish Adobe Shadow existed earlier. Testing and debugging mobile websites has taken quite a large chunk of my life and Adobe Shadow makes it really very easy.