How to Optimise your Blog for Mobile Users

Recently I’ve found myself using my iPhone to access the internet more than my laptop, especially when we’re out and about because it’s convenient and easy. These days most phones come with internet access, so imagine all those people using their phones to read your blog. Imagine your blog layout. Now imagine it on a mobile phone screen. Not that easy to navigate, right? I discovered this when I visited a few blogs on my phone and found myself struggling to easily navigate their layouts with such a limited screen size.

For example, this is what my current blog layout looks like on my phone:

So, not terrible (in fact, this layout appears to be a little better than my last one!) but imagine trying to read that while on the bus or walking. You’d have to basically zoom in (unless your eyesight is out of this world!) which would result in you probably having to move the enlarged text around in order to read the entire paragraph, then if you wanted to leave a comment you’d need to click on the “comments” image, wait for it to load the entire page again, then leave a comment (don’t forget to zoom in again and make sure your fingers don’t accidentally hit any other buttons while you’re at it!).

I figured there’s got to be something easier.

Then I visited The Food Pornographer’s blog on my phone and saw that she had a completely different layout customised for mobile phone users. It was quick to load and gave me the content I really cared about – the posts and photographs – without having to load the header, sidebars and other nice bloggy things that aren’t really needed when you’re low on screen space. The layout also scaled her paragraphs and photos to my iPhone screen, meaning I didn’t have to drag the page over to read everything – it was already there and I could just scroll down as I read.

Isn’t that such a simple, to-the-point layout? To read the post, it’s as easy as clicking on the title…


…and it’s all there, easily scaled to your window (images and text) and easy to read. Scrolling down is easy too because it can’t go left or right, so you’re not going to accidentally scroll over to one side when the bus hits that bump in the road. To leave a comment, it’s even easier…


…because the comment form is already there, waiting for you to leave some luvin’! You’ve got less things to click on and less things to load which adds up to a happy blogging experience. I decided I wanted my blog to be this easy to view on a mobile phone, since my experience with using The Food Pornographer’s site via my phone was so much more pleasurable than other blogs that hadn’t been optimised for mobiles.

After trying out a few plugins, I settled on WPtouch iPhone Theme which is free and really simple to use – just install it and activate it and that’s it! There are some settings you can change (like I unticked “hide excerpts” which is ticked by default) but they are all pretty straight-forward and easy to understand. As soon as it’s activated, your blog will switch to the mobile theme when viewed by a mobile phone. If it accidentally displays as the wrong theme, there is a link in the footer which allows the viewer to switch back to the normal theme, so you’re not going to find yourself accidentally viewing the wrong one.

The plugin comes complete with a list of enabled mobiles (like iPhone, blackberry etc) but you can also add your own if it’s not on the list – this helps the plugin notice the site is being visited by a mobile phone. You can also change the colours, background pattern and how many things like categories and tags you want to include.

After activating the plugin, here is my blog when viewed on my iPhone:

I did a little customisation to it – changed the background to the “thatches” option and added my own little icon of a chocolate cake I made a while back, decorated with little sugary flowers and love hearts. Click on a post and you see this:

…and continue scrolling to the end of the post in order to…

…leave a comment! You can see that the mobile theme works well with most plugins, including the CommentLuv plugin I have installed (which of course pulls your latest post from your own blog). You can also turn off the mobile theme here, to return to the normal layout.

Now, I know that I probably don’t get a lot of visitors viewing my blog via their mobiles, but if it makes reading it easier for the one or two people who might, without adversely affecting my regular layout, then my work here is done. It’s free, it’s quick and it’s easy!

TrackBack

TrackBack URL for this entry:
http://www.byootaful.com/2010/09/how-to-optimise-your-blog-for-mobile-users/trackback/

Comments are closed.