Little Springs Design. 2001 – 2010.

Have you ever noticed that iPhone emulators on the desktop are huge? What's the deal?

The "deal" is that your computer probably has 70-90 pixels per inch (ppi), and the iPhone has 149 ppi. So the same graphic looks twice as big in each direction, for four times the area. And this is not the worst of the problems.

What's worse is I've found pixel sizes ranging from 110 ppi to 310. Yes, nearly a factor of three.

Until recently, we could make a cheap guess as to what the pixel size would be, because phones tend to have screens that comfortably fit in the hand. So "small" screens (defined by Admob and MMA as around 128 pixels wide) have 110-120 ppi. "Large" screens are likely to be around 150 ppi, plus or minus 15.

We're not the only folks to worry about this. Bryan Rieger of Yiibu writes eloquently on the topic. Even better, he provides methods for handling this beyond simple image resizing. Go now and implement his suggestions. We do.

Like I said, until recently we could handle this with some simple heuristics. That 310 ppi phone is very uncommon, to the point of ignoring it, and of course it doesn't look like a mobile phone in terms of screen size (in pixels) anyhow.

But now we have devices like the Palm Pre. It's got a beautiful screen, and it's at 186 ppi with the same pixel dimensions as the iPhone. That's nearly 25% smaller pixels in terms of height and width. Or, the same image will have 56% the area on the Pre.

And these are both advanced Webkit browsers. So people will be sending the same content to them.

What to do?

1. Continue to work with organizations like Device Atlas and WURFL to get physical screen size in the database. And help populate the data! They need your help.
2. Be sure to send images that will be appropriately visible. You may need a larger image on the Pre in some cases, especially for enterprise (i.e., heavy bifocal) customers.
3. Don't skimp on your font size. Palm recommends 15 pt fonts. Our review suggests this is good, and smaller fonts start being more difficult.
4. Get serious about managing your content and structural images. Do as Bryan does.

And this blog entry doesn't get an image because we're going on vacation. See you next week. This entry was posted on Wednesday, July 22nd, 2009 at 4:47 pm and is filed under Design Tips. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.