Now if you visit Blog Relations on an iPhone or iPod Touch you see a page that is easy to read straight away.   There’s no need to pinch to increase the text size, or to scroll around to find the navigation. For those who are technically minded, I included the iPhone style sheet in my header with this snippet:

<!–[if !IE]>–>
<link rel=”apple-touch-icon” href=”/iphone.png” />
<link media=”only screen and (max-device-width: 480px)” href=”http://www.blog-relations.com/wordpress/wp-content/themes/Relations/iphone.css” type= “text/css” rel=”stylesheet” />
<!–<![endif]–>

The  ie negative conditional is to make absolutely sure that Internet Explorer doesn’t use the iPhone style sheet.  And the complicated media attribute is because mobile Safari does not obey media=”handheld”.  (Microsoft gets hammered for not always supporting web standards, but Apple gets away with it. That’s image for you).

My iPhone style sheet make the  width of containers “100%”  so that they stretch to the edges of the iPhone  whether it is held upright or horizontally.   I’ve also set a larger font size than usual – 4em – which is the equivalent of 40px on this site.   And the sidebar is set to “float: none; clear: both” so that it comes down the bottom.  To improve it further I could add a link to skip to the story navigation down below.   I might also consider setting the articles on the front page to summaries so that there is not so much text to scroll through.

Next to take a look at Storynory.   That’s not going to be quite so easy, but I’m sure now that CSS is the way to go with this.  An alternative style sheet is so much simpler to make and to maintain  than serving up a mobile version of the site.

iTunes is still a great way to deliver audio and video to a mobile device.  But  not everyone knows how to find podcasts in iTunes. It seems to me the most important thing is to have site that works on a mobile.  This means it should be written in good xhtml that works on a desktop and on a mobile.   It’s also perhaps a good idea to offer a  different version of your site to mobile visitors (though this can be problematic).

I’ve had my iPod Touch since Thursday night.  I’ve used iTunes a fair bit – for instance listening to the latest episode of For Immediate  Release as well as music.   But the internet site I’ve visited most often is BBC iPlayer. It serves up a mobile version of itself that is easy to navigate on a small screen with video in a format that plays on a mobile.   TV looks pretty good on it.  But I’m listening a fair amount to Radio 4 programmes that I’ve missed.   I know that would not be everyone’s taste, but a mobile device is fantastic for audio. I know that Storynory is in a good place.

I’ve concluded that every site, and especially every site offering media content such as video or audio, should be optimised for mobile.  For many sites it’s good enough to have an alternative css style sheet. Media is a bit different, because you probably need to use a different media format (not flash, but say QuickTime).

An app is nice, but it’s of secondary importance.   Storynory, I’m glad to say, works on a mobile, but it could work so much better.   I’m planning a mobile version.   We’ll have an app too.  I’m just wondering whether to “sniff out” which device people are using, and automatically serve it to them.  Or just to provide a link that people can bookmark.  Sometimes simple is best.