Lessons about web sites for mobile browsers

Working on ourairports.mobi, the mobile version of OurAirports, I’m getting a crash course in writing for mobile browsers. Here, in no particular order, are some of my lessons:

  • The OpenWave browser is horrendous, ignoring character encoding, randomly skipping some simple CSS, etc., but it’s one of the most common on small cell phones, so you have to live with it.
  • Some Nokia browsers will accept a 302 redirect but consider a 303 to be an HTTP error.
  • Cell phone browsers all seem to display the title element at the top of the screen, so if you have the same text in title and h1, it will appear twice, probably filling the whole first page. If I leave it out, though, what happens on bigger screens like the iPhone or Blackberry?
  • Breadcrumbs are a bad idea for mobile pages, because they use a lot of screen real-estate on a cell phone. I might move mine to the bottom.
  • Making too many things into links is a bad idea, because it takes a long time to scroll though them.
  • Even small graphics take a long time to load. If there’s no good reason, don’t make people download any. Including your corporate logo is not a good reason. Use colors instead of graphics when you can.
  • OpenWave (and, I assume, other browsers) do not choose intelligent default font sizes for h1, etc. — they’ll fill the whole screen if you don’t change them with CSS.
  • When only a couple of dozen words fit on a screen at once, verbosity is a bad thing. Ask yourself “can I say it with fewer words”? Then do the same thing four or five times more. I’m still working on that.
  • Short previews are a good idea for things like comment lists, to save scrolling time. Leave out as much as possible (for example, I don’t give the date of a comment unless the user views the full comment).
  • Always including “jump to” links at the top of every page to save scrolling.
  • Extra stuff you’d normally put at the top of a web page, like a search box, login info, home link, etc., belongs at the bottom of a mobile web page, so that users don’t have to scroll past it to get to the content.

I’ll add more as I discover it.

This entry was posted in General and tagged , . Bookmark the permalink.

1 Response to Lessons about web sites for mobile browsers

  1. Pingback: Lessons about web sites for mobile browsers | Adobe Tutorials

Comments are closed.