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 Orde Saunders

I think the ideal would be that the switch of “view desktop site” in the browser settings changes both the user agent and the viewport – that would cope with both UA switched sites and media query RWD sites.

As an aside, my father suffers from a serious visual impairment and prefers RWD sites since, even on a desktop, they flow to the viewport when zoomed – with a fixed width site he has to pan-and-scan.

Comment by David

Yes.
Give the final choice to users, not developers. Settings should be in our browsers.

And promote HTTP Transparent content negotiation !

Comment by Craig

We shouldn’t force stuff on users. If you have a desktop version available, why not let them use it if they want to? Personally I prefer to zoom and swipe. I’ve noticed lately that RWD sites tend to look “too big” (i.e. naff) on a desktop anyway, so I’m currently not a fan.

Comment by David

Bruce,
Yes. and I agree with him.

Transparent content negotiation is something totally different. It gives control to the client (browser), not to the server.
Look it up.

Comment by Charlie

Actually, I think that what you describes reflects more the approach to responsive design that many web developers have rather than responsive design itself. The term “desktop site” is pretty revealing and is typically nostalgic reflecting a bygone era when user experience could be designed to be homogeneous and we were always looking to squeeze more into 1024 x 768 pixels. Even then we were “punishing our customers” (Michiel Meijer) with labels informing users that our websites were best view on a bigger screen on a more expensive computer (“best viewed with Browser XXL on a Nutrimatic 15…”). But those times have gone, forever.

Responsive web design is as much about developing for TVs and e-readers as tablets and mobile phones. The differences in context and user interfaces are so great that the experience is necessarily different. The idea of progressive enhancement, so eloquently proposed by Luke Wroblewksi in “Mobile First”, is far less well understood but actually describes the problem better. We still tend to design “desktop” sites and work backwards from them to I-Pad (people might talk about tablets but they are thinking about I-Pads) and then mobile phones.

Now that we have an increasing number of responsive libraries the real problem is getting more exposure as the visual design is perhaps the least important part of the whole process. We have to completely rethink our content and service strategies for the range of devices that are out there. And, as Mat Marquis noted at Beyond Tellerrand, we need to come up with something that works for advertisers.

re. content negotiation – I don’t agree with Henri’s conclusions at all. It’s just another example of how industry tends to subvert standards in pursuit of markets. Where’s the best place to discuss this further?

Comment by Matt Smith

A toggle switch suggests that a mobile site isn’t already the full experience? Sounds like what’s really needed is better RWD implementation with an emphasis on content parity.

Comment by Stuart Robson

Although giving an option for ‘desktop’ or ‘mobile’ on a mobile device might be a good idea.
I’d suggest that rwd is more than just a technical happenstance. You’d still need to do user research on your product to see if people actually want a ‘desktop’ site on their mobile, surely?

Also defining a ‘desktop’ or ‘mobile’ site could (possibly) suggest the sites act differently or have different content dependant on their ‘size’ (in pixels). If you’re doing things ‘mobile first’ you would cut down to the core requirements of your site which would fit perfectly on a ‘mobile’ device and scale nicely up to ‘desktop’.

Comment by Cedric

I think the issue is slightly deeper than just having RWD. What is the point of ‘designing’ a UX for mobile/tablet that is broken ? – hence the need for the bailout option.
An example of busted design out of the box is the mobile ebay site, just cannot use it.
and to compound matters is the incessant, desperate pleading to download the mobile app when all you want to do is browse, and you’ll need the intercession of a minor league deity if cookies are disabled.

Comment by Brett Jankord

Bruce, this is a rather interesting question. I believe to add a “view desktop version/request desktop site/view full version” perpetuates the consensual hallucination that the web is split into a “mobile web” and “desktop web”.

On the flip side, adding an option to update the meta viewport tag width attribute to a fixed width, say 1024px, is responsive to users desires.

If your responsive site is built with content parity in mind, switching to this “desktop version” should only adjust the layout to a more familiar version for the user.

It seems from your post and others comments, the issue people are having is that when viewing a website on their phone and not seeing the same layout they are used to seeing on their computer, their trust of the site is diminished.

I don’t believe this issue is solely with responsive websites though. These same people would have issues with a separate mobile site as it would look different on their phone compared to the desktop site they are familiar with.

