By continuing to use the site, you agree to the use of cookies.

Continue More information

Test Your Website Across Multiple Browsers & Devices Easily With Adobe Shadow

20 April 2012COMMENTS
Adobe Creative Camp at SXSW 2012

Adobe Creative Camp at SXSW 2012

One of the most underestimated items in the process of creating a website is the time taken for testing across mutiple browsers and devices. The problem is that at the moment, there are very few options to make this an efficient, quick and streamlined process - until now.

One stat we heard time and time again at SXSW 2012 is that in 2013, more web browsing will be done on mobile than on desktop. This means it is more important than ever for a website to work across as many browsers and devices as possible.

 

Adobe Shadow is a new inspection and preview tool that allows front-end web developers and designers to work faster by streamlining the preview process. This in turn makes it easier to customise website for mobile devices. We caught up with Bruce Bowman and Greg Rewis from Adobe at SXSW for a live demo of Adobe Shadow at the 'Boost Your Mobile Workflow With Adobe' talk.

Adobe Shadow enables users to test a website on a Mac or PC, and automatically have a number of connected devices mirror the site. Users' iPad, iPhone and Android devices sync to whatever is in the browser window.

Adobe Shadow in action across web, tablet and mobile browsers.

Users can see a list of connected devices, similar to what you would see choosing an available wi-fi to connect to. There is an on/off switch so users can swicth between testing and personal browsing at the click on a button and it's easy to de-authorise devices.

Users can see how the same page looks across each device at the same time, making it simple and easy for anyone to test a website in minimal time. This is an especially useful tool for testing sites that have a responsive design.

Developers can view the  'inspect element' window from Google Chrome on mobile and tablet devices, making it so much easier to see where there is an issue. In addition, users can see trace statements in a Javascript log.

Adobe Shadow is a free piece of software from the Adobe Labs site. Just install the program onto your Mac or PC, then onto your iOS and Android devices and finally install the Google Chrome extension. Installation only takes 5-10 minutes.

At this current time there is only an extension for the Google Chrome browser. Adobe said this was due to it being the most equested browser users asked it to work with. Chrome also supports many new upcoming standards. Adobe will look to expand to more browsers in the future, hinting that Firefox would be next.

The same goes with the mobile operating systems. At the moment Adobe Shadow only works on Android and iOS but in the future they would certainly look at expanding onto Windows Phone and beyond. Shadow is expected to be part of Adobe Creative Cloud.

You can listen to the talk by Bruce Bowman and Greg Rewis in full on the official SXSW event page here.

If you would like to see Adobe Shadow in action check out this tutorial video courtesy of Planet Of The Web:

Download Adobe Shadow

You can download Adobe Shadow (Sd) (Labs Release 2) for Mac, Windows, iOS, Android and the Google Chrome extension here.

Further reading

Adobe's Bruce Bowman on Adobe Shadow via .net
Adobe simplifies mobile web testing via Webmonkey

Follow Bruce Bowman on Twitter here - @brucebowman
Follow Greg Rewis on Twitter here - @garazi

Share.

  • Twitter
  • Facebook
  • Google+
  • LinkedIn
  • Delicious
  • StumbleUpon
  • MySpace
  • Digg
  • Netvibes
  • Tumblr
  • Bebo

Author.

Chris Roberts
Chris Roberts (Designer)

Comments.

APNA JAHANIAN posted 10th May 2012
please will you recommend any plugin to make my wordpress site as mobile site?? my wordpress blog site isn't working in mobile, links and images looks too large.

Add new comment.

You are commenting as a guest (guest comments will be moderated before being published).

Optional: Login below:
*Required fields

Labs are the views and thoughts of staff at Acknowledgement focused around making and doing digital things!

VISIT OUR MAIN SITE
  1. Privacy Policy
  2. T&Cs of business
  3. Website T&Cs
© Acknowledgement 2013. All rights reserved.