iPhone and Web design

A useful (and nicely-designed) article from Apple discusses a variety of issues in Web design for the iPhone. What's notable here are the things you aren't urged to do:

• no separate sites for mobile devices
• few or no extensions or special tags

But small-screen devices are different: their screen is smaller. You've got to be prepared.

One thing I misinterpreted is the meaning of double-tap, which zooms into a big page. I assumed it was literally a magnifier, but it's not: it looks for a block that encloses what you tapped, zooms in so that block's width matches the screen, and then adjusts the type scaling to make the type look good. This is (fairly) simple to implement and works remarkable well; I assumed, for example, that I'd need to redesign this page or to create a variant that matches the 320 pixel size of the iPhone screen. I don't; the scaling just works.

What you need to avoid, it turns out, is bad typography: excessively-long lines of text can't scale. They look too small on the screen, and you need to squint and pan and scan. An ironic culprit: Pogue's Awsome iPhone Period-Typing Shortcut in the Missing Manual site, which lets body text span nearly the entire width of the page. Guideline: you don't want more than 50 or so characters on a line, and this page (in a default Safari window) is about twice as long as it should be.