Skip to navigation

malevolent design weblog

This blog is now defunct, but you can find more stuff over at my personal site

Optimising Your Web Site (a little) For The iPhone

iPhone screenshot

The iPhone/iPod touch’s Safari browser is impressive, and renders most sites well enough to make them perfectly usable, so you probably don’t need to adjust your site (and browser-specific faff is best kept to a minimum). However, it may be worth spending a small amount of time improving the browsing experience for a growing segment of visitors, in the same way it’s worth creating a simple print style sheet.

Countless guides out there cover this topic in detail, but I thought I’d distil it down to the quick’n’easy basics for a typical site.

Viewport Size

You can specify various settings via the viewport meta tag, but the main one is width. Pick the minimum the layout can fit into, so that the initial zoom is as large as possible.

<meta name="viewport" content="width=780" />

iPhone-specific Style Sheet

To add CSS targeting the iPhone/iPod touch (and any future browsers supporting the same media syntax and similar screen resolution) place this after the existing styles are loaded:

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

You could override most styling with this file to present a completely different design, but initially just focus on hiding any page elements you think aren’t necessary/suitable for a mobile device and ensuring text is legible by tweaking sizes and colours. If you’re using position:fixed anywhere you’ll need to change to absolute or relative, and avoid having any overflow:auto scrolling areas within the page (many/most users don’t know about two-fingered scrolling).

Adjusting Text Size

Some tiny text may be automatically enlarged by the browser, but you can easily improve upon this manually with the -webkit-text-size-adjust property, e.g. put something like this in your iPhone style sheet:

body
{
  -webkit-text-size-adjust:150%;
}

If necessary, apply different percentages to specific elements to maximise legibility.

Home Screen Icon

When an iPhone user adds a web site to their home screen, it can have a custom application icon. Create a PNG image that measures 57x57 pixels and put it somewhere sensible (e.g. your site’s image folder), then point to it with:

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


As you can see from the screenshot at the top, at the time of writing this site needs lots more work to be ideal (new navigation bar and single-column layout), but spending mere minutes addressing the above points has already helped.


Comments


Comments are now closed for this entry.