July 17, 2012 – By Dale Mugford
When it comes to mobile web options and WordPress, there’s new discussion in the web development community about the merits of responsive design, while less talk of alternate options like WPtouch & WPtouch Pro. This post explores some of the key differences between the two approaches.
In a recent blog post, 5 Reasons Why Responsive Design Is Not Worth It, Tom Ewer, of Manage WP examines the shortcomings of responsive design and laments the lack of arguments against it on the Internet. Though I’ve come across a few other voices here and there that speak less favourably of responsive design, these comments seem somewhat lost in a sea of content being produced by its supporters. This is not to say that Responsive Design is not a valuable approach to mobile website design— I’m speaking here about the lack of discussion regarding alternate approaches.
While many articles appear to acknowledge there’s no single mobile strategy that works in all cases, the options presented suggest limited choices. Responsive Design is often presented as the only option with one alternative, to ‘do nothing’. This recent article by .net Magazine for example, Big question: where do you stand on mobile content strategy? presents 9 points of view from various experts who focus on either employing a Responsive Design strategy, or leaving a site as is.
But there are alternative mobile web strategies like WPtouch (an option which has been around long before “Responsive Design” as a term was coined). Specifically with WordPress, Responsive Design often is not the best choice, and we’ll discuss these reasons further later in the article, but first a primer.
What Is Responsive Design
Google defines Responsive Design as follows:
“Responsive web design is a technique to build web pages that alter how they look using CSS3 media queries. That is, there is one HTML code for the page regardless of the device accessing it, but its presentation changes using CSS media queries to specify which CSS rules apply for the browser displaying the page.” (Source)
Responsive Design is a client-side solution, meaning that the methods it employs to present a webpage on a mobile device is handled in code that the mobile device itself has to sort out and render.
What Is Different About WPtouch And How It Presents Mobile Pages?
WPtouch is a server-side solution, meaning that we use user-agent detection first to determine what we’ll send to the device, starting with not sending the desktop theme. Instead, we serve the mobile theme you choose and setup in the WPtouch admin panel. This way we can specify exactly what should/should not be sent to the mobile device, instead of requiring code to determine what it should do on a mobile device, requiring the mobile device itself to sort out all that code.
WPtouch and Responsive Design compared
Less complicated: Responsive design done well requires a broader than average knowledge of interaction techniques, programming and design skills. Designers today are still learning to implement solutions effectively and efficiently and practices are changing all the time. At best many responsive designs today deliver a compromised layout that effectively reformats most, but usually not all site content.
WPtouch works by serving mobile devices a different theme than the desktop theme you specify for your WordPress website. As a result it does not erroneously send scripts, images and other website files to mobile devices even if they aren’t needed to render the webpage. Typically WPtouch-served mobile pages are a fraction of the size of a responsive web page.
The main reason for this is that responsive design is a client-side mobile web strategy, while WPtouch is a server-side web strategy. What that means is that with Responsive Design (client-side) all content, files, images, etc., are sent to the mobile device and extra CSS determines the layout of the webpage and what will be shown/hidden on the mobile device. With WPtouch (server-side) we use user-agent detection first to determine what we’ll send to the device, starting with not sending the desktop theme and instead serving the mobile theme you choose and setup in the WPtouch admin panel. This way we can specify exactly what should/should not be sent to the mobile device, instead of requiring the code to determine what to do on a mobile device being sent to it and requiring the mobile device itself to sort out all that code.
Faster development: An effective responsive design can take many, many months to plan and implement -– and that’s provided you have a compatible system. A WPtouch install setup can take just minutes, and custom theming with WPtouch Pro can still be done in a matter of days/weeks.
Less expensive: Designers with an advanced skill set along with all those months of planning and implementation can easily add up to a hefty bill for your responsive design. WPtouch is free, while WPtouch Pro starts at just $49 for a professional, high-quality mobile web presence.
Ability to update and adjust how content gets displayed on mobile: Once your responsive design is in place what happens as you add/change your website? How will you implement changes in your plugins, theme layout and design down the road? Responsive design requires awareness of all these things and the willingness to continue to maintain the multi-platofrm approach on an on-going basis. With WPtouch, you can easily adjust your desktop theme appearance, add/remove plugins, and change site settings without affecting your mobile theme.
Summary and moving forward
There are different options with entirely different approaches for delivering mobile content available today. For example, in addition to WPtouch’s method, alternative services like Mobify create a mobile edition of your desktop site on-the-fly using a proxy service which filters out desktop elements, inserts mobile elements and creates a ‘hybrid’ site which delivers desktop content tailored for mobile visitors. Mobify is employed by many big-name companies to deliver their mobile sites, including mobile e-commerce shops.
Responsive Design is a worthy (and perhaps preferred) solution for those who have available resources, time, and the willingness to dedicate their web strategy in delivering a cohesive design and do it properly. One alternate option to consider which may allow you to take simpler, more flexible steps in implementing your mobile content strategy is WPtouch. As we outlined in an earlier blog post, WPtouch was created as a tool to facilitate the delivery of web content across multiple devices and was built for where the mobile web is going, not where it is or where it has been.
One of the main reasons we believe that WPtouch remains the leading solution for delivering a mobile version for your WordPress website is because it’s WordPress-centric. WPtouch takes advantage of and leverages the best parts about WordPress as a publishing platform, delivering an integrated solution to maximize what it can do while keeping things simple, fast and fun. We hope to continue expanding WPtouch’s capabilities in new updates, and we’re really excited about what we have planned for its future.
A few additional articles that take a critical look at Responsive Design:
- Is Responsive Design Better for the End User?, WPManage
- 5 Reasons Responsive Web Design May Not Be an Answer for B2B SEO Strategy, KoMarketing
- What’s next for mobile now that adaptive design has failed?, Venture Beat