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).
<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.
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!
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.
[…] Check out a great article on WPShout.com – Better Iphone WordPress Themes […]
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?
Cheers Kevin.
No, in short, although I’d imagine that it’s similar if not the same as the iPhone for most capable phones.
Just so you know, the iPhone is not the only mobile device to profit from this. Any HTC device will do, for example.
That hadn’t occurred to me, but you’re quite right! Good spot 🙂
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. 🙂
Erm… don’t think I’ve changed it!
I’ve got an awesome one lined up for Monday 🙂
Nice and simple. Thanks !
Cheers Theo 🙂
I really like the custom post layout here!
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 🙂
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!
Thanks Tyler. Glad you’re enjoying the site 🙂