WWW FAQs: How do I design web pages for the iPhone?

2009-09-15: Apple's iPhone is an exciting device. But how do you design web pages specifically to look their best on the iPhone?

The iPhone has built-in features that help users navigate websites intended for bigger screens. The "flip" feature, which automatically detects that you have turned the device at a 90-degree angle, can help quite a bit. So does the extremely user-friendly zoom feature.

But you would like to make your site look good on the iPhone without any extra effort on the user's part. So how can you do it?

If you are a CSS expert, your first thought will be to use the "handheld" media type in your CSS code. For instance, if a browser considers itself a handheld device, this code will hide all elements that belong to the navigation CSS class. That's handy if you know that these elements are convenient but redundant and take up more space than a handheld user wants to give up:


@media handheld {
  .navigation {
    display: none;
  }
}

Unfortunately this won't work on the iPhone. Why? Because Apple knows that the iPhone can display a page much better than most handhelds. And they didn't want the iPhone to display all web pages in a "dumbed-down" way. So the iPhone looks at the "screen" media type, just like your desktop browser does.

Is there an alternative? Yes! You can specify that a set of CSS rules apply only when the screen is smaller than a certain resolution:


@media only screen and (max-device-width: 480px) {
  .navigation {
    display: none;
  }
}

This rule applies only on screens 480 pixels across (a "flipped" iPhone) or narrower.

Supposedly, browsers that don't support the "only" keyword will simply ignore this rule anyway, giving us the desired effect.

Though I have not seen the problem myself with Internet Explorer 6 or 7 on Windows, it has been reported that some versions of Internet Explorer fail to ignore the rule, and wind up hiding the navigation class on a desktop PC.

You can guard against this problem with Internet Explorer's "conditional comments" feature, which all versions of Internet Explorer do understand. Unfortunately, conditional comments are available only in HTML, not in a separate CSS file. But that's OK, because you can use the conditional comments to decide whether or not to bring in a separate CSS file with the link element, like this:


<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)"
  rel="stylesheet" type="text/css" href="iphone.css"/>
<!--<![endif]-->

And the iphone.css file can then contain the following:


.navigation {
  display: none;
}

You should load your main CSS file first to get the desired effect.

"Great, but I don't own an iPhone. How do I test my page?"

Testing your page on an iPhone is easy if you have one. But if you don't have $400 burning a hole in your pocket, or you haven't waited in line all day just yet, you'll need another solution.

The best way to test your pages for iPhone compatibility, apart from a real iPhone, is to use Apple's iPhone simulator. The Mobile Safari browser in the iPhone simulator comes very close to matching the feature set of a real iPhone.

The iPhone simulator is included in the iPhone SDK. Setting up the SDK takes doing, but when you're done you're prepared to write native iPhone apps as well. You do need a Mac to install the iPhone SDK.

For those who feel this is too much work, there is an alternative browser simulator. It's called iPhoney and it is available from marketcircle.com. This too is only available for Macintosh computers. That's understandable— iPhoney works because MacOS X systems offer the same Safari web browser that is found on the iPhone. iPhoney "embeds" the Safari browser in a simulated iPhone-like environment.

Safari has only recently been released for Windows and folks haven't figured out how to make it simulate an iPhone on Windows just yet. If you think that needs to change, you can work on it yourself— iPhoney is an open source project.

The Catch: max-device-width doesn't work on iPhoney

There's just one catch: the technique I've recommended above works on real iPhones... but not in iPhoney! That's because the Safari browser inside iPhoney can still see the real size of your desktop.

Is there a workaround? Fortunately, yes. Thanks to the folks at marketcircle.com, I'm now aware of an alternative: we can base our CSS code on the width of the browser window, instead of basing it on the width of the entire screen. Just use max-width instead of max-device-width:


<!--[if !IE]>-->
<link media="only screen and (max-width: 480px)"
  rel="stylesheet" type="text/css" href="iphone.css"/>
<!--<![endif]-->

Looks great! But is there a downside? Well, just one thing: if a user on a normal desktop Macintosh or Windows PC running the Safari browser intentionally makes their browser window very narrow, and then accesses your page, they will see the same changes that iPhone and iPhoney users see. And if they then widen the browser window, the hidden content doesn't automatically reappear. The user has to manually refresh the page first.

Luckily, users are unlikely to see this as a problem. When was the last time you intentionally narrowed your browser window all the way down to 480 pixels across... and then got mad when the site helpfully adjusted the display for narrower screens?

Current versions of Internet Explorer and Firefox don't support media only, so they will never hide the navigation class, no matter how narrow the window gets. This is not a problem because our goal is to hide it on iPhones, not desktops!
You may also find references to a website called iphonetester.com which displays an iPhone-sized web page. Unfortunately iphonetester worked very poorly in my tests. Even on a real Macintosh running Safari, it did not format web pages in an iPhone-like way at all. Probably the site just embeds the page you want to look at in a small inline frame. It is not an accurate simulation of an iPhone.

For more information about designing for the iPhone, check out Craig Hockenberry's excellent article on A List Apart.

Share |

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!


Follow us on Twitter | Contact Us

Copyright 1994-2014 Boutell.Com, Inc. All Rights Reserved.