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.
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.
Firstly what I had to do was download, install and set-up Adobe Edge Inspect. This is a 3 phase process:
- 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.
- Download and install the Edge Inspect app to your mobile device/devices through your device’s app store
- 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!
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″
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.
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.