Kira's Web Toolbox: Designing an iPhone-friendly Website

Designing an iPhone-friendly Website

The iPhone can display most websites without modification, however the user often won't be able to read the text or see anything useful without pinch-zooming on your page. Here's how to set up an iPhone-friendly version of your website that doesn't require zooming.

1. Set the viewport width inside the <head> section of your HTML page. You can either specify an exact width in pixels, or use "device-width":

If you set the width to 320 pixels, then your page will appear skinny even on desktop browsers. device-width is the better option if you're trying to create an all-in-one page.

2. Set up some CSS.

Add the link for your CSS file in the <head> section of your HTML page:

If you want to use the same HTML page for both iPhone and regular web browsers, you can indicate that this CSS file is only for clients with smaller screens (like the iPhone):

Be sure to put this line after your other CSS links. (If you'd like more control over which devices get what page layouts, see the Dynamic Pages section below.)

Now set up the iphone.css file. Start off with a body tag that also sets the width:

body {
width: 320px;
font: 12pt Helvetica, sans-serif;
}

Helvetica is the iPhone's default font. You can use other fonts, although the iPhone has a rather limited set of fonts available.

Since the iPhone's screen width is 320 pixels, you may also want to specify some CSS tags that set the max-width of certain elements, such as images and tables:

img, table {
max-width: 320px;
}

If you have elements in your main page that you'd like to hide completely in the iPhone version, add CSS tags for them and set the display to none:

.mobile_hidden {
display: none;
}

Dynamic Pages

If your site is dynamically generated (using PHP, Rails, etc.), you can display the apporopriate headers to different devices.

Instead of the <meta> tag above, add the following line to the <head> section of your HTML pages:

<?php include("mobile_hdr.php");?>

And here's the mobile_hdr.php file. This looks at the browser's User-Agent string to determine if it's a mobile device:

<?php
     $agent = $_SERVER['HTTP_USER_AGENT'];

if (ereg("(iPhone|BlackBerry|PalmSource)", $agent) != false) {
echo <<<END
     <meta name="viewport" content="width = device-width">
     <link rel="stylesheet" href="/iphone.css">
END;
}
else {
     echo "";
}
?>

This example only looks for iPhone, BlackBerry and Palm user-agents. Here's a longer list of mobile user-agent strings.

Bookmark-Friendly Pages

iPhone users can create a bookmark to your website which will appear as an icon on their iPhone. These steps will ensure that the bookmark is a useful and attractive one:

1. Set the page title to something short. The max length of a title on the iPhone screen is 12 characters. If your page title is longer than that, then "Really Long Spammy Title" gets truncated to "Real...title".

2. Create an icon. Your icon should be a square 57 x 57 pixel PNG file. You don't need to add the rounded corners or glossy highlight to your icon; the iPhone automatically creates those effects for you. (If you don't want those effects, you can specify a "precomposed" icon.) The icon should be named either:

"apple-touch-icon.png" or
"apple-touch-icon-precomposed.png"

Upload the image to the root folder of your site, and it will be used as the icon for your entire site.

To specify a custom icon for a particular page, use the following code in the header of your HTML page:

Testing the Page

The best way to test your pages is on the iPhone itself. There are some browser tricks you can use, though.

You can use Safari to preview how the page will look on the iPhone. First be sure the "Develop" menu is enabled (go under Preferences -> Advanced and check the "Show Develop menu" checkbox at the bottom).

Then change Safari's user-agent string by selecting Develop -> User Agent -> Mobile Safari (iPhone). Reload the page.

Alternately, you can download iPhoney, which simulates the iPhone browser (in most regards).

I've found that these don't work for testing pages that use the "only screen and max-device-width" CSS trick. If you set the page headers dynamically, though, then these test methods do work.

Scrolling Tricks

Mobile Safari has a bug where it ignores empty named links:

That prevents something like this from working:

The solution is to add a bit of JavaScript instead:

More Info

Designing Content for the iPhone
Put Your Content In My Pocket
Safari Web Content Guide for iPhone OS. You'll need to register for the iPhone developer site to access this, but registering is free.

Home