Making mobile design workflow easier with Adobe Edge Inspect

At the end of September, as part of the Creative Cloud Suite, Adobe released Edge Inspect, a tool to enable you to preview and inspect web designs on multiple devices.
Edge Inspect achieves this by enabling you to wirelessly connect a mobile device to your computer through the Chrome browser. Whatever is displayed in the browser, is automatically displayed on the mobile device. This is excellent when you want to quickly see how a change to your css affects what is looks like on a range of mobile devices.

The idea
As a designer, I wondered if I could utilise this syncing to mobile devices, but instead of displaying HTML and css, I could display a mockup jpg or png of a mobile site – seeing the mockup on the mobile would help me hone the design before I handed it over to a developer to code.

The setup
Firstly what I had to do was download, install and set-up Adobe Edge Inspect. This is a 3 phase process:

1. Download and install Edge Inspect from the Creative Cloud. If you aren’t a paying subscriber to the Creative Cloud you can still get hold of Edge Inspect by logging in with an Adobe ID – as a non paying customer you will be limited to connecting 1 device at a time.
2. Download and install the Edge Inspect app to your mobile device/devices through your device’s app store
3. Install the Edge Inspect plugin for Chrome from the Chrome Web Store

What you can’t do with Edge Inspect is load an image into Chrome and just expect it to display on the mobile device. I had to get localhost setup on my computer and sit down and get a bit creative with some code!

The outcome
Now just getting an image to display in a web page would be too easy, so I thought it would be much better if I could load a series of images and compare a number of designs at once. What would be even better would be to split the designs into separate folders and dynamically load the images in from a specified “project” folder…this is what I eventually came up with.

How it works
In this example I have 2 folders set up called folder1 and folder2. You specify which project folder to get the images from by changing the name specified in the url – “dir=folder1″

I also thought it would be intuitive to navigate through the image using the swipe functionality on smartphones and for this I found a fab free javascript and css photo gallery for mobile devices called PhotoSwipe, which I downloaded and incorporated into my script.

If you  load the page in Chrome and connect your phone with Edge Inspect, you can navigate through the images by swiping left or right on your smartphone.

Improvements
At the moment all images are the correct dimensions for my phone, a Samsung Galaxy S3. I found when viewing the images on an iPhone, they didn’t resize to 100%  viewport width and also when viewing the images in landscape, they again didn’t scale accordingly!

Despite needing to make some functionality improvements, in its current form, I have still found it very useful to get a rough idea of what a specific design might look like on a mobile device, before getting a developer involved.

You can download the source code for this example here.

Tags: Adobe, Android, CSS, Edge Inspect, iOS, jQuery, php