WordPress goes mobile – 2012 update

On Saturday 14 July 2012, I gave a talk at WordCamp Edinburgh on mobile WordPress development. This talk was a follow-up to my presentation the previous year, and an update on what has been happening in the world of mobile and responsive design in the last year.

Note: I’ve now added links, screenshots and resources to this post, so if you’ve been here before, please read again!

It’s safe to say that mobile web development has taken off in the last year, and responsive design is becoming mainstream. Indeed, the issues we are now facing when designing for mobile aren’t about layout at all – they’re about performance and user experience. In this talk I outlined some of the issues facing us right now and highlighted some sites which act as examples of different practices in mobile web design and development. I added to this a WordPress slant, both because of the occasion and also in recognition of the fact that using a CMS like WordPress can make the whole process of mobile development much easier and more interesting.

I will post my slides on Slideshare but thought it would be more useful to post my notes from the presentation here, along with some screenshots and links to some of the sites I highlighted.

What’s been happening in the last year?

Two main things:

Mobile is huge. It’s been written about (almost to death) in the web design & development press, and just about every article predicting the future of web design in 2012 had mobile first or second in the list. Some well respected sites, such as Smashing Magazine, have gone responsive, and other sites are moving from separate mobile sites to responsive ones. Smashing has also introduced a new section on mobile development, which I’ve been writing for.

WordPress continues to grow, and along with it an interest in using WordPress to build mobile sites. There’s a recognition that the use of plugins, themes, conditional php and multiple image versions can help us solve some of the problems we’re facing in mobile development.

Mobile isn’t just about responsive design anymore

The conversation about mobile development has gone past the simple use of media queries and is now focusing on other issues such as:

content strategy
user experience
mobile performance
device-specific content
web apps

I’ll be looking at some of these issues in this article.

Content strategy

Content that’s most effective on mobile sites might be different in some cases from what’s needed on a desktop site – BUT it’s important not to hide content from mobile users. The way I tend to work round this is by using a different structure for mobile, which effectively means different navigation. WordPress makes this easier – you can set up more than one menu and use PHP or CSS to show a different version to different devices, as shown in my article on mobile navigation for Smashing Magazine.

Often a review of content for mobile devices will lead to a review of desktop content – many mobile sites tend to be stripped down, simpler and easier to interact with, such as the Facebook site shown below. I would argue that Facebook’s mobile site is easier to use than the desktop site with all the content shouting at you – and with Facebook’s mobile user base growing, it seems I’m not alone.

User experience

Mobile user experience is a really interesting area. It’s easy to make assumptions about what mobile users expect and how they interact with a site, but some likely themes will be:

ergonomics – particularly on touch devices
navigation – giving access to content without dominating the layout, or using buttons to create a more app-like navigation
scrolling – when the user gets to the bottom of the page, he/she will have scrolled down a long way and may not want to scroll back up again
interactions – a mobile interface may react differently – for example it won’t have hover states. Also think about forms and how they work on mobile.

Ergonomics

Some examples are shown in the screengrabs below.

Carborellis uses select boxes on mobile
The
Texas Paediatric Specialty Services site uses a button-like navigation which is similar to its desktop navigation but laid out easily – easy to tap but dominates the screen meaning the us has to scroll down to access any content.

The UC San Diego site places buttons side by side, meaning they’re easy to tap but don’t dominate the screen so you can still see some content.

The Carborellis site uses select boxes so that when a user interacts with its forms the phone’s native functionality is accessed, which is easier to interact with than a form field in the page layout.

Navigation

There are many different approaches to optimising mobile navigation. The main considerations are tappability, familiarity and structure.

The Oliver Russell site uses an interesting technique of placing links on their side – which looks great but may not be instantly recognisable as Navigation to 100% of users.

The Compass Design site (yes, this one!) employs a menu link styled to look like the desktop navigation – when the user clicks this they are taken to the main menu which is at the bottom of the page.

