At IWMW12 I facilitated a workshop session on ‘Mobilising WordPress‘ with Mark Power. The point we wanted to make was that while WordPress natively offers a pretty good mobile experience, a few tweaks can make it better for both publishers and readers. Approaches we considered included: Doing nothing, using plugins, adding a separate mobile theme, changing to a responsive theme and ‘responsifying’ your current theme. These are arranged in order of increasing difficulty, but hard work can pay off in terms of the control you have over the end result. So let’s consider each of these and some resources and tools that can make them easier.
1. Do Nothing
Given the reputation of WordPress as a well-designed and frequently-updated system, it is no surprise that it has already adopted some features to make it more mobile-friendly. The latest incarnation of the default theme TwentyEleven is responsive and recent updates have improved the responsiveness of the dashboard. However, for those using custom themes or those developed a while back, this may not be the case. Many sites, including ‘top sites’ have done little to address mobile. They still work, but the experience isn’t as good as it could be, typically requiring a fair bit of zooming, scrolling and nifty finger work.
2. Use Plugins
A key design concept for WordPress is to keep the core product lean and encourage users to add any additional functionality required through plugins. There are lots of them to choose from in most categories mobile is no exception. Here are a few you might want to consider.
WP-touch is a popular mobile plugin that gives your site a slick ‘app like’ look and feel on smartphones. It is simple to use, has robust device detection, doesn’t affect your desktop theme and gives you a pretty impressive range of options for customisation. Not bad at all for free, but there’s also a pro version of WP touch that offers more features if you need them.
Simple as this solution is, a possible downside to using a plugin to handle your design choices is the risk of living up to the strapline of “Just Another WordPress Site” as most sites using them appear very similar and very different from the crafted desktop design. Plugins also need more admin such as updates, have the potential to slow your site and may have compatibility issues with other plugins on your site.
WordPress Mobile Theme Pack
The WordPress Mobile Theme Pack lets you serve different themes to different devices. It ships with some basic mobile themes, which you can customise to an extent, or you can simply use the plugin to point to your own custom mobile theme. It also offers extra widgets, device adaptation and can apply the mobile theme to the dashboard as well as the front end.
If you want more control over what your plugin does to your site, Mobble might be the answer. This lets you use simple conditional statements such as ‘if (is_ipad())’ and ‘if (!is_tablet())’. Using combinations of these statements, you can do some sophisticated switching between classes of devices and specific devices. For example, it could be used to offer a different navigation menu for mobile devices or serve smaller images optimised for smaller screens, rather than simply resized for display.
onSwipe is specifically for touch screen interfaces, such as tablets and smartphones. It creates a magazine-like experience similar to that of Flipboard. It is certainly simple to apply and offers an impressive visual presentation of your content, but as with WPTouch, you are tied to a limited set of choices over design that may not match with your sites appearance and experience across devices.
3. Get a mobile theme
There are a range of themes designed specifically for mobile devices. You can see these in use on sites hosted on WordPress.com. This presents a cleaner, simplified version of the site intended for the smaller screen. A mobile theme is used with device detection, such as that offered through the mobile theme pack or mobble plugins discussed above, to serve a different theme to mobile devices. Again, this is fairly simple to implement, but may result in your site looking very different on mobile devices compared to the desktop. That’s where some theme customisation might be required and if you’re going that far, it might be worth considering a responsive theme as discussed below.
4. Change to a responsive theme
As with plugins, there is a huge range of themes to choose from to customise your site and an increasing range of these themes are responsive. The default WordPress theme TwentyEleven is now responsive, but there are plenty of responsive themes available. These differ greatly in design and how they implement responsiveness, so they are worth testing on a development server or using the live preview feature before using on a production site. That also gives you the chance to do some theme hacking if you like that kind of thing.
Mobile emulators for testing responsiveness
When testing responsive designs, there are a range of browser-based emulators that can make this easier, such as Ripple extension for Chrome, the Web developer extension (now with View Responsive Layouts), screenfly or a responsive design bookmarklet as well as a range of more sophisticated developer emulators for download.
5. Responsify your own theme
This approach probably involves the most work, but will give you a lot of control and flexibility over your design across all platforms and devices. There’s nothing magic about responsive web design in WordPress. It’s simply a case of applying some established web design techniques to the framework of your WordPress theme. That might involve a bit of digging around your theme, adding some media queries to your stylesheet(s) and perhaps some conditional statements to serve different content to different devices. If your not sure where to start with this, these articles on Converting WordPress to Be Mobile-Friendly and Five top tips for building responsive WordPress sites and WordPress goes mobile might help.
[edit: after I’d written this, Smashing Mag posted Create A Responsive, Mobile-First WordPress Theme]
Does my backend look big in this?
As well as the frontend, making WordPress more usable from mobile devices means thinking about the backend (dashboard) too. WordPress have started to improve the dashboard design with this in mind and recent updates have made it more usable through a mobile browser. So the screenshot on the right shows the difference in the dashboard views in a mobile browser following the last significant WordPress update. While the dashboard has become cleaner and easier to work with, it still isn’t great for all but the most basic of tasks. However, it seems this might be just a temporary design fix and there are plans to apply much more thought to tackling this issue in the future by radically simplifying WordPress.
In the meantime, WordPress provide official native mobile apps for many platforms and devices. They help with the basics of writing and editing posts and moderating comments, but have their limitations. Again, this may change with a new version of the WordPress XML-RPC API that will allow these apps to have more functionality and encourage more 3rd party apps to be developed. Talking of which, one that is already available that gives a more native WordPress dashboard experience on a tablet (well, iPad) is Blogsy.
Eating my own dogfood
Having talked the talk at the conference, I thought I better put my own house in order and try this responsive stuff here.
I started with the 1140 Fluid Starkers WordPress Theme, which provides a ‘naked’ unstyled responsive theme to build on. Using this framework, I went from using several plugins to give a nicer, but very different experiences across devices, to a single theme without any mobile plugins being required.
The result is by no means perfect or even particularly innovative, but it was relatively straightforward to make what I thought would be a much more difficult and time-consuming change given the old theme I was using and the level of customisation I’d done. As always when trying something new with WordPress it was pleasing to find lots of resources out there to make it easier.
Help me test it out and let me know how to improve it and if you try something similar, good luck and let me know how you get on.