25 guidelines to iPhone Web development

published Oct 01, 2007, last modified Jun 26, 2013

The iPhone Web guidelines. All the rage now. Long, boring read. To save you the trouble of actually reading it, I've checklisted the wheat and trimmed the chaff for you:

  • It's Safari.
  • There's no exposed filesystem anywhere.
  • Heed sanctioned Web development best practices.
  • In contrast to a PC, you may not have the full attention of your users.
  • Build apps to provide quick, easy access to things user need.
  • iPhone is different. People expect a different user experience. People will benchmark your Web site against the included apps.
  • Make fast Web pages. People may be browsing using EDGE networks.
  • Cookies are available.
  • No Flash. No Java.
  • No scrollbars. Finger gestures are to manipulate how the content is viewed (pan, zoom in/out).
  • The tap is equivalent to a mouse click.
  • Present your text in narrow columns to let the user avoid zooming in/out.
  • People fatfinger. Design UI elements accordingly.
  • There are pages compatible with iPhone, pages optimized for iPhone and iPhone Web applications.
  • Shoehorn your content into single-purpose views. You can redesign centering your site around that, or you can build iPhone Web applications (mimicking the iPhone UI) for each specific type of view.
  • iPhone applications should integrate with iPhone services.
  • Make it obvious how to use your content.
  • Minimize user input.
  • Remove decorative crap.
  • User-centric terminology.
  • Provide dynamic feedback.
  • Be consistent in your UI.
  • Aim for instant display in the responsiveness department.
  • Make your page/app resilient to network service interruptions.
  • Avoid absolute positioning.

Here's the set of guidelines. And here's a set of metrics, layout guidelines and tips which don't work well as a summary.

My personal tip: you can, and should, use CSS to make your page work differently in Safari. Do so; avoid falling in the trap of different markup for the iPhone.