Optimizing my WordPress blog for iPhone users

I have no idea if anyone’s done this yet. But I’m a curious guy. I’ve optimized my WordPress blog for the iPhone. Making it compatible wasn’t an issue; the built-in Safari browser is pretty good. But I wanted iPhone users to find the blog immediately readable without the need to zoom in.

I didn’t want a new CSS for other web visitors, just something unique for iPhone users. I’m posting my methodology so others can hack it to bits take advantage of my solution.

First, I created an iPhone-specific CSS variant of my standard theme. First I got rid of the (admittedly ugly) graphic header. Then I made everything a max of 320px wide, the narrow width of the iPhone’s screen. Then I shoved the navigation menu to the bottom, just to get it out of the way (this could certainly be done better). Ok, that gave me an iPhone-optimized CSS. I named it style-iphone.css, and dropped it into my theme folder. You can view the CSS (far from beautiful, based on the xblog theme).

Ok, that part was easy. Now I wanted to get the iPhone to use it. So in the theme’s header.php I added:

<?php
$iphone_stylesheet = str_replace(“.css”, “_iphone.css”, get_bloginfo(‘stylesheet_url’));
?>
<link media=”only screen and (max-device-width: 480px)” href=”<?php echo $iphone_stylesheet; ?>” type=”text/css” rel=”stylesheet” />

So that basically changes style.css to style_iphone.css, and uses the new Apple-defined media type. In other words, this tells the iPhone to use this stylesheet, and everything else to ignore it. I put this after the normal stylesheet line, not sure if that was required or not.

Worked great, but I wanted the iPhone to zoom right into my blog instead of forcing the user to double-tap. That’s where the Viewport meta tag comes in. I wasn’t sure what Viewport might do to non-iPhone browsers, so I wrapped that in a PHP test:

<?php
if (strstr($_SERVER['HTTP_USER_AGENT'], “iPhone”))
{
echo ‘<meta name=”viewport” content=”width = 320″ />’;
}
?>

So my header.php now looked like this:

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />

<?php
$iphone_stylesheet = str_replace(“.css”, “_iphone.css”, get_bloginfo(‘stylesheet_url’));
?>

<link media=”only screen and (max-device-width: 480px)” href=”<?php echo $iphone_stylesheet; ?>” type=”text/css” rel=”stylesheet” />
<?php
if (strstr($_SERVER['HTTP_USER_AGENT'], “iPhone”))
{
echo ‘<meta name=”viewport” content=”width = 320″ />’;
}
?>

(That first stylesheet line is unchanged, as a frame of reference.)

And voila. iPhone users now see a very readable, optimized blog. Users from anything else don’t see any difference.

I’m using a somewhat old WordPress (2.0.6); I’m not sure if the header in 2.2 is any different, but the solution shouldn’t be different.

I’m very curious what others think of this implementation.

Technorati Tags:

11 thoughts on “Optimizing my WordPress blog for iPhone users

  1. might be worth adding an anchor link to the navigation for iphone users. It takes quite some time to flick all the way down. I like the basic idea of moving nav to the bottom.

  2. While the implementation is neat, and it’s good to see you trying out new ideas, I personally think what you are doing is HORRIBLE. The best feature of the iphone is to see the web as it is intended. This means full pages, all graphics, just as it appears on a regular computer… not a watered down WAP version. You’ve just taken all the work apple did and then you’re forcing a watered down ‘WAP’ version down the throats of people who spent money on an iPhone ( we could have gotten this watered down version from a windows mobile device.)

    I understand this is a personal blog of yours, but trends get set very easily.. Before you know it, more people will be doing this, and then all the features of the iphone are wasted… sigh…

    At the very least, put a link at the top to give users a choice on how they’d like to view your page….

    just my .02

  3. Robert – yes, that’s probably going to be my solution to the menu (adding an anchor). My other option is to have it be a popup of sorts (a hidden DIV layer).

    iPhone Owner – comments appreciated. My ego got a brief and unnecessary boost at the thought of me being a trend-setter. :-)

    The iPhone does a great job at viewing most pages without trouble. I think of the iPhone as a real computer with a real browser, just with a small screen. About 75% the web users are on 1024×768 screens or higher now, so that’s how web sites are being designed.

    I like the idea of presenting sites to users that are optimal for their system. I am not recommending the use of a WAP-like stylesheet. My styles_iphone.css is a real stylesheet. You can absolutely argue its graphical mediocrity. But WAP, no way.

    I saw that someone’s made a WordPress plugin that presents a WAP-like stylesheet for iPhone users. Yuchh.

    My hope is for designers/bloggers to design their site somewhat generically, then build specifics that take best advantage of whatever platform/screen-size/bandwidth/plugins/etc the visitor happens to be using. One size doesn’t and shouldn’t fit all.

  4. If there was a way to detect whether an iPhone user was connecting via EDGE or WiFi, that would be a good compromise IMO; serve the WAP-style page over EDGE, and the full-featured one over WiFi. The downside is that you’d have to know the IP ranges that EDGE users connect from and it would make the code more complicated.

  5. Pingback: Todd Biske: Outside the Box » Blog Archive » Blog is now iPhone friendly

  6. Wow! Nicely done. This looks great on my iPhone. I’m going to have to play around with this with my theme, too.

  7. Pingback: iPhone and the mobile web - niload

  8. Very helpful – thanks. Will implement soon!
    @ iPhone Owner: Due to the small screen size, my video blog shralp.com doesn’t render very pretty on iPhones so I will use this hack…

  9. Pingback: Optimizing WordPress blogs for iPhone users « The Cowell Family Blog

  10. Pingback: Temi iPhone per Wordpress