Responsive Switch

Let users switch off the responsiveness of your website.
"Responsive Design" or "Desktop" view ‐ it's about freedom of choice.

(Click the button or "Switch to desktop version" at page bottom)

Download responsive-switch.min.js (3 kb) Download responsive-switch.js (6 kb)

Why?

Responsive Design is great. But some people dislike endless scrolling, prefer getting a quick overview and can navigate much faster with pinch & zoom. So why annoy them by forcing them into a responsive website? Just let them switch off responsive design with one click. Like in the old "mobile/desktop website" days. - It's about freedom of choice.

How to integrate?

  1. Download and reference responsive-switch.min.js in the <head> of your responsive website's HTML code.
  2. Add the following link to your website:
    <a href="#" class="rs-link" data-link-desktop="Switch to desktop version" data-link-responsive="Switch to responsive / mobile version"></a>
  3. Done.

Try it!

Open this website on a mobile device (< 1024 px wide) and click the link in the footer or the big blue button to see the effect. The page's <meta name="viewport" content="width=device-width> is set to 1024 pixels. The responsive design is switched off. The users decision is persisted for the entire session by using a cookie.

Code example

<html>
<head>
    ...
    <script src="scripts/responsive-switch.min.js"></script>
    ...
</head>
<body>
    ...
    <a href="#"
      class="rs-link"
      data-link-desktop="Switch to desktop version"
      data-link-responsive="Switch to responsive / mobile version"
      data-always-visible="false"></a>
    ...
</body>
</html>

You can control the link behaviour with the following attributes:

data-link-desktop Text for linking to desktop version. There is no default text. You can also leave it blank and style the link with the according CSS classes.
data-link-responsive Text for linking to responsive version. There is no default text. You can also leave it blank and style the link with the according CSS classes.
data-always-visible Whether link should be displayed all the time ("true") or only if browser window or screen size SMALLER than 1024px ("false"). Defaults to "false". We recommend to use "false" for production websites and "true" only for development purpose.

CSS classes

Depending on the "Responsive on/off" state, the "Responsive Switch" link has some CSS classes for styling.

rs-link-to-desktop Website is in "Responsive Design" mode (default)
rs-link-to-responsive Website is in "Desktop" mode
rs-link-active "Responsive Switch" link IS visible (browser window or screen size SMALLER than 1024px)
rs-link-inactive "Responsive Switch" link NOT visible (browser window or screen size LARGER than 1024px)

API

Using the default method of adding a link with the "Responsive Switch" CSS class is simple. But you can also trigger the "Responsive Switch" via custom JavaScript code. Just call responsiveSwitch.toggle() like in the following example. It will toggle between the desktop and the responsive view and also update all "Responsive Switch" links on your website.

<script>
    responsiveSwitch.toggle();
</script>

FAQ

How does it work internally?
Once the user clicks the "Responsive Switch" link, the HTML page's viewport-metatag is modified. It is told that the page should be displayed with a 1024px width (of course you can customize this width). This decision is persisted with a session cookie. So when the user navigates to another page on the website, the according page will also be displayed in "Desktop view". Clicking the link a second time will switch the website back to "Responsive Design" mode.
Is the link visible all the time?
No, the "Responsive Switch" link is only visible when it is needed. This means that by default, it is only visible when the screen or window size is less than 1024px.
Can I customize the link text?
Add a text of choice to the "Responsive Switch" link's "data-link-desktop" and "data-link-responsive" attribute and it will be used. You can also leave both attributes empty and style the link using the applied CSS classes.
Can I trigger the desktop / responsive view directly via JavaScript?
Yes. There is a simple JavaScript API for that purpose.
How many "Responsive Switch" links can I have on a website?
The amount of "Responsive Switch" links is not limited.
How long is the responsive design switched off?
The responsive design is switched off until the sessions has ended. That means, after clicking a "Responsive Switch" link the user can visit other pages of the website. Those pages are presented in "desktop view", as well. He can switch back to "responsive view" at any point of time. When he closes his browser window or visits another website, his website session cookie is cleared. This means when he visits the website a second time, he will see it in "responsive mode".
Can I customize the width of the "Desktop view"?
Yes. By default, the "Responsive Switch" link is visible on screens and browser windows less than 1024px wide. And it is also using that 1024px for the "Desktop-View" mode. You can easily customize this value by setting a global variable called "responsiveSwitchBreakpoint" to a value of your choice before referencing the JavaScript file in the HTML <head> area. Just like this:

<script>
    var responsiveSwitchBreakpoint = 1024;
</script>
<script src="scripts/responsive-switch.min.js"></script>
Does it work on all operating systems?
It only works on devices reading the viewport-metatag, which is essential for responsive design. We have tested it with the following operating systems and browsers: iOS (works), Android 4.x (works), FirefoxOS/Android Firefox (not working).

Changelog

0.9.1 (2013-11-15) Added support for "data-always-visible" attribute.
0.9.0 (2013-11-13) Initial version.

References

Inspired by "A Pixel is not a Pixel | Fronteers 2012" and "Dynamically changing the meta viewport" by Peter-Paul Koch

Background images by Subtle Patterns (Subtle Patterns) / CC BY-SA 3.0

Font icons from "Font Awesome" by Dave Gandy - http://fontawesome.io