Compared to designing a whole new mobile site, installing a mobile WordPress plugin is simple, and it did a good enough job for most sites and most phones…in 2008. Actually, for basic blogs, the standard mobile themes that come with plugins like WP Mobile Detector or Wapple Architect still do a perfectly good job, though they tend to lack branding elements. The popular WPTouch gives you something that looks like an iPhone app if you have the patience to configure it, and OnSwipe (formerly PadPressed) generates a tablet-oriented interface, though in fact an iPad displays most websites just fine as they are.
Using a plugin was (and is) appealing mainly because it’s easy and most of the mobile plugins are free. The experience you give your mobile visitors may not be ideal, but at least your site is accessible to the increasing numbers of people using their phones—or rather, those handheld computers that happen to also make cellular calls—to surf the Web. Naturally, however, anyone who could get a mobile site that looked like the desktop site without having to pay extra for it would want to do so.
That’s where responsive design comes in. With a little CSS magic, you (or your theme designer) can create a website that rearranges its columns and resizes its images to suit any screen its being viewed on. (The design “responds” to the device viewing it.) The first theme I remember seeing that could do this was the Yoko theme. Then WordPress 3.2 came out and with it the new responsive default theme, Twenty Eleven. Shortly thereafter I attended Sara Cannon’s session on responsive design at WordCamp SF 2011.
In principle, responsive design seemed pretty straightforward, but I didn’t figure I’d be ready to go from listening to one lecture to creating a theme from scratch. There was no need for that, though, thanks to the magic of child themes: I could just create a child theme of Twenty Eleven and have the responsiveness taken care of, and that’s what I did, very shortly thereafter. Since I was simultaneously working on a project for a client where I was using a mobile plugin, I had an immediate opportunity to take some comparison screenshots.
The examples above come from a Genesis site using the Lifestyle (blue) child theme, rendered with the WP Mobile Detector plugin. The mobile theme color happens to be close to the blue of the desktop theme, but the display doesn’t look much like the site, and instead of showing the home page content, the mobile site defaults to the blog page.
These are screenshots of a site created as a child theme of Twenty Eleven. I should probably have spent some time tinkering with the way the menu behaved in the iPhone layout, but otherwise, you can see that the header image and site colors are preserved, the text is a good readable size, and the search box is usable. (The sidebar appears below the main content column in the iPhone layout, and also in the iPad layout, which otherwise looks more like the desktop version.)
We’ll have more on the function problems with the mobile plugin and the Genesis site in the next post, but for now it’s enough to say that the visual difference between the two sites is obvious. Also, of course, you get to run one less plugin.
There are trade-offs with responsive design that might make you consider creating a completely separate stylesheet for smaller screens. For one thing, the on-the-fly resizing of images means that the site eats up just as much bandwidth (those expensive data plans!) as the desktop site would. For another, designing elements to stretch and stack means that you can’t engage in pixel-perfect positioning of your elements. That’s going to make certain really dramatic designs impossible.
In many cases, however, the trade-offs will be worth it, and new responsive themes for WordPress (both free and premium) appear every day.