Ciaran McNulty

The first thing I should probably mention is that yes, despite saying I wouldn't, I got an iPhone 3G relatively soon after release. I'll skip the reasons why for now, that's for a future posting. Naturally the first thing I did upon getting my iPhone was to plug in my own site's URL into the browser and see how it did - you can see the result in the screengrab.

You know what - it's not bad. The site looks roughly as it should, and with a bit of zooming and panning around all the content is accessible. However, on first load the text isn't really legible and it's not making the best usage of the limited screen space on the iPhone. Also, the large header graphic makes loading a bit strenuous over an EDGE connection when I'm not in 3G coverage.

Simon has been blogging recently (here and here), about 'mobilising' websites (and has written a good article on the subject for php|architect) so it's something I've been thinking about lately and I decided to see what it would take to improve the way the page was rendered on iPhone.

It's important to realise that this is a very niche pursuit. What Simon's series of articles is talking about is enabling a site to be viewed from any mobile device, which is a very different kettle of fish from just making it work better on a fancy-pants iPhone - this is really just for my own edification.

So, the first thing to do was to look through the Apple documentation on iPhone web development, which I found was well written and clearly laid out.

The first thing I wanted to do was eliminate a lot of the whitespace on the right of the page. Adding iPhone-only CSS is done using a CSS3 mechanism called Media Queries. It's not an Apple-specific technology, it's from the W3C and is a generic way of applying complex rules as to which stylesheet(s) a specific device should use.

I wrote a phone-specific stylesheet that normalised the column widths to the same as the content area and removed the header image. The extra markup in the HEAD of my document looks like this:

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

This says the specified stylesheet should only apply to devices that support Media Queries, consider themselves 'screen' devices, and have a screen width of less than 480 pixels. This obviously applies to the iPhone, but hopefully more and more user agents will support Media Queries - they're a very powerful mechanism for specifying how a site should display on devices with a hugely varied range of capabilities.

With the new CSS applied for iPhone, the site started to take shape. The content was all in a nice vertical column, but the phone still wasn't displaying the page zoomed-in enough.

One solution would be to change all of the page's sizings in CSS so that it fitted into the iPhone's default 980px-wide zoom level, but this seemed a bit messy as the extra CSS was so far fairly small and clean.

Apple's solution to this a META tag to the HEAD of your document that specifies what zoom level to use on load. My content was 516px wide so mine looks like this:

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

You can do a lot with this META tag, such a disabling user zoom, but frankly I think it's a horrible solution.

It lacks the granularity of something like Media Queries, so you're left specifying one common viewport for all 'viewport-aware' devices. Hopefully there will be some way of specifying viewport dimensions in the stylesheet in future, or that I've missed something.

With this extra bit of information, Safari is now able to render the site in a much more usable form. The single-column means only a vertical scroll is needed, with the sidebar items relegated to the bottom of the screen. The text is legible from the offset, and the loading times are severely reduced.

Obviously this is only a simple example, but hopefully it illustrates how a couple of simple steps that you can make fairly harmlessly to your markup, can vastly improve the browsing experience for the iPhone users amongst your audience.

Whether it's worth the effort for your site is a cost/benefit analysis you'll need to make for yourself, but I strongly believe that technologies like Media Queries will become more and more useful in future, as the current separation between 'computer' and 'mobile' browsers breaks down into a continuous spectrum of PCs, tablets, PDAs and tiny embedded browsers with a massive range of capabilities.