Turning off responsive web design

I’ve long been a fan of responsive web design (here’s my July 2010 Mobile-friendly: The mobile web optimization guide) but recently I’ve been musing on whether mobile browsers should have a mechanism to turn it off – that is, pretend to have a really wide screen so width-based media queries don’t kick in, thereby allowing people to see the “desktop site”.

Chrome for Android has a feature called “Request desktop site” but this only changes the User Agent string (dropping “Android” and device name). Opera Mobile has the facility to change UA string from mobile to desktop (Settings, Advanced). These are useful for old-skool sites that do UA-sniffing and serve cut-down sites to mobile browsers. Neither of these “undo” Media Query-based layout changes (I tested them on the new A Book Apart site).

But why would anyone want to?

My reason for wondering this is watching my dad use his Xmas Android phone and seeing his puzzlement that some sites look completely different on that device. Non-RWD sites loaded the layout he was familiar with – the desktop layout – which meant he could verify he was on the right site, he knew where in the layout the content he wanted was, and then scroll and zoom to it. When a site looked radically different, he’d check the URL bar to ensure that he’d typed in the right address. In short, he found RWD to be confusing and it meant he didn’t trust the site – no way would he buy anything from these sites.

Not everyone thinks like this. In reponse to my musings on Twitter, Orde Saunders said “We saw 6% growth in mobile traffic over and above underlying mobile increase trend after RWD was rolled out.”

Aaron Mentele said “Three weeks without, three weeks with (typical responsive patterns) iPhone/iPod transactions: up 112.50%. Android transactions: up 333.33% (This is an ecommerce store.)” and promised to blog some real numbers soon.

There’s also the philosophical niggle that we force RWD onto users. Some may wish to scroll and zoom around a facsimile of the site they’re used to on desktop, but we decide they shouldn’t be able to.

I’m not the first to wonder about this. A couple of years ago Adrian Roselli coded a “view desktop site” link that a client requested, and wrote about Letting Mobile Users See Desktop View of RWD Site. Chris Coyier wrote Opt-Out Responsive Design? last September.

If people really want to do this, should developers deal with it or should it be a browser setting? Perhaps it’s simply too niche; Roger Johansson said “I’ve implemented a switch on some sites (sets a cookie, removes meta viewport and mq.css) … The stats I’ve seen show that very, very few use the switch.”

55 Responses to “ Turning off responsive web design ”

Comment by MisterHartzenberg

Bruse wrote: My reason for wondering this is watching my dad use his Xmas Android phone and seeing his puzzlement that some sites look completely different on that device. Non-RWD sites loaded the layout he was familiar with – the desktop layout – which meant he could verify he was on the right site, he knew where in the layout the content he wanted was, and then scroll and zoom to it. When a site looked radically different, he’d check the URL bar to ensure that he’d typed in the right address. In short, he found RWD to be confusing and it meant he didn’t trust the site – no way would he buy anything from these sites.

—————————————————

I doubt just having a switch option would solve the original user problem. As it seems that Bruce’s dad lost confidence straight away due to the different layout, so he didn’t trust the site or links within because he most likely didn’t understand that they are the same site with different layouts.

Perhaps the best way to solve this problem for these users would be to have a pop-up/overlay on first visit that would only show on mobile. To explain simply that they are in a mobile view, so it may look different, then have a prominent call to action to see desktop / full etc view.

This would also cut down on switch search time for the more advanced users who prefer to use desktop views.

However I’d suggest a switch link to be included in the footer for redundancy and those who just can’t decide. 🙂

Leave a Reply

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> . To display code, manually escape it.