|You can also listen to this post as a Podcast|
Have you looked at your stats recently and seen how many people read your posts on a mobile device?
In the last month, almost twenty percent of the visitors to this blog viewed it on a smartphone or tablet. But what has concerned me lately is that those twenty percent read twenty percent fewer pages and left twenty percent sooner than anybody else.
The rise of mobile is inexorable and we bloggers, like everyone else trying to earn a crust on the web, can’t afford to ignore it. A recent study by Morgan Stanley suggests that mobile web use will overtake desktop for the first time, by 2015.
In another survey, commissioned by Decision Fuel, 67% of current mobile surfers said that a poor user experience on mobile, will put them off using a site permanently.
Since mobile use is only going to get bigger and since I certainly don’t want to alienate a substantial portion of my readers, I have been looking at ways to optimise my blog for this new breed of user with smaller screens and more distractions.
My mid-term plans are quite ambitious. They include building a separate, mobile-dedicated site and ultimately providing an app, but in the meantime I have been finding out about ways to make the current site much more mobile friendly.
I thought that other people might like to know something about optimising for mobile as well, so I decided to create a post about it. However, there turns out to be so much to cover that I have had to split it over three or four posts, which I’ll be putting up over the next week or so.
This first part focuses on choosing the right theme. In future posts we’ll look at:
- caching and compressing for speed
- the best way to handle images and
- more radical steps like building an app or creating a separate, dot mobi site
I have also created a ‘Mobile Resources’ Page to accompany the series with links to all the tools and sites that I mention.
The Right Responsive Theme
The first thing to think about is finding a theme that is mobile friendly. For the purpose of this exercise, I use the word mobile to cover both smartphones and tablets. However, when I’m testing any of these things, I believe it is best to try and optimise for smartphones first, because they are so much smaller than desktops.
If you can create a good user experience on a four-inch smartphone screen, then tablets will pretty much take care of themselves.
I’m reluctant to make any particular recommendations on themes, because so much of it comes down to personal preference and the type of content you create. The key attribute is that your theme needs to be ‘responsive’.
All this means is that, instead of remaining fixed on every screen, the theme reacts to the device that it is being viewed on and tries to optimise to look its best on anything from a 4 inch mobile screen, though 7, 9 and 10 inch tablets, right up to a full-size laptop or desktop screen.
Once it detects the device, a responsive theme will rearrange the content, shrink or expand images and text and generally configure itself to try and deliver the best appearance that it can.
Although responsive themes generally work well, it’s hard to design something that fits every situation and there will always be some devices on which a theme really doesn’t deliver. The problem is, because there are so many device and browser combinations, you will never know if it’s not working for some people, unless you have the exact same device to test it on.
There are online emulator sites which will give you an indication, but access to them is not cheap, and there are question marks over how accurate they are. (See the Mobile Resources Page)
For the average blogger, the best test is to install a theme and then view it on the nearest smartphone. If you can get your hands on both Android and Apple handsets, so much the better.
As I mentioned earlier, since the smartphone has the smallest screen and therefore presents the greatest challenge, I suggest that you focus on that. If you can get that right, then the tablet will probably be well covered too. Of course, if you have access to a tablet for testing, you will be even further ahead.
Backup, backup, backup
Before you start experimenting on your site, I strongly suggest that you take a backup and make one change at a time. I learned about backups the hard way, which you can read about here and I wouldn’t want the same to happen to you.
Protect yourself by using WP Clone or a similar plugin, before you start switching things round.
Best of all, if you have a spare domain name that you’re not using, clone your current site over to it and use it as a test bed for your mobile experiments. That way, if anything breaks it doesn’t matter and you can test more extreme changes without worrying.
There are plenty of themes to choose from, both free and paid for and the best approach is to try a few.
Start your search for a new theme by signing in to your dashboard and clicking on ‘Appearance, Themes, Install Themes’ and typing either ‘responsive’, or ‘mobile’ or both, into the search box.
WordPress will serve up a whole raft of possibilities; there were about 180 last time I looked.
My best advice, rather than getting carried away with aesthetics at this stage is to pick a few at random and try them out, one by one. Changing themes takes seconds, so even trying several shouldn’t take too long.
Unless you’re an Android user, like me. I don’t know if this is an issue on the iPhone, but the Chrome browser on my phone has a very persistent cache. This is annoying, as I often have to refresh the screen several times, before Chrome recognises that the theme has changed.
The point here is to focus on the mobile experience, so make sure to see how the theme acts on the small screen. Then the tablet, if you have one and finally the desktop.
The key benefit of a responsive theme is that it covers you in every environment. But that is also its key drawback. Ultimately you will be settling on a compromise – ie what looks the closest to optimal for each environment.
Some themes are very sophisticated and have clever settings to control what happens in certain situations, so you may have to make several adjustments before you’re happy.
I can’t really advise you on the best theme to choose, because what works for me may not be ideal for your blog or suit your type of content. Having said that, the theme I use is called Weaver II and I have found it to be very flexible and controllable. However, you do have to take some time to learn and experiment with the settings, so if you don’t like getting too technical, it may not be for you.
A couple of others which lend themselves well to mobile are ‘Responsive’ by cyberchimps, and ‘PilotFish’ by danny1990. Or if you like the Pinterest style of layout, try ‘PinPress’ by ezhil or ‘Pinboard’ by pseudoxiah.
But as I say, the right theme for you is a very personal choice.
(You’ll find all of these if you do a search for themes in WordPress)
Another source, if you’re willing to look at paid themes, is this Tripwire report from March – ’25 Mobile WordPress Themes’
And another theme worth looking at and one that I’m seriously considering buying, is Touch from the Bonfire stable – see the Mobile Resources Page for a link.
If I do decide to buy it, I’ll review in a future post.
An alternative to changing the theme and one you might want to experiment with first, is to try a mobile plugin like WP Touch – freely available on WordPress.
The idea of Touch, not to be confused with the Touch theme mentioned above, is that it will take your current theme and mobile-ise it. This way you don’t have to make any changes to your existing layout. For some people who have spent a long time perfecting their look and feel, that’s an attractive proposition.
However, I have had mixed experiences with Touch – it doesn’t seem to work with every theme, you often have to fiddle around with the cache settings and I have had difficulty getting it to display correctly on the Android platform.
Try it for yourself and see. It might work for you and when it does work, it looks good. It uses a smart set of icons to sit next to the post extracts, and looks very clean and modern.
A word of caution is in order at this stage. Generally, changing themes won’t do any drastic damage to your site, but what you may find is that it will make changes to some of your settings. That’s because each theme has different defaults and they usually don’t reset those when you deactivate them. So don’t be surprised if a couple of things have been switched on or off.
If this is a pain, then just restore your backup from WP Clone and everything should be back to how it was.
Eventually you will find a theme that works well on mobile, looks great on tablet and still delivers a good experience on desktop. Once you have found it, spend some time understanding its settings and configure it just the way you like it.
You’ll then be ready for the next post in this series, which will focus on the need for speed; how to test your site for efficiency and the mysteries of caching.
I hope you found this post useful. Don’t forget to check out the Mobile Resources page and please write a comment and tell us about your experiences with mobile responsive themes