Creating a faux ‘View full site’ button for responsive sites

I was recently messing around with the King’s website, to see how how feasible retro-fitting a responsive design would be (you can see what I came up with here).

Actually making the design responsive was pretty straightforward (probably because I kept the site fixed-width until screen is < 480px, so technically ‘adaptive’ and not ‘responsive’ but hey), but I was concerned that making a fundamental change to an already existing design may confuse and frustrate existing users.

I know what you are thinking – responsively designed sites should really improve user experience on smaller devices, and if you are hiding content and changing the page architecture to a point where users wish they could just see the ‘desktop’ version, then you are doing it wrong. But I was very much aware that current users aren’t the most enthusiastic about fundamental changes such as this, and also the fact that the site is so large, with such a huge site navigation, it is near impossible not to hide some of it on smaller screens.

So I tried out a simple solution which puts the control back with the user, a ‘View full site’ button, which reloads the same page, sans media queries and responsive-specific JavaScript, and setting a cookie to remember user preference across the site.

Making it responsive

As this was modifying an existing design, I simply added an additional CSS and JavaScript file to take care of the responsive elements (with some extra HTML for mobile-menus/buttons where needed), with something in the CSS filename which differentiated it from other stylesheets referenced on the site, I just called it media-queries.css. I also added HTML for a ‘view full site’ link to appear at the bottom of the page.

Removing the responsive

To convert the design back to it’s full width variation, I simply added a jQuery click handler to the ‘view full site’ button I had added which removed the responsive CSS:

$('#view-full-site').click(function(e) {
  // prevent default link action
  e.preventDefault();
  // remove css file from head
  $('link[href*=media-queries]').remove();
}); 

Easy. But then as soon as the user visited another page on the site, they would need to click the button again as the page would default to the responsive design, pretty annoying…

Remembering user preference

So to prevent this, I needed a way of remembering whether or not this button had previously been clicked – I used cookies, and more specifically, the jQuery cookie plugin to do this.

The final solution checks to see if a cookie for full-site viewing has been set, if it hasn’t (which it won’t have by default), it runs the responsive-specific JavaScript and leaves the media-queries CSS intact. If the cookie has been set, it removes the media queries CSS, ignores the responsive JS, and adds a full-site class to the view-full site button.

So when the ‘view full site’ button is clicked, it simply sets the full-site cookie, and reloads the page. To toggle back to the ‘mobile-site’, if this button is clicked when in full-site mode, the cookie is removed, and page again reloaded:

// if full-site cookie has been set
if($.cookie('full-site')) {
  // add class to button, and change button text
  $('#view-full-site').addClass('full-site').text('View mobile site');
  // remove stylesheet from head
  $('link[href*=media-queries]').remove();
}
else {
  // run the 'mobile-site' JS
}

$('#view-full-site').click(function(e) {
  // prevent default link action
  e.preventDefault();
  // if the page is already displaying 'full-site' design
  if $(this).hasClass('full-site') {
    // remove the cookie (set the full-site cookie value to 'null')
    $.cookie('full-site', null, {expires: 365, path: '/'});
  }
  else {
    // create the cookie (set the full-site cookie to 'active')
    $.cookie('full-site', 'active', {expires: 365, path: '/'});
  }
  // reload the page
  location.reload();
});

I’m sure there is a way to easily achieve this without jQuery or plugin dependencies, but as the site already uses jQuery (and this is just an experiment anyway) this wasn’t such an issue.

You can view the final demo page here.

To sum up

Yes, this isn’t the point of responsive design, and yes it shouldn’t be required if you design the site well – but I don’t think any feature which puts more viewing control in the hands of the user is ever going to be a terrible thing, especially if they are accustomed to a certain site design already. We all know responsive sites should be built from the ground-up with a mobile first philosophy, but if that isn’t immediately possible (like with large institutional sites), it’s good to know that there is some kind of middle-ground.