The Andrew Newey site uses a simple list of links beneath the main image – which are large enough to tap easily

The Farnham Maltings site has a button in the top right – when the user taps this, the menu appears. This is done using pure CSS.

Positioning content

Responsive pages are often very long when viewed on mobile devices, so the user will have scrolled down a long way when he/she reaches the bottom of the page. It’s important to provide something to tap on at the bottom of the page to reduce bounce rate. Many sites have links in their footer, although these are sometimes a little small for ease of tapping. Another thing to consider is having a calls to action in various places – at the top and the bottom of the page maybe.

The Smashing Magazine site uses footer links – lots of them, although they are a little small for tapping.

The site for 137 Pillars House Hotel has a booking form at the bottom of each page, giving users something to do after consuming information.

Carborelli's mobile Call to Action button The Compass Design site (this one!) places its main menu at the bottom of the page.

The Carborelli’s site has a call to action button near the top of the page which is always visible and prominent when the site is loaded on mobile devices.

Interactions and forms

Issues to consider here include:

Hover states – don’t rely on them
Make sure something happens when the user taps
Ensure forms are responsive – if you use Gravity Forms this will work ‘out of the box’ as the plugin uses a fluid layout.

Performance and images

Mobile performance isn’t perhaps as crucial as it used to be, with so many people on fast data connections and many people using wifi on their phones to browse from the comfort of the sofa. But it makes sense to make sites as efficient as possible on all devices, including mobile. This will include:

limiting the number of http requests
coding for speed (considering the Mobile First approach)
reducing the size of files sent to mobile devices, in particular images as they don’t need to be as big on small screens.

There is still a debate going on around responsive images and talk of the W3C adopting a new standard, but that is far from being resolved so in the meantime we can use WordPress to help us deliver responsive images. The two main solutions are:

Using featured images, combined with mobile responsive tags coded into the theme files, as documented in my article for Smashing Magazine. The What’s A Mayor For? site uses this technique, and my responsive images site demonstrates how to do it.
Using a plugin such as WP Responsive Images to automatically deliver different image files to devices with smaller screens. This doesn’t rely on UA sniffing, manual coding or use of featured images so has huge potential. The plugin ~~hasn’t been released to the plugin repository yet but~~ has now been uploaded to the plugin repository and is also documented on his blog by Stuart Bates, who developed it.

Device-specific content

This takes us back to the issue of content strategy. Using WordPress makes it far easier to deliver different content to different devices without having to manage two sets of content. This can be done by:

Using alternative themes which call different content or different metadata.
Using conditional tags within the theme files to send different content to different devices.
Using CSS to hide content according to screen width, with the use of media queries.

The Centenary Lounge site uses different navigation on different devices using the Mobble plugin.

The 24-7 Locksmiths site delivers a different page to mobiles, with one simple message – tap here to call a local locksmith!

Web Apps

I believe that web apps are set to be the next big thing. WordPress makes developing a web app much easier:

mobile themes can be used to create a web app experience
there are plugins that make iteasier to access phone capabilities such as geolocation
other plugins such as BuddyPress mean you can build a mobile social app.

…and many more tricks, hacks and methods!

Carborellis web app The Carborellis site uses a mobile theme to deliver its web app to mobile users, with a responsive theme as a backup so users on mobiles wanting to access the main site still get a good experience.

The Lothian Buses web app uses geolocation to help you get around by bus and gives directions to the nearest bus stop, as well as having an app-like interface.

When you visit many Google sites such as News and Maps on a mobile device, you’re presented with a prompt to save it your home screen, making the experience very similar to a native app.

Summary

Mobile and responsive development have really moved on since the last year, and there are some exciting developments.

Key points include:

Mobile is getting very big
WordPress makes mobile/responsive development easier
Mobile isn’t just about responsive design anymore
The challenges are around performance and UX
There are big possibilities with web apps