Blog Relations

I’ve done some simple optimisation of this site for iPhone using only CSS.     I picked up some good tips here and here.

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.