Better iPhone WordPress Themes

iPhone optimised WordPress themes are nothing new, in fact, I expect many of you already have iPhone optimised themes using one of the many plugins available. Here’s the thing though: the iPhone is actually quite good at rendering web pages, so I often find myself switching back to “desktop” view when browsing on my iPhone.

Your iPhone optimised WordPress theme doesn’t have to be the single column look we often see; there’s no reason at all why you can’t just slightly simplify your theme and still give iPhone users a decent experience when visiting your site. That’s what we’ll be doing in today’s post, using just CSS.

IPhone stylesheets

The first thing we need to do is to set up our iPhone specific stylesheet. Put the line below after your normal stylesheet so we can just overwrite some styles using an iphone.css stylesheet uploaded to your theme’s directory (instead of starting from scratch).

It’s that easy: you can just tweak a couple of styles and have a lovely iPhone version of your site, looking just like the “proper” version.
<link media="only screen and (max-device-width: 480px)" href="<?php bloginfo('template_url'); ?>/iphone.css" type="text/css" rel="stylesheet" />

Potential drawbacks

Before we get styling, there are some downsides to this method. This isn’t the most efficient way of doing things as potentially some elements will have to be set to display:none;, meaning that they still load, just aren’t displayed. This may have some impact on performance but personally I think as long as your site loads quickly normally, it’ll be fine here.

Slim down, load up


So onto the styling. Portrait, the iPhone’s 320px wide, landscape 480px. Most iPhone specific themes will be 320px, just showing some content. Personally, I see no reason not to just shrink a site slightly, perhaps slimming the sidebar right down to 150px and getting rid of things iPhones can’t properly display (such as tabs).

Every site is going to differ, but something like this will probably do the job:

#wrapper, #header, #footer { width: 600px; }
#content { width: 480px; /*margins may need to be set, but we'll assume they're inherited from the desktop stylesheet */ }
#sidebar { width: 150px; }

You then might find that you need to hide some sections, which you can do with display:none;:

#tabs, #read-more { display: none; }

Once you’ve fiddled around with that a bit, you’ll soon have a delightful iPhone specific WordPress theme for your blog.

Custom icons


But we’re not stopping there though! There is something else that’s really easy to do (that’s worth doing too): make an icon so when someone bookmarks your site to their home screen, your custom icon will show up.

You just need to create a 57×57 PNG without any gloss and upload it to your template’s directory/images/ and then add the following to the <head/> section:

<link rel="apple-touch-icon-precomposed" href="<?php bloginfo('template_url'); ?>/images/iphone-icon.png" />

For better or worse

That’s all there is to it. It won’t be for everyone; some might prefer 320px wide layouts, but personally, I find them quite annoying so by making it as much like the desktop site as possible but making it easier to use on an iPhone, I think your readers will love you for it.


16 Responses

Comments

  • Excellent, thanks! Something I’ve always wondered about but sounded daunting before now.
    The site is a great resource too – I came here once after you wordpressified my theme and keep finding myself drawn back by helpful content!

  • Tony says:

    I really like the custom post layout here!

    • Alex Denning says:

      I’m fairly pleased with how it turned out in the end! The images aren’t quite right, but on the whole I’m rather pleased πŸ™‚

  • Theo says:

    Nice and simple. Thanks !

  • Amor says:

    I like this art directed post, something I’d like to try too. You changed it a bit? It has slightly different style when I visited last night, but this looks better. Now, I’m looking for more art directed posts. πŸ™‚

    • Alex Denning says:

      Erm… don’t think I’ve changed it!

      I’ve got an awesome one lined up for Monday πŸ™‚

  • Diti says:

    Just so you know, the iPhone is not the only mobile device to profit from this. Any HTC device will do, for example.

  • Fantastic article Alex.

    As Diti points out, there are lots of different touch screen phones on the market. Do you know what the standard native resolution is for most touch screen phones?

    • Alex Denning says:

      Cheers Kevin.

      No, in short, although I’d imagine that it’s similar if not the same as the iPhone for most capable phones.

  • Bart Hook says:

    Great article Alex. I wasn’t aware how easy it was to include just the iPhone CSS.

    I ended up using a plugin WordPress Mobile Pack which gives you a couple styles out of the box, but also allows for very easy customization. I also use a javascript to detect the orientation to allow for different styles depending on if you see it as profile or landscape. Your way would have been a lot simpler. πŸ˜‰

    Take care.

    Bart

    • Alex Denning says:

      It’s those plugins I don’t like! They end up giving you the same generic look, although, admittedly, your site does look rather cool πŸ˜‰

      I guess you could have another stylesheet to load when the iPhone’s horizontal.

  • Hi, Great article.
    I am learning how to do this at the moment. But am struggling to find out how to test without having an iPhone.
    I have a Android phone but it seems to use the website CSS file instead of the mobile one?

    Keep up the good work!

Pingbacks