Opt-Out Responsive Design?

Chris Coyier //

Reader Glynn writes in:

I'm wondering if you'd ever seen a responsive web design in which a 'see full site' link was included. I know that when developing a responsive design we should stay away from hiding content completely, however some users may actually prefer pinching and zooming and using good old fashioned horizontal menus on their devices.

Have you seen an example of this and how do you think it could be approached?

I think this is a pretty darn interesting question.

There was a time when we jousted any site with a mobile version that didn't give us a "full site" link. But with responsive design taking hold, we're seeing a lot less of that. In fact I'm not sure I've ever seen it on a site that uses responsive design exclusively to accomodate mobile screen sizes.

Why don't we see opt-out responsive design? My guess is two-fold:

  1. It's a bit technically challenging to implement and there aren't a lot of precedents.
  2. It's admitting you didn't do a very good job on the responsive design.

The latter likely being the bigger factor. Like: why are we creating this responsive design at all if we aren't sure it's a better experience?

A possibly-legit situation is different use cases for different users. Perhaps most users come to the site to read and your responsive design accommodates reading very well. But some users come to do some other task and to them the responsive design is hindering.

Doing it

I haven't actually done this, but theoretically this is how I would. This will be easier if you've gone with a desktop-first approach rather than a mobile-first approach (I would think).

1. Query param to swich

Perhaps:

http://yoursite.com/?resp=no

2. Remove viewport meta and class the body

Then you test for that param. I'll use PHP here just because but it could be anything. We'll only remove the viewport meta tag if they don't want responsive design, as well as put a class on the body.

<head>

   <title>My cool site huzzah</title>

   <?php
     if (!$_GET['resp'] == 'no') { ?>
       <meta name="viewport" content="width=device-width">
   <?php } ?>

</head>

<body class="<?php if (!$_GET['resp'] == 'no') { echo "resp"; } ?>">

You'll probably want to get a little more complex here. You'll want to set a cookie (or perhaps use localStorage) to remember the users preference. Then you don't just test for the query param but also the value of that cookie before making the decision to exclude the viewport meta or not (and the body class).

3. Qualify your media query styles

One way to do this would be to exclude the loading of a separate stylesheet where you have all your responsive styles. That might work for you but I'm generally a fan of keeping as much CSS together in one file as possible. If you do keep it in one file, you can use that "resp" body class to ensure media query styles don't take place if they shouldn't.

.page-wrap { width: 80%; }

@media (max-width: 600px) {
  .resp .page-wrap { width: 100%; }
}

This way the responsive style will only take hold if the media query matches and the proper class is on the body indicating it's OK to use responsive styles.

4. Have good UI to switch between

Whatever you cook up, make sure it's pretty clear how you get back and forth between the two site styles and that it sets the cookie stuff properly.