As mobile usage increases, many website designers and developers are turning their attention to creating optimized websites for small screens on smart phones. This post will give you an insight into how to start creating an optimized website, compatible with the iPhone and iPod Touch.

Rules to stick to

• iPhone screens are small, therefore we want no small buttons on the site. Every link should be easily clickable, without the possibility of misclicking a link.
• Zooming in and out can get frustrating and tiresome. Ideally, we only want the user to scroll downwards as it's an easy action to complete!
• Try to minimize the number of images you need to load. Instead, try to replace as much as possible with CSS rules. This minimizes page loading times
• Your website design should be fluid; remember we have both landscape and portrait modes available to us. Try to use percentages instead of fixed pixel widths.
• Try to minimize JavaScript effects on the website, especially animations. The iPhone doesn't have as much processing power as a normal computer. Other JavaScript to process forms etc. are fine.
• Psuedo classes such as hover in CSS are useless. Bear these things in mind

Our Options on how to Tackle the Problem

When you open your website on the iPhone, safari will automatically do a few things: It'll scale the text to a larger size to try to make it readable on the small screen and it'll zoom the screen out to display the whole website making everything unreadable. All of these actions distort the shape and size of our website; We'll want to stop this from happening.

There are a few ways in which we can tackle the problem, to style our site for the iPhone:

• We can add CSS rules into our existing CSS file specifically for the iPhone, for when an iPhone is detected.
• We can load a completely separate stylesheet specifically for the iPhone, for when an iPhone is detected.
• We can create a whole separate site, detect the user is using an iPhone and redirect them there.

If you're using PHP, then you can choose to use any of the above options. However, if you're just using static HTML files, option 1 or 2 is probably your best bet as you won't be able to physically redirct your users to a different site.

I'm going to assume you're using PHP on your server.

The ViewPort Meta Tag

The viewport meta tag is used to tell mobile browsers how they should work on a specific mobile optimized website, and what they are allowed to do. On my own mobile site, I restrict the user from zooming in and out, and give my website a default width. This is what I recommend:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

• width is set to device-width as we have both portrait and landscape modes available to us. This makes the website fluid, and will change depending on how the iPhone is orientated. Setting width to the iPhone's usual width of 320px is a big no, as this will distort the website in landscape mode (which is 480px in width).
• initial-scale tells Safari how much it should zoom into the website when rendering it. A value of 1 is normal size (i.e. no zooming), whilst anything higher or lower refers to zooming in and out respectively.
• maximum-scale (or minimum-scale) refers to the maximum (or minimum) amount you are allowed to zoom into the site. A value of 1 is normal size again.
• Finally, user-scalable tells Safari is the user is actually allowed to zoom in and out. 0 means the user is not allowed to do any zooming.

Therefore, my viewport meta tag above tells Safari that the user is not allowed to zoom in or out, the intial scale should be the normal size, and that size should not change. Finally the width should be fluid, and change depending on the orientation of the iPhone.

The available options in the viewport meta tags are as follows: width, height, initial-scale, minimum-scale, maximum-scale,user-scalable.

The "apple-touch-icon"

The apple-touch-icon is an image which is used when a user saves your site as a bookmarklet on his iPhone. This image appears on the springboard of the iPhone along with your websites name. To have one, create a 57px x 57px square image and link to it using the link tag:

<link rel="apple-touch-icon" href="/custom_icon.png"/>

This image should not have curved corners, or a glossy effect - The iPhone adds this in automatically!

Applying CSS in an existing CSS Document

So you've styled your site in an external CSS file: how can we use the same CSS file to apply rules only to the iPhone? By using the @media tag!

@charset "utf-8";

/* Some CSS Here */
.someClass {
	color: #000;
}
#someID {
	background-color: #0FC;
}

/* iPhone Specific CSS Here */
@media only screen and (max-device-width: 480px) {
	.someClass {
		...
	}
	#someID {
		...
	}
}

As you can see here, we can target the same Classes and IDs twice, but apply new rules to them when the iPhone is detected. Remember, if you want to change the properties of an item, such as the margin for example, you may have to apply the !important rule for it to take priority over existing rules.

Applying CSS Rules into an External Stylesheet

The main problem here is detecting the iPhone in the head of the document, and applying the correct stylesheet. Using PHP is easy (and will be show later on), but if PHP is not available to us, we'll have to use other methods.

We'll use the media selector in the link tag to specify iPhone only CSS, and non iPhone CSS. The setup is as follows:

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

The iPhone cleverly ignores the handheld and print selectors as they are generally associated with lower quality web content.

Using PHP and detecting the UserAgent

The UserAgent strings for all iDevices are as follows:

iPhone

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/xxx+ (KHTML, like Gecko) Version/x.x Mobile/xxxxxx Safari/xxx.x

iPod Touch

Mozila/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/xxx.x (KHTML, like Geckto) Version/x.x Mobile/xxxxxx Safari/xxx.x

iPad:

Mozilla/5.0 (iPad; U; CPU like Mac OS X; en-us) AppleWebKit/xxx.xx.xx (KHTML, like Gecko) Version/x.x.x Mobile/xxxxxx Safari/xxx.xx.xx

To detect any one of the followings, I use preg_match in PHP:

<?php preg_match('/(iphone|ip[oa]d)/i'); ?>

You can then echo out different CSS files, or redirect the user to a Mobile version of your site using the header command.

The Rest of the Styling

The rest of the styling is really down to you: just keep testing along the way. Remember to use percentage widths instead of pixels and try to only include contents that is really necessary! It's a small device, so don't expect to be able to load massive amounts of data a make it look good. For inspiration, I recommend you check out CSSiPhone as they have some great sites for you to nab some ideas off of.

Many sites also use very basic framworks to mimic the look and feel of native iPhone Apps. The most popular frameworks at the moment are iUI and iWebKit. These framweorks have a lot of custom CSS and JavaScript already coded for you to use.

If you have any questions, comments or other tips, please feel free to post below!