To improve the experience of users visiting your website from an iPhone, it is necessary to evaluate how your content will display on these devices. This will allow you to identify areas in which your content can be optimized more effectively.

For example, increasing the font size and breaking content and navigation into more appropriately formatted blocks will increase usability. In fact, its possible to deliver an iPhone friendly version of your website without the need to maintain separate copies of your content. This can be accomplished by using an external style sheet to stylize your current website for iPhone visitors.

Media Query
We’ve covered the topic of detection in some detail in previous articles using PHP, JavaScript and even .htaccess but today we will cover a similar effect using a CSS media query, as recommended by Apple.

Step 1: Add the following declaration to the head of your index.html file

<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iPhone.css">
<!--<![endif]-->

This will instruct the browser to use this style sheet for devices with a maximum width of 480 pixels. Browsers that do not support the only keywored will ignore the rule. The IE conditional statement is added to safeguard against IE6/7 rendering inconsistencies believe it or not.

Step 2: Create the style sheet
Here we create iPhone.css and define a simple class, foo, with the following attributes:

.foo{
color:#ff0000;
font-size:18px;
font-family: Arial;
}

Step 3: Reference the class from your content

<div class="foo">
Example of stylizing content for iPhone and iPod touch. This text will renderin red as 18 pt Arial on the iPhone, and without styles applied for other visitors.
</div>

If you are looking to begin serving optimized content to your iPhone and iPod touch visitors, this is an effective way to control presentation of your content with a simple modification to the original site source code-and a little elbow grease.

The files used to make this tutorial can be found here.

Let us know if you’ve found this information useful.

-Shaun Mackey

(4 votes, average: 4.5 out of 5)

 Loading ...