designing for the iPhone

I’m sure it’ll be making the rounds on blogs and the such, but I’ll join in anyway: Apple has released information and details on designing web pages for the iPhone.

Most interesting to me is the tag, which integrates into the telephone functionality. Maps appears to hijack a normal http request. TO get mail integration, use the mailto: tag, and the ever popular works completely as you’d expect.

No apparent other deep integration than link functionality like this (i.e. nothing in the javascript object model to get ahold of and shake).

Interesting in what the iPhone doesn’t support:

  • window.showModalDialog()
  • Mouse-over events
  • Hover styles
  • Tool tips
  • Java applets
  • Flash
  • Plug-in installation
  • Custom x.509 certificates

Flash I knew about, and plugins I expected. I never really though about tool tips, mouse-over, and hover styles though, although in reflection for how the UI works, that makes sense. It’s akin to the concept of ‘drag and drop’ – it really doesn’t have an equivalent in the iPhone Safari/webkit space.

The whole setup for forms has been really intriguing – especially the way the iPhone safari displays the choices for a pulldown list. Damn, but that’s even easier to use than most desktops… But there’s definitely limits to what you can see while you’re working on filling in a field of the form on iPhone.

Ultimately, the “how much space?” question is also fairly directly answered. Quoting from their online page (emphasis mine):

Therefore, you should design your content to fit within 320 x 356 pixels in portrait mode. If the keyboard is displayed, the available area is 320 x 140 pixels.

Not a whole hell of a lot of space – but it’ll be interesting to see what we can do with it. Apple also makes available some control over the scale that immediately renders as well – so you can really tweak out a page to fit precisely.

Published by heckj

Developer, author, and life-long student. Writes online at

%d bloggers like this: