Following up on some provoking thoughts from *that* blog post from Luke Jones, I decided to add some additional functionality to my experimental Twitter aggregator.

For simple sites like this one, Media Queries are a no-brainer – simple to add, and the basic layout allows for easy positional modifications to improve the layout on devices with smaller viewports. The target audience for the aggregator also made a compelling reason to create a responsive layout for the site – after all, there's a high probability an above average number of users will be viewing on an iOS or other mobile device.

Besides, I enjoy playing around with the technology, and there's no better place to do that than one of your own sites.

I have to be honest though, I've never really considered the downsides to Media Queries/RWD until Luke's opinion exploded all over Twitter today – that is, applying RWD techniques in a desktop environment – forcing users to view what is essentially supposed to be the mobile "version" of the site, with no other viewing choices available to them.

There are certainly cases where this would be undesirable to the user. Now, you could just adjust the media queries so that don't apply to the desktop environment (using max-device-width, for example), but what about those users who do in fact want the RWD environment on their desktop?

My solution is to offer a simple Javascript toggle function to the site to allow users to choose the experience they want. So, the RWD layout is active by default, but if the user resizes their browser and doesn't like the layout changes, they can simply disable the effects – basically toggling media queries on and off – not unlike the style switchers that were commonplace a few years ago.

My code is written for jQuery, but is so simple that I'm sure it could be easily ported to other libraries (and of course just plain old JS) by those more experienced with Javascript than I am. If you have another solution then please do let me know in the comments section below.

$(document).ready(function () {
    $("#togglerwd").click(function (e) {
        e.preventDefault();
        $('body').toggleClass("rwd");
    });
});

How It Works

$("#togglerwd").click(function (e) {

This first line sets up the click event for an element with the "togglerwd" ID. You will need to add a link in your HTML which will essentially be your toggle "button"/text link:

<a href="#" id="togglerwd">Toggle Responsive Layout</a>

Next, we disable the browser's default onclick behavior for the "#" link (which will stop the page from jumping to the top):

e.preventDefault();

Before finally toggling a class for the element:

$('body').toggleClass("rwd");

Remember to give your a class of "rwd" (or whatever hook you use) by default, which will make sure the responsive layout is enabled by default.

We now have a class we can apply to our media query rules which will allow the toggle to work. All we need to do is write the media query rules as normal, prefixing each with ".rwd" so they only apply when the responsive layout is active:

@media only screen and (max-width: 480px) {
    .rwd #wrapper {background-image:none;padding:0 10px 10px 10px;}
}

Don't forget you should use the same class prefix to style up the toggle button to give visual feedback to the user as to whether "RWD mode" is active or not.

Saving the Preference

So, our toggle feature is all working well – but what about on a more complex site with different pages? Or what if the user doesn't ever want to see the site in "mobile mode" every time he or she revisits the site?

To do this, we need to store the user's preference in a cookie which will be updated each time the toggle button is pressed.

Thanks to jQuery, and a plugin called Cookie, this is really simple to implement – just a few lines of code (the plugin can be packed pretty small) and a few changes to our script, and we're all set:

$(document).ready(function () {
    var rwdcookie = $.cookie('rwdcookie');
    if (rwdcookie == 'rwdoff') {
        $('body').removeClass("rwd");
    }
    $("#togglerwd").click(function (e) {
        e.preventDefault();
        $('body').toggleClass("rwd");
        if ($('body').is('.rwd')) {
            $.cookie('rwdcookie', 'rwdon');
        } else {
            $.cookie('rwdcookie', 'rwdoff');
        }
    });
});

Our new code first checks for the status of the cookie – if it's available and RWD has previously been disabled, then it will immediately remove the .rwd class from the layout, setting the user's preference.

Next, if the click/toggle event is fired, we first check to see if the body class now has ".rwd" applied to it. If so, then we write the "on" preference, otherwise we set the preference to "off". There's probably a cleaner way to do this, but I'm no JS guru, and this did what I needed it to do. I'm always interested in cleaner solutions though – so please let me know if you have an alternative method!

And that's it – one Reponsive Web Design layout toggler with cookie storage all ready to go. Try it out for yourself at toolboxdigital.com/geekkarting.

There are 8 awesome comments...

1. 

   Luke Jones - June 20, 2011 at 11:30 pm

   This is a great solution :).
2. 

   Cole Henley - June 20, 2011 at 11:38 pm

   Nicely implemented although you know you can have “responsive design” but tied to device size rather than viewport size, right?

   eg device-max-width as opposed to max-width? this would remove the need to have such switchery-pokery. is not then this a problem with implementation rather than application?
3. 

   Dan Luton - June 20, 2011 at 11:41 pm

   Hi Cole,

   Yes of course – in fact I already mention this in the article (5th paragraph):

   “There are certainly cases where this would be undesirable to the user. Now, you could just adjust the media queries so that don’t apply to the desktop environment (using max-device-width, for example), but what about those users who do in fact want the RWD environment on their desktop?”

   I think for the majority of cases, using “max-device-width” is certainly more appropriate – but in some cases you may want to offer a choice instead 🙂
4. 

   Jarissimo - March 12, 2013 at 5:12 pm

   Hi this looks great. I have one problem with my template.. It gives automatically responsive and responsive-tablet class to html. I just managed to add desktop class but is there a way to remove those responsive classes with javascript?

   I would like to make responsive layout optional for tablets and smartphones.

   This script adds “desktop” class to html:

   $(document).ready(function () {
   $(“#togglerwd”).click(function (e) {
   e.preventDefault();
   $(‘html’).toggleClass(“desktop”);
   });
   });
5. 

   Jarissimo - March 12, 2013 at 5:31 pm

   This is old post but i wanna share if it help someone:

   These are the links:
   Show Desktop
   Show Mobile

   And here are the script:

   $(document).ready(function () {
   $(“#respoff”).click(function (e) {
   e.preventDefault();
   $(‘html’).removeClass(‘responsive responsive-tablet’);
   $(‘html’).toggleClass(“desktop”);
   });
   });
   $(document).ready(function () {
   $(“#respon”).click(function (e) {
   e.preventDefault();
   $(‘html’).removeClass(‘desktop’);
   $(‘html’).toggleClass(“responsive responsive-tablet”);
   });
   });
6. 

   Jarissimo - March 12, 2013 at 5:33 pm

   Sorry about those links, hope these works (inside a tags):

   href=”#” id=”respoff”>Show Desktop
   href=”#” id=”respon”>Show Mobile
7. 

   shohaib - January 6, 2015 at 3:30 am

   Hello all.

   The code not working. I need help for responsive site. my site have responsive but need one option when it should be mobile device, then click the option for desktop version. so how i can show mobile version in desktop view. like Odesk, Google etc. i need it in jquery and css. if you have idea please show it.

   Thanks
   shohaib
8. 

   باتری - October 2, 2016 at 12:58 am

   Thanks a lot!

Leave a comment: