25 guidelines to iPhone Web development

by Rudd-O published 2007/10/01 06:06:17 GMT+0, last modified 2013-06-26T03:24:27+00:00

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.