Web traffic from mobiles is estimated to be growing eight times faster than that from UK PCs (Deloitte, 2009). Gartner predicts that by 2013, mobiles rather than PCs will be the most common web access devices. As this trend continues, the challenges for companies wishing to make their sites not only functional but also usable and even aesthetically pleasing for users of mobile devices becomes ever more pressing.

So here’s one good piece of news for those whose blog or website, like the Discovery Blog, is based on WordPress: a plugin that does the job simply and well.

WordPress is a freeware that allows its users to produce professional results whilst still retaining administrative control of all a web page’s features. WordPress also has additional features which can enable users to optimize their web page for viewing on mobile browsers.

Semantico has helped many clients to get the best out of their e-Books and online journals; ensuring that they are easy to discover, easy to navigate and suited to the browsers on which they are being viewed. When we decided to optimise our own Discovery Blog for viewing on smart phones we saw this as an ideal opportunity to experience personally some of the issues that delivering optimized content for mobile users presents to publishers.

Luckily, the experience was close to painless, thanks to the WPTouch plug-in. This new plug-in means that we can now offer a mobile browser-friendly version of our blog which is smaller, cleaner and faster to load (if you’re reading this post on one of the smartphones supported by the plug-in you’ll be able to see what we mean very clearly!).

The way that the WPTouch plug-in works is that it replaces the clunky loading of multiple CSS (Cascading Styling Sheet), Javascript and image files by creating a streamlined iPhone app-like version of the website. In effect it detects the user agents of the mobile devices and delivers its custom theme to those visitors only, delivering a lightweight version of your site but still with all the standard WordPress website features.

This alternative version of the site is only visible to certain mobile browsers, and if the user wishes to do so they can still choose to revert back to the regular version of the site. The browsers and devices which this WPTouch plugin supports by default are:

• Android
• Aspen
• Blackberry 9500
• Blackberry 9530
• Cupcake
• Dream
• Incognito
• iPhone
• iPod Touch
• Opera Mini
• Webmate
• WebOS

it is also possible to add custom user-agents and extend support to other mobile browsers as well. For example, we have added support for ‘Dolfin’ browsers like the ones used in Samsung phones. This ensures that all our visitors who are using a mobile device to access our website can see exactly the same version without experiencing rendering or layout issues.

The transition from our theme to the new one was smooth, although we did have to slightly modify the plug-in’s CSS. We had to ensure that there was adequate spacing around the images included in the posts to avoid text-wrapping issues. We also increased the default font size a bit to make the text easier to read without having to zoom in.

The WPTouch plug-in allows you to add your own Google Analytics code into its Administrative panel, maintaining the integrity of usage statistics from the site when it is being viewed on computers and on mobile devices. We believe that it is an essential tool for all WordPress-powered websites and will save you the trouble of having to redesign your website to accommodate mobile browsers.

Implementing this plug-in did involve some decisions about what the priorities were when our blog is viewed on a mobile device For instance, some of the functionality which required additional plug-ins, such as the side-bar which enables users to view all the authors of the blog, has been lost; however the trade off is that you are left with:

• An incredibly fast-to-load website (our home page is about 8KBs big!)
• A menu which allows you to easily jump to different sections of the website
• A cleaner, more streamlined design
• An integrated search facility
• The reassurance that you don’t have to worry about display issues on mobile browsers

The Discovery Blog has retained its core functionality and features whilst catering for the needs of users of smartphones and other web-enabled phones.

This exercise was a particularly interesting and useful one for Semantico. Not only did it benefit us to provide an optimized version of our Discovery Blog to our mobile users but it also taught us a lot about the difficult decisions which publishers face when providing content to Smartphone users. Nobody wants to sacrifice content, but ultimately this is one of the major issues when optimizing web content for mobile browsers which as yet do not support Flash.

This article by Alex Blackman, our brilliant marketing intern, is posted with thanks to Nik Afentoulis,  Semantico’s QA assistant / junior developer and wordpress guru.