Hints and tips for iPhone web design

I’ve been playing with the iPhone’s implementation of Safari for the last few days, and I’ve come up with a few rules to remember when designing pages for iPhone.
The first rule is don’t design for iPhone.
Well, that’s a kind of misleading rule. One should obviously design in such a way that someone surfing from a crappy EDGE connection doesn’t have to wait five minutes for the page to load. The design of my blog works quite well on iPhone, but I still made a separate template for mobile use by stripping out all the sidebar content and the large graphics that would take too long to load.
Still, the point of iPhone’s Safari is that web pages can be richly designed and not forced to adhere to a small screen size and truncated content. Unless, of course, you develop in Flash, in which case you’re kind of out of luck.

Here are a few things to keep in mind when designing your site.

Page width
If your site doesn’t have the width defined in a meta tag, iPhone will zoom way out when loading the page. Use this meta tag in the HEAD of your page to tell iPhone how wide your page is:
meta name="viewport" content="width=xxx" (where xxx is the width, in pixels.)

Fonts
iPhone has a very small subset of fonts built in. My research indicates that these are the included fonts. Any other fonts you use will be substituted with Helvetica or Times.

• American Typewriter
• American Typewriter Bold
• American Typewriter Condensed Bold
• Arial
• Arial Rounded MT Bold
• Courier
• Georgia
• Helvetica
• Marker Felt Thin
• Times
• Trebuchet MS
• Verdana
• Zapfino

The inclusion of American Typewriter and Zapfino are surprising; perhaps more surprising is the fact that the usual suspects — Arial Narrow and Lucida Grande — are not included.

Update: there are also these iPhone-specific fonts installed for use in the phone’s interface, but they don’t have glyphs for every character. I assume they contain graphics that are accessed via Unicode.

• LCD
  This font is missing some of the letters for some unknown reason. I assume that it only has the letters necessary for its use in the interface — but I have no idea where this font appears in the iPhone system. ABDEFINORTVYZ1234567890
• Lock Clock
  This font seems to include only numbers and letters used for the clock, a sort of Helvetica Ultra Light. 0123456789ampm
• Phone Pad Two
• HelvLTMM/Helvetica Light Multiple Master?
• Arial Uni?

Double-tap Zoom
In order to facilitate the double-tap zoom, items on the page must have a “width” definition. If you just throw text on a page, the user can’t zoom in, it must be contained within a CSS-defined width (or possibly within a table). Give every element a concrete width so that iPhone knows how much to zoom in. If you’re very clever, you’ll limit columns of text to 480 pixels wide.

Font Size
The iPhone screen is double — or even more — the resolution of most computer screens, so the text is correspondingly smaller on web pages. Take this into account and make the type larger. I like 12 pt or higher.

More as I explore!

[Update, July 3: Apple has posted a webpage on iPhone web development at http://developer.apple.com/iphone/ … this is really directed at developers who wish to create applications via Web 2.0; but it does have some useful information for simple web design.]