Neil Turner's Blog

Blogging about technology and randomness since 2002

How to create a mobile version of your WordPress site

With the number of people browsing the internet on smartphones increasing, webmasters not only have to check that their site renders on all the common desktop browsers, but that it’s also usable on a mobile phone as well. Thankfully, both the iPhone and Android, which make up for a sizeable proportion of smartphone users, use a WebKit based browser, so if your site works in Safari or Google Chrome on the desktop, then it should be fine.

But just because it renders the same way on a phone as a desktop, does not mean that using the site on a phone will be a good experience. Thankfully, if you’re a WordPress user, you can improve your mobile experience quite easily.

First of all, you’re going to need a plugin which provides a mobile theme to your users. There are many to choose from; I went for WPtouch which is used by quite a few sites, has plenty of features and is free for personal use; a professional edition exists with more features should you wish to buy it and support the authors, but the free version should do for most people.

Once installed and activated, the plugin will detect whether visitors are using a mobile web browser (as opposed to a desktop browser) and serve up an alternative version of your site, such as in the screenshot above. With bigger, prominent text, it’s easier to read, and browse using a touchscreen. The plugin allows some customisation, but essentially it’ll make your site look like an iPhone app. You can also instruct WPtouch to show mobile-optimised Google Adsense adverts – you’ll need to enable Adsense for Mobile Content in your Adsense control panel and then enter your Adsense ID in the WPtouch settings. Seeing as very few mobile users will have ad blocking, it’s possible that your ads will get more views this way.

Installing the plugin is a good start but you can go further. The iPhone supports the adding of sites as ‘web apps’ – a web site can be pinned to your apps screen and launched like an app. This harks back to the original iPhone from 2007, which was before Apple allowed third-party applications to be installed, but the functionality still exists, and may even take off again as Apple exerts control over the iOS App Store.

Anyhow, when a visitor adds your site as a web app, it needs an icon. By default, it includes a miniature screenshot of your page, but you can specify something nicer. The simplest way to do it is create at 57×57 pixel image, call it apple-touch-icon.png and place it in the root folder of your web site; alternatively, call it apple-touch-icon-precomposed.png if you don’t want iOS to add the shiny effect to it. But you can go a bit further, and specify special icons for the iPhone 4 and iPad, which both have a higher dots-per-inch (dpi) than the earlier iPhones and can show more detailed icons. Full information is available in the Safari Developer Library – as well as information about showing a splash screen and hiding the Safari address bar when iPhone users use your blog as a web app.

There’s one further thing to do if you’re running a caching plugin, like WP-SuperCache or WP-QuickCache. By default, even with WPtouch installed, these caching plugins will serve up a cached copy of the ‘desktop’ theme to your mobile phone visitors, rather than WPtouch’s mobile theme. You’ll need to edit your cache plugin’s settings to ignore the user agents of mobile browsers; WPtouch gives you a list to copy and paste in.

Once you’re done, you should have a theme that mobile users can use effectively without degrading the experience of those using a desktop browser.

Comments are closed.