Responsive Web Design Opt-out

May 9, 2012

We’re currently sat on the precipice of a glorious responsive website boom! Day by day, more and more websites are choosing to adopt CSS3′s media queries and start to enhance their websites for users on devices with differing widths and orientations. You can view a fantastic gallery of them if somehow you haven’t heard. But there is one little issue: we are now telling our users that this new responsive  website we’ve procured for them will be their ideal version of your website: and this is not always so.

Previously, with our mobile “m.mysite.com” websites we would add a “View Full Site” option in the footer – but this has been left undiscussed with our new responsive ideoligies. So let’s fill in the gap.

---

View my Demo and Download the Plugin

---

How the script works

The important thing about this idea is that we use a cookie: our users don’t want to see the non-responsive site just once, they want to keep it that way until they see fit to switch back. So what I found is a handy jQuery plugin by Jason Frame called Cookie Style Switcher – originally written to change Text Size on a page. The plugin would set a default value (small, medium or large) which the user can change by clicking a link.

First, you’ll need to set your meta viewport. Make sure it has an id of “viewport” so we can select it for removal later.

<meta id="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Now add the following HTML markup in your footer (or wherever you’d like the options to appear).

<div id="respond">
<p>
<a href="#" class="respond">View Mobile Site</a>
<a href="#" class="dontrespond">View Desktop Site</a>
</p>
</div>

Add some detail into our CSS:

/* site-wide class for the largest width sections of the site */
.container { width: 90%; margin: 0 auto; }

/* if we're responding, width % stays untouched, hide link to activate the responsive site */
.respond .container {  }
.respond .respond { display: none; }

/* if we're NOT responding, width becomes fixed pixels + hide link to deactivate the responsive site */
.dontrespond .container { width: 960px; }
.dontrespond .dontrespond { display: none; }

I’ve simply changed the available options to “respond” (our default) and “dontrespond“. Here’s the script you’ll need to include (after your jQuery library).

// Initialize cookie resizing
//
// selector - jQuery selector identifying resizing links. class name from each
// link will be used as the size
// defaultSize - what it says on the tin. will be applied to body when cookie
// is not present

// Edited by Russell Bishop (minor changes...) to allow for responsive opt-out links in place of text size switching.
function cookieResize(selector, defaultSize) {

    var lastSize = defaultSize;

    function write(name, value, days) {
        var expires = "";
     if (days) {
       var date = new Date();
       date.setTime(date.getTime() + (days * 86400000));
       var expires = "; expires=" + date.toGMTString();
      }
      document.cookie = name + "=" + value + expires + "; path=/";
    }

    function read(name) {
      name += "=";
      var ca = document.cookie.split(';');
      for(var i = 0; i < ca.length; i++) {
       var c = ca[i];
       while (c.charAt(0) == ' ') c = c.substring(1, c.length);
       if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
      }
      return null;
    }

    function updateSizeFromCookie() {
        $('body').removeClass(lastSize);
        lastSize = read('size') || defaultSize;
        $('body').addClass(lastSize);

		$('#viewport').remove();

		if (lastSize == 'respond') {
			$('head').append('<meta id="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">');

		}
    }

    jQuery(selector).click(function() {
        write('size', this.className);
        updateSizeFromCookie();
        return false;
    });

    updateSizeFromCookie();

}

Finally, tie it all together by calling the function in the header, with our default set to “respond”. Voila!

$(function() {
	cookieResize('#respond a', 'respond');
});

---

We’re set!

With all of that in place our site now responds beautifully, and allows the user to opt-out of our responsive site.

If you have a better solution, throw it my way in the comments! I’ll be interested to see people’s different takes on the idea!