Web Design for the iPhone

So we’ve had our iPhones here at Needmore for a couple weeks, and figured it was time to write a little bit about our observations.

Just kidding. We’re certainly looking forward to getting some, but we’re not going to be first in line! Sometimes it’s good to wait a little bit on brand new, very expensive gizmos like that. My cell phone works pretty well and was very affordable, thank you very much.

Watching the iPhone videos, and Steve’s last keynote in January, one can’t help but notice that you only ever see a single website on the iPhone’s Safari browser: The New York Times. And I think the reason is pretty obvious – the narrow columns. The iPhone has a screen that’s very tiny, a mere 480 pixels wide at a vision-impairing 160 dpi. They have a clever little click that lets you tap on a “column” of text to zoom in, which works great on a site with columns no more than 350 pixels wide (and many as narrow as 180 pixels).

That’s a big deal. While the Safari browser on the iPhone is capable of showing real web pages, as opposed to the mediocre browsers on most small mobile devices, it does benefit from those narrow columns. They never show an interior page of the New York Times, with its 620 pixel wide columns. If they did, you might notice the text being a bit more difficult to read, although they do bump up the font size.

The lesson the iPhone is going to teach web developers is to properly adhere to good line length guidelines. This has been worded a few different ways, but my rule of thumb is 10-12 words per line. If you get wider than that, it’s going to be hard to read your pages on such a small screen (unless users are able to enlarge the text, or the iPhone has some built-in intelligence to compensate for this).

I’m sure we’ll learn more lessons as more folks get their hands on an iPhone, but I think paying attention to column widths and line lengths is a good place to start.

Raymond Brigleb

Creative Director, dreamer, partner, father, musician, photographer. Has been known to ride the rails. Pulls one heck of a shot.