One of the things that stood out for me amongst all the hype around the Motorola Droid before the device hit the market was the screen resolution: a whopping 480 x 854 pixels. At first I thought it was a misprint.
Once I verified the specs, I started making my design templates for the Droid in Omnigraffle, and I ended up spending a lot of time tweaking the scale of my document to get the right amount of stuff on the screen. I was struck by how different everything had to be compared to the templates I use to design for other devices. In fact, each of my device-specific templates uses a different scale.
This seems strange when you consider that the devices are all roughly the same size, physically:
I was suddenly curious, so I decided to see what things would look like if I scaled the various devices as if the pixel densities of their respective screens were equal, and everything else was relative to that (actual pixel density of each device is noted in the image below):
As you can see, when you adjust for pixel density, the Droid is practically a tablet compared to the iPhone.
To better illustrate the difference, here are the two images with one overlaid on the other:
I hear designers talk a lot about the differences in capabilities and design vocabularies across the range of mobile devices, but variations in screen resolutions are another challenge designers have to confront in the mobile world. It’s especially important with touch screen devices, since the right target size for a user’s finger tap is a physical question more than a matter of pixels. Apple’s guideline for buttons is a height of 48 pixels for example, but the same physical height on the Nokia N97 measures about 58 pixels.