Device awareness I

Retina Display 大勝~

Image by Kent-Chen via Flickr

With the myriad of devices out in the wild today, ensuring your work is seen as you intended it to be is quite a challenge. Here’s a basic toolkit you would need to start addressing this problem.

1) User Agent Switcher – Testing tool. Firefox add-on. To hit your application with requests like they were coming from the devices you want to design for.

2) WURFL api – mechanism to detect and dynamically modify your UI according to the requesting device.

User Agent Switcher

First off, you will need a means to simulate requests as if they were coming from all the devices you want to consider. The Firefox plugin User Agent Switcher is an indispensable tool for the same. After you have installed the plugin, you will notice that you can simulate the iphone and a handful of other devices. You will want a more complete list of devices to simulate. A google search should reveal several such downloadable lists. I found this one adequate. Download this xml and import it as shown below (click on the pictures to see them better):

step 1

Step 2

Step 3

Step 4

Now, just select the device that you want to simulate and browse as usual. The requests from this browser will now be formed as if coming from the device it is emulating. Below is a screenshot of me selecting a kindle version for emulation.

using the emulator

I wrote a small html page that spits out the request headers so I can see my new addon in action. The code for that page is here (do a right click and view source). Below is a screenshot of my Firefox impersonating an iPhone :)

emulating an iPhone

My next post will be ablout the WURFL api that allows you to dynamically adapt to the device requesting your page. Over and out.