This may be a generational issue or their may be other causes. Regardless, I have no issue with offering the user an option to set a large default viewport, if this makes the site more familiar to them. My issue is what we call this version. I don’t think “desktop version” is the right wording.

I also believe this may be an edge case, though it would be good to run an A/B test to see how frequently users where opting out of the responsiveness of the site.

Comment by Marc Queralt

I prefer to show an adapted version of the desktop version customized with many of the core functinalities. Swipe and equivalent technologies create a new website that is different and in could annoying for users.

Comment by Marc Drummond

Would it make sense to allow desktop users to have a google that allowed them to use a mobile sized media query? There are plenty of sites where that would result in a better experience.

This feels to me like an edge case.

When color TV first came out, some shows may have used color poorly. Should people have been able to turn off color and still watch black and white?

I would bet that most users, given time, will come to understand some sites are streamlined on phones. And that’s ok. You could do a longitudinal study that tests users over time to see if that is true.

Comment by Bruce

Matt Smith said “A toggle switch suggests that a mobile site isn’t already the full experience? Sounds like what’s really needed is better RWD implementation with an emphasis on content parity.”

you misunderstand me. I’m not saying one is or isn’t the full experience, and the content should be the same on each. I’m musing over whether browsers should be able to offer to undo Media Queries and viewport, so that those who are used to visiting sites on their desktops can be offered their familiar experience.

Comment by Charlie

@Bruce: there should not be such a feature. Users in most browsers have the option of defining their own stylesheets but, let’s be honest, how many people out there really understand viewports? And then there’s the whole problem that viewports are implemented differently across devices cf. the discussion of the I-Pad Mini’s viewport on ALA.

We are in a time of transition, hence the use of the term “desktop site”. This will become increasingly anachronistic as people like your dad become used to surfing with other devices. I suspect that the tablet is likely to become the device of choice within the home, especially once it can become a reliable remote control of televisions via Miracast, etc. Sticking plaster solutions like desktops-site switches, 2x, etc. will be exposed for the poorly thought-out, producer-centric hacks they are.

Comment by Stuart Robson

Bruce, you reply to Matt by saying – “those who are used to visiting sites on their desktops can be offered their familiar experience”. I wonder if those users are used to an ‘app-like’ experience on their mobile device so they would be ‘OK’ with a responsive site. I guess… it depends.

Research, testing ,development … reiterate and refine

Comment by Anthony Williams

Bruce,

You could use a bit of JavaScript to stick a link on your site which added a meta tag to your HEAD element:

All you’d need would be:

<meta name=”viewport” content=”width=1024″ />

If you were using jQuery, you could do this with:

$(“head”).append(‘<meta name=”viewport” content=”width=1024″ />’)

For varying values of width, obviously. I’ll leave that as an exercise for the reader.

Cheers,
Ant

Comment by Mike Bohman

With most responsive websites utilizing a mobile first approach, how would this “switch” even achieve the desktop version of the site since it relies on media queries to even work?

Comment by Stomme poes

“recently I’ve been musing on whether mobile browsers should have a mechanism to turn it off”

Users should have control over a lot of things, whether most users use it or not. Because the web is about users and users should have control, since no developer could possibly guess every user’s needs.
Like, this autofocus that supposedly is better because users can control it. Except they can’t. They could turn off Javascript, but HTML5 has taken that control away, because spec writers had a nice ideal which still (so far as I know) hasn’t been implemented.

But the point about how the content should be the same on all versions: while I understand the reason for this, and while I know mobile users who deliberately do whatever it takes to get to the “desktop” version because they feel/know they are missing out on content, empirical testing by Nielsen group show that people actually being able to finish tasks on mobile devices:
– is 53% for “desktop” sites
– goes up to 64% for mobile-specific sites
– goes way up to 74% for app versions of sites

At the time of these studies, responsive design was new and “primitive” and success rates varied along a spectrum. And the studies continually concluded that fluff must be removed from web content, but that content for mobile must be even more terse.

Which means, once again, that (as Barbie would say), web development is hard. Here, because we have to balance the fine line between not keeping mobile users in a content-poor second-hand version of a website, and not letting the bloat of desktops leach into the mobile realm. People should not feel cheated of content when on mobile, yet we know most websites’ “content” is a lot of junk.

