wptouch logo

WPtouch

Mobile Suite for WordPress

July 17, 2012 – By Dale Mugford

Weighing Options: WPtouch, Responsive Design and Your Mobile Strategy

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:

  1. Jeff

    Let’s not forget that the responsive design fad is a bit crazy as most ad services don’t support it. Google AdSense is as flexible as a brick wall. Wish they made responsive ads!

    July 17, 2012

  2. Wordpress Responsive Real Estate site design

    [...] Weighing Options: WPTouch, Responsive Design and Your Mobile Strategy [...]

    July 19, 2012

  3. James

    I would pick WPtouch over responsive design any day of the week! My theme has a responsive layout but it is not half as impressive as WPtouch Pro. Best plugin I have installed!

    July 20, 2012

  4. Responsive WordPress Websites & IDX For Real Estate Agents | Verity Consulting

    [...] Weighing Options: WPTouch, Responsive Design and Your Mobile Strategy [...]

    July 20, 2012

  5. Mackay

    Very impressive solution.

    July 21, 2012

  6. Dan Frydman

    I think both have a place – responsive is great for sites where the information and functionality provided in the desktop need to be the same no matter what device. As a user of both I recognise that WPTouch Pro is a serious plugin and is very flexible when it comes to offering some quick wins on a site that’s not been built with mobiles in mind.

    However if you can build in a mobile first approach from the start – thinking about where navigation is featured and how deep navigation goes, while preserving most or all of the site functions – then you end up with less frustrated users.

    WPTouch Pro is cheap and it does a job.

    Responsive – done well – doesn’t have to cost a great deal more and future proofs a site to not just mobile but a lot of other devices we’ve not even seen yet.

    July 31, 2012

  7. Dale Mugford

    Some good points. Though I do think this statement “Responsive – done well – doesn’t have to cost a great deal more” is terribly off-base.

    I don’t think any good web development company would throw in a responsive site design for $50.

    July 31, 2012

  8. Wilfried Strecke

    Great article, I was looking out for something like that. Thank you very much!

    August 2, 2012

  9.   Giveaway: Win 1 of 2 WPtouch Pro Plugin Developer Licenses for WordPress! by Web Factory South Africa

    [...] Weighing Options: WPtouch, Responsive Design and Your Mobile Strategy [...]

    August 13, 2012

  10. Giveaway: Win 1 of 2 WPtouch Pro Plugin Developer Licenses for WordPress! | ReeZh DesignReeZh Design

    [...] Weighing Options: WPtouch, Responsive Design and Your Mobile Strategy [...]

    August 15, 2012

  11. Robert Khoo

    I think you’re right about a bespoke design but there are a few good theme framework developers (Genesis – amazing company whom I purchased from) who offer very competitively priced responsive themes, just $25 for those with the framework already installed.

    By the way, I’m a new wptouch pro customer and am just discovering the power of the plugin now. I considered responsive for a while and I think for iPad only, its a very viable option ( especially if you tilt the screen horizontally) as the screen size isn’t that smaller than a netbook. Mobile is where responsive runs into issues as you just end up having to scroll a long way down to fid content.

    August 25, 2012

  12. Dale Mugford

    Great points Robert. We agree— responsive and tablets is very viable, but on mobile there’s both the issue of scrolling/too much content + downloading all the desktop files (slow experiences).

    August 29, 2012

  13. geoffmoss

    Hmm. I’m a WPtouch Pro owner, and very much see its benefits in a lot of circumstances. However this post to my mind is heavily biased by your desire to protect your product & interests (& of course is a landing page for the search keyword phrase ‘wptouch responsive’).

    To suggest responsive is a burdensome client-side practice which delivers all content to a mobile device regardless simply isn’t true. Responsive can & does often differentiate before delivering content to the device, that’s half the point. Media queries can completely change & shape what is served to different devices, ensuring a faster & more fluid experience on each device. Potentially a much more fine-tuned experience than the more ‘one size fits all’ of WPtouch usually I might add… unless WPtouch is very much configured, which is where I again think you’re muddying the waters in favour of your own product here: WPtouch can require a lot of configuration so painting responsive as a really complicated option is wilful blindness. Not only can it take a lot of configuration to get the best out of the range of different screen sizes with WPtouch but it does leave one not a million miles from running a parallel mobile site. Yes it handles content automatically, but any tweaks & amendments to the desktop pages have to be double-checked in their mobile format to check (& often reconfigure) the WPtouch mobile experience.

    Which brings me on to my last point. I don’t think there’s anything closed in the debate of the future direction of design with mobile, indeed I’ve seen WPtouch explicitly explored as one of the options available. That .net article for example, just because your product isn’t named doesn’t mean this kind of approach isn’t explored. The very first comment in fact, from Jeff Croft, talks about adaptive techniques & how they are often the best solution in a given situation.

    WPtouch is the best solution in many situations, for my mind most often for sites which use WordPress in a more primarily ‘blog’ way. If you’re truly looking for an open & honest discussion about approaches to mobile design though try not to let any bias to defend your product’s position creep through hey. Oh, and personally I’d be putting a lot of thought into how a responsive approach of design & content delivery might be more integrated into the WPtouch product (which is without a doubt very good, & uniquely positioned to capitalise on any sector movement towards responsive in my opinion!)

    September 15, 2012

  14. Dale Mugford

    Thanks for taking the time to write such a thoughtful response – I wanted to speak to a couple of points in your comment.

    Firstly, media queries are still client-side operations. They require all of the assets to be delivered to the device first. Next those media queries (whether in CSS or JavaScript) are parsed in the browser on the device, determining what should be shown or hidden and what additional JavaScript functions should be executed etc.

    This is one of the main drawbacks about responsive design – that you actually have to ship more code and more assets down to the device, not less – which in mobile web design equates to speed, and we argue this should be the most important factor when setting out to create a mobile website.

    It’s fairly easy to see that we have a vested interest in opposing responsive design as a method by which to develop mobile websites. Any time in any place that we speak on the issue it’s going to be clear to listeners that we have a very good reason for opposing responsive design, that we create a product that directly competes with it.

    So with that said, it’s very difficult for us to speak about the issue in any other manner then to simply disclose that we create a product that competes with responsive design, and why we think it’s not the best option. It’s less about protecting our interests though, and more about informing customers that a current trend in mobile development isn’t necessarily the best option for them, just because it has development buzz.

    I can’t really talk about future plans for our products, and how they will be developed, or what they might include. But I will say this – we’re always looking at improving WPtouch Pro, what it’s capable of, how it does what it does, and what it offers customers. If there’s a better way to do something on mobile, we want to include it in our product.

    We realize that in some circumstances, development time with our product can’t be called ‘short’. Though in our experience working with our customers, they’ve frequently commented on how efficient the setup and development of their mobile website has been by using our product. So we’re using their feedback as our yardstick.

    What our article hopefully highlights (and this is the main point that we wish to get across) is that there are alternative (and we’d argue more appropriate) methods to developing mobile websites – particularly with WordPress, due to its plug-in and theme architecture.

    I hope this response addresses some of your concerns. These kinds of questions, debates and discussions around development are always intriguing, and exciting. We love to see people who care passionately about creating for the web talk about their passion, even if it’s in opposition to what we do.

    September 17, 2012

  15. Ngan

    Bias? Yes.

    But I have to agree, WPtouch is a better alternative. Responsive design is neither for mobile nor desktop. Because of ‘responsive’ design, some elements need to be sacrificed, such as a large header image.

    October 3, 2012

  16. geoffmoss

    Hi Dale,

    Fair enough points taken & all reasonable. I still have to dispute the idea that Responsive as a concept is a) inherently client-side (though I accept in the most part it currently is & is tied to client-side) b) necessarily a cumbersome one. Server-side can be used to deliver assets, and can deliver assets most likely to cause data size issues (such as images). As I’m sure you know ‘responsive images’ isn’t just about the image dimensions. Also good client-side code would be lean & mean anyway (& elements of it most likely already desirable to produce a compelling user experience on mobile devices).

    But yes, it’s all about debate as the technology & techniques develop hey :)

    October 5, 2012

  17. Artem

    The biggest problem for me with continuing to use WPTouch is the lack of caching on mobile. Our mobile traffic is approaching 33%, and none of it is cached. I used to use WP-Supercache, then moved to W3TC when I went multi-webserver. However, all mobile requests still have to be exempt.

    With responsive design, the same cached page would be served to all users, greatly simplifying and speeding up the backend. Any feedback in this area?

    November 6, 2012

  18. WPtouch, Responsive Design and Your Mobile – BraveNewCode | Responsive Web Design

    [...] http://www.bravenewcode.com/2012/07/weighing-options-wptouch-responsive-design-and-your-mobile-strat… [...]

    November 10, 2012

Comments Are Closed