How to design an iPhone-friendly Website

by bram

from http://www.lightsphere.com/dev/articles/design_for_iphone.html

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”:

<meta name = “viewport” content = “width = device-width”>

<meta name=”viewport” content=”width = 320″>

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:

<link href=”iphone.css” type=”text/css” rel=”stylesheet” />

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):

<link media=”only screen and (max-device-width: 480px)”
href=”iphone.css” type=”text/css” rel=”stylesheet” />

Be sure to put this line after your other CSS links.

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:

  • American Typewriter
  • American Typewriter Condensed
  • Arial
  • Arial Rounded MT Bold
  • Courier New
  • Georgia
  • Helvetica
  • Marker Felt
  • Times New Roman
  • Trebuchet MS
  • Verdana
  • Zapfino

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 “<!– not mobile –>”;
}
?>

This example looks for iPhone, BlackBerry and Palm user-agents.

Bookmark-Friendly Pages

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:

<link rel=”apple-touch-icon” href=”/custom_icon.png”/> OR
<link rel=”apple-touch-icon-precomposed” href=”/custom_icon.png”/>

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.

Scrolling Tricks

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

<a name=”top”></a>

That prevents something like this from working:

<a href=”#top”>Back to Top</a>

The solution is to add a bit of JavaScript instead:

<a href=”javascript:window.scrollTo(0,0)”>Back to Top</a>