Web Design for the iPhone2nd December 2008
Since it's release, many people have built web sites designed specifically for use on the iPhone. Here I'll show you a few of the concepts you'll need to do it yourself.
Here's an example of a website that has been designed specifically for the iPhone: http://www.ben-griffiths.com/iphone-example/.
Part 1 - Design
First thing to remember is that you dont have a huge screen to work with. 320x358 pixels to be precise. This does grow however, if you hide the address bar. You also have to account for the way people will interact with the site, as there is no mouse - only touch. Bigger buttons are a good thing here.
Before you begin doing anything, I'd suggest you download an iPhone PSD to work with - there is an excellent one that has been created by teehan+lax, which you can download here. This is a large PSD, so may cause Photoshop to lag on slow computers.
Using a template system like this gives you a clearer idea of the scale that your website will be presented at, and allow you to make sure that text is clear, buttons are large enough to click, and also to give you a good idea of what the web site will look like on the device before you've started the xHTML/CSS.
One last thing to take into account is the fact that people can change the screen orientation from portrait to landscape, so a fluid layout is recommended.
Part 2 - Development
When you design for the iphone, there are a couple of things you need to do in order for the iPhone to understand how to render the web site. Normal sites will be shown in full, and shrunk to fit the screen - this applies to any standard web document, even if all it contains is one word. To get around this, we need to use a META tag:
<meta name="viewport" content="width=device-width; inital-scale=1.0; maximum-scale=1.0;" />
What this tag does is to tell the iPhone that it can render at it's native resolution - pixel for pixel, rather than shrink it like it would a standard webpage.
If you have a standard version of your website, but want an iPhone version as well, you'll need to direct those people to the correct version. Here's a simple way of doing so with PHP:
if(stristr($_SERVER['HTTP_USER_AGENT'], 'iPhone')){
header("Location: http://www.mysite.com/iphone/");
exit();
}
This small bit of PHP will simply look at the browsers User Agent, and if it contains the word 'iPhone', it'll redirect to the link provided.
You can view an example iPhone specific website here: http://www.ben-griffiths.com/iphone-example/.
Further Reading
There is another neat little thing you can do with the iPhone web site - actively use the orientation. With JavaScript, it's possible to tell how the web site is being displayed, and take advantage of it. You can read more on that at the Engage Interactive blog.