And of course offering a “to desktop” link if you have two separate sites is good, especially when you hit the “I found something deep on teh googles but got redirected to the mobile home page” stuff, so I think it would make sense to also offer a “show desktop styles” possibility as well. Would be up to the vendors though, not developers.

Comment by Janghou

Agreed.

It wouldn’t be that difficult to write an extension (Opera Mobiles has support in a lab version) that deletes css rules.
document.styleSheets[0].deleteRule(x)

If it’s in a seperate CSS file, you can disable that:
document.styleSheets[0].disabled

I’m not sure if there is a simple way to select and delete a media query part in JS. Maybe.

I guess writing nonsense in the query declaration will be enough:

@media (min-width:500px) { … }

@nofuckingmedia (min-width:500px) { … }

Some fancy support in userCSS to overrule author media-queries would be nice:
@media (min-width:500px) {
disabled: !important;
}

Comment by Zooming Squishes

[…] has been some talk recently about turning off responsive design: Bruce Lawson, Webmonkey, and I also I wrote about it a while back. To be clear, I’m a big fan of […]

Comment by Jens Grochtdreis

I understand your point and I am not fully convinced that this is something browser vendors should care of.

Okay on one hand vendors are guilty of mimicking the large viewport of a real monitor on a smartphone. So they should or could build a second trick to trick the trickser – means to override the designer’s styles.

But I don’t think it is a really good idea. Maybe it was no good idea to mimic large viewports in the first place. But I don’t think that smartphone vendors will change that. So it is the choice of developers to build a site responsively or not.

As responsive webdesign is a niche people like your father may be puzzled about the strange behaviour of some sites. But I hope they will learn. They will learn that pages adapt to their environments.

And if they won’t learn and remain puzzled, developers could integrate a link for switching to the “desktop view”. And if developers do that we would have control. Control we wouldn’t have when browser vendors would interfer.

Comment by Rriver » レスポンシブWebデザインのサイトに「デスクトップ表示」ボタンが必要な2つの理由

[…] レスポンシブWebデザイン(RWD)で作ったウェブサイトを運営しはじめてから気になっていたことが一つあります。それは、RWDで作られたウェブサイトでもデスクトップ版のレイアウトが見られるようにする機能が必要かという疑問です。僕が書いた本でもp.176のコラム「レスポンシブWebサイトでも『PCサイト』ボタンが必要?」で触れた内容ですが、先日のBruce Lawson氏のブログ記事を読んでいて、再び気になったので自分の考えをまとめてみました。 […]

Comment by Tim Marshall

Any site you build should be focussed on all of its users, failing to do will simply mean they will go elsewhere which is clearly not desirable.

In the abscence of any user research, its unfair and a little unwise to force a responsive layout on a visitor, no matter how great it looks or how well optimised it is. An individual users requirements are exactly that, individual and where possible you should strive to cater for their requirements.

After all, it’s not that hard to include a “View Desktop” version link with the functionality behind it to over-ride any media query’s and meta tags and drop a cookie to remember their preference.

In the days of conversion optimisation, giving the user the choice could be the difference in them buying a product or calling you; whatever action the goal of your site has.

I think we have a duty to advise on not alienating potential users, remember, outside of our industry there aren’t many people who know what responsive design is; they’ll just think its a mobile site. Maybe a bit more education is the way forward, personally I think that’ll take too long and the interim solution is to give the user the choice.

Comment by hand_coding

Hi, Bruce.
Websites having different versions (“Desktop” and “Mobile”) have a link to “View desktop site”. If we knew the fraction of mobile users using these links, we could infer how many would use “Fixed layout”.

Comment by Jarvklo

The argument that “very few uses the switch” mentioned above is – to me at least – the same sort of argument that is frequently used against accessibility enhancing features out there… IMHO a *very* slippery slope to thread in other words. You coined the term TWAP to be “the web ain’t print” once – to me it should perhaps be reinterpreted as “the web ain’t predictible” nowadays. Milage varies. As long as we “enhance” the content for some representations but not for others, this will be an issue for likely some group of users you didn’t plan for but would like to embrace fir your business (or whatever) IMHO.

Comment by Aircon Contractor

Hello my beloved! I have to point out that benefits and drawbacks incredible, good composed you need to include around important infos. I wish to discover additional threads similar to this .

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. :)