As I write this, we are fast approaching another Christmas festive season. This means the sales of mobile media devices such as the iPhone and iPod Touch are likely to increase, and for each one of these sales there is a chance that the user may wish to visit your site. So is it worth tailoring their experience of your site just for them? I'd say that as long as you maintain a balance between the work required and the cost of doing so, it is well worth the effort as people browsing your site from their iPhone are a prospective customer.

One of the biggest challenges when developing a site for use on the iPhone is that the iPhone will use your sites "screen" stylesheet rather than one's flagged as being for mobile devices.

Fortunately CSS3 has a solution to easily identify the smaller devices such as the iPhone - the media query tag; and even more fortunate that this query tag is supported by the iPhone. An iPhone can have a specific stylesheet using either the following link tag in your page's markup, or by using the @media tag in your CSS file.

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

@media screen and (max-device-width: 480px) {
 ...
}

So that's how to specify a different stylesheet, now onto content and usability. Strictly speaking the content you use on a mobile device should be the same as what it retrieved in a normal browser - if you serve a different page then you need to ask yourself why the "screen" version has more or less content. It should be different by styling only, though it is argued that content for mobile devices should be less.

Usability is left to being a case of try it and see. Apple have their iPhone Dev Center which tries to help make decisions on user interfaces aimed at the iPhone and describes how different interactions work on the phone. These interactions are listed by Apple as being:

Another major point, just with any other site, is to be aware of standards. The iPhone and iPod Touch supports the following:

• HTML 4.01
• XHTML 1.0
• CSS 2.1 and partial CSS3
• ECMAScript 3 (JavaScript)
• W3C DOM Level 2
• AJAX technologies, including XMLHTTPRequest

It is also worthwhile remembering that these devices also use a version of Safari so you can use Safari on your Mac, or Safari for Windows to test your design.

Something else that is useful is that when providing contact details you can use the following protocol to initiate a call on the iPhone when it is tapped (note: example comes from Apple website).

<a href="tel:1-408-555-5555">1-408-555-5555</a>

For now this should be all you need to know to get developing on the iPhone!