How to enable a mobile theme on your WordPress blog in one minute
Accessing a standard website from a mobile phone is a pain. If the site does not support a mobile theme, it will cramp the pages, which normally barely fit on a laptop screen, onto a teeny-weeny mobile phone screen. Microscopic fonts, impossible to navigate, or to click links, etc. Bummer!
Nevertheless, the amount of visitors accessing your websites from mobile devices is rapidly increasing. Just for curiosity, I checked the statistics for mobile access on my personal blog.
It runs on Blogger, and as such is not mobile enabled. For 600,000 visits in the past four years:
2007: 0% mobile access
2008: 0% mobile access
2009: 1% mobile access
2010: 3% mobile access
A steady increase, which, of course, would have been higher if the site was mobile enabled! You might think 3% is not a lot, but according to web prophets, “the future is mobile”:
Mobile phones will overtake PCs as the most common web-access devices worldwide by 2013. It‘s estimated that the combined installed base of smartphones and browser-equipped enhanced phones will surpass 1.82 billion units by 2013, eclipsing the total of 1.78 billion PCs by then. (Source)
So, it is about time to get your blog ready for mobile access!
As I mentioned in a previous post: hosted blog platforms like Tumblr, Posterous (which was the last one to enable mobile support) and WordPress.com have supported mobile access already by default. Blogger, as usual drags behind…
But if you selfhost your blog, enabling mobile access for your blog, is a breeze. At least on WordPress it is. In five clicks and one minute, you can make your blog mobile ready. Literally! And that one minute will not only make your blog “ready for the future”, but might just as well attract a new “market”: Your “mobile” visitors…
I am right now switching over my blogs for mobile access one by one, using the WP Mobile Detector plugin. That’s right: one plug-in is all what’s required.
The plugin is for free, installs like any other WordPress plug-in (a breeze), and comes with seven mobile themes. So just enable the plug-in, choose one of the mobile themes, and you are done. Enable “Mobile Support”, if you use a cache plugin though!
If you don’t believe it only takes one minute to enable mobile support for your blog, check this short video I made, enabling mobile support for BlogTips (PS: there is no sound. Was just meant to show how fast the configuration goes):
It works pretty simple: as the visitor accesses your webpage, the plugin catches those using a mobile, and uses its mobile theme to “serve the blog”. “WP Mobile Detector” currently recognizes over 5,000 different mobile devices, differentiating between basic and advanced mobile devices. On the former advanced HTML and images are stripped.
The mobile themes reside in a subdirectory of the plugin, so they don’t interfere with the blog’s main theme. You can edit the .php and .css files of the mobile themes just as for any “standard” theme.
If the visitor does not use a mobile, “control” is routed as before, and your standard theme is displayed. While for “normal” visitors your usual cache plugin is used, the plugin uses its own cache for “mobile” visitors. You can’t configure the expiration date for that cache, though, which is a pity.
“WP Mobile Detector” also tracks basic mobile access statistics, and has a button to check of your site is “mobile ready”. This test also indicates how fast your home page will download on different mobile carriers (WiFi, GPRS and 3G), indicates the cost to download the homepage, and points out potential incompatibilities.
I think this is nothing short of brilliant, and am now switching over my blogs one by one to support mobile access. As I go, I customize the themes according to the blog look-and-feel. BlogTips is already mobile enabled, so have a look on your PC, and compare it when you access it on your mobile!
Oh, before I forget: “WP Mobile Detector” also comes in paid version, which allows you to easily and interactively style your mobile theme, using a built-in menu.