Last month I had the opportunity to present at WordCamp Toronto Developers. I spoke about principles and guidelines to building successful mobile websites and spent a fair bit of time looking at the three main approaches to building mobile websites:

• using a single pure responsive theme, which adjusts page flow and hides/shows content based on the device’s width;
• building a separate website for mobile devices;
• server-side optimizations, which is the approach WPtouch enables.

Pros and Cons of Responsive Design

A pure responsive approach to building a website can be a very tempting proposition. After all, it promises to address both your desktop and mobile website needs in one go. Some design firms will even argue that this approach saves you money, especially if your website will involve merely customizing a pre-existing responsive theme. Images are even automatically scaled by the browser to fit the screen. And if the content isn’t helpful to mobile visitors? You can just hide it!

But being able to adapt to changing user expectations and behaviours is critical to being successful in the mobile web. Here, responsive themes’ strongest advantage proves to be their Achilles’ heel. Because your mobile display is inextricably linked to your desktop display, adjusting your sites display for the way people use it with different devices is unavoidably more difficult and expensive than if you use a separate set of templates for mobile and desktop visitors, particularly smartphone visitors.

For example, because desktop visitors are rarely looking to visit your physical location, most website templates will list your address in the footer or on a contact page. But what if, like many business owners, you learn that the first piece of information your mobile visitors actually want is your location? Now you need to retrofit your site templates to add a map or your address at the top of your homepage, too.

Because you’re using a pure responsive template, you can’t just add the content, check it on your phone, and be happy with it. You now need to add additional styles and possibly code to hide the map and address on large screens and then re-test your site in all display sizes to make sure your change hasn’t caused problems. And, over time, your pages become peppered with sometimes-hidden content and elements.

Remember those images you used because they look great on your 20-inch monitor? Mobile browsers can only scale them after the full image is downloaded. The pictures and content you hid? Mobile visitors are forced to download those, too. In fact, many websites using a purely responsive technique will send upwards of a megabyte of media and HTML that can’t or won’t be shown on mobile devices. One American presidential candidate’s homepage was a full seven megabytes though all you saw were thumbnails and small photos!

With many people, particularly in North America, having between 100 and 500 MB monthly data plans, any website that sends oversized and unused images and content that is then hidden from view is placing an unfair (and unnecessary) burden on its mobile visitors.

Server Side Optimization

In these situations, solutions involving server-side optimizations (or as Google refers to it, dynamic serving) prove their worth. By detecting that a mobile device is accessing your site before sending anything to the device, templates specifically designed and optimized for devices are used to display your website’s content.

Rather than sending those large images sized to look great on a large monitor, they are re-sized on the server to fit the mobile device, dramatically cutting file sizes. And because only the information that is being displayed is sent, no content needs to be hidden, and no waste data is sent.

The separation of your desktop and mobile templates also means that you can freely make major changes to adapt to mobile visitors’ needs and also experiment with your desktop site, installing plugins, advertising, and rich media, without an impact on your efficient mobile interface.

And what if you already have a website and just want to add mobile support? Solutions such as WPtouch that enable server-side optimization allow you to do that without rebuilding your desktop site. A pure responsive approach means tearing up your templates and starting from scratch.

Still tempted?