Now that the iPhone is finally released we can get back to our normal lives. Not just yet, the fun is just beginning. I’m in Europe so the thing doesn’t launch till later in the year here - sans AT&T might I add. I might get it, might not, I dunno.

Anyway, since the screen real estate on an iPhone is limited and everything is touch controlled. Meaning a lot of people with fat fingers, clumsy fingers, fidgety fingers will be learning how to get used to navigating the web with their fingers, I thought I’d talk a little bit about designing the web for an iPhone.

1. Dimensions - Since we’re specifically talking about the iPhone the display real estate you get is precisely a resolution of 480 X 320 in portrait mode. But you only get 320 X 356 to show your content because the rest of the space is taken up by the status bar, URL field bar and the bottom bar.

2. Navigation - The iPhone does away with scroll bars. Content is automatically zoomed to fit in the dimensions of the screen. The user can then zoom in to focus in on one area. A lot of sites and developers are making iPhone only web pages and apps that provide access to some of the most relevant information one would need. Like this site, and an iPhone version of digg and the recently launched GetLeaflets.

One thing is for sure, the iPhone doesn’t like puny things. Big and Bold navigation is paramount for smooth functioning. Remember you’re dealing with fingers here, not a pixel accurate mouse.

I made a mock up of a navigation menu in photoshop, following Apple’s developer guidelines, you can download the .psd here. A word of advice, gradients are better off being faded out and really subtle, for eg. RGB=217 set at an opacity of 50%, the key is subtlety. You can also change the background and link colors to other contrasts apart from black and white.

{actual size}

They also have a Rounded Corner guideline, I’ve done the Edge to Edge version only.

3. Typing- Using finger touch to type can be tricky for some people. Apple themselves say to give it a week and you’ll be used to their multi-touch screen just as smoothly as you are to your keyboard. Funny, because it took me like 1 minute to get used to a keyboard and mouse the first time I saw them when I was 13 in the early 90’s. Oh well!

If you use input fields on your site, like a login or a contact page, then you can specify a different CSS stylesheet to load when your site detects that is an iPhone user-agent. To show bigger input fields, submit buttons and so on. Note: When the keyboard gets displayed it takes away 216 pixels of screen real estate. Meaning you have a form viewport of only 140 pixels in portrait mode.

For now though the safest way to design a website for the iPhone is to just strip away everything you don’t need to see on a mobile phone, along with scaling down the file sizes. The faster stuff loads the more longer people will iSurf your iWeb {sorry, I had to}.

Do any of my readers have an iPhone? How has your experience been so far with navigating the web with your digits?

You can find more information here.

Subscribe to my full RSS feed.

About the author

Hyder has been blogging for the past two years on this blog. He started Weborithm, his web company, in 2007 and along with designing blogs and websites also releases various web related products.