JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Responsible

    Responsible.js - Give visitors the choice of what mobile experience they want. Adds Toggle for mobile to desktop switching without page reloads
    Filed under 

    • 🔾8%Overall
    • 165
    • 72.8 days
    • 🕩21
    • 👥1

    Responsible.js

    Give mobile visitors the option of viewing the desktop or mobile layout.

    No page reloads, no hassle, just good UX.

    Live Demo

    View Live Demo - emulate a mobile browser with devtools or view on your phone

    Watch the Video

    Improve user experience on the mobile web

    Responsible demo

    Prerequisites

    In order to use the library you need to separate out your responsive CSS into a separate file.

    This means any media queries targeting mobile devices (or tablets) should be moved to a new css file.

    See /demo/css for an example of old-combined-styles.css split up into styles.css and responsive.css.

    By default the script looks for a file named responsive.css but you set the correct path with the cssPath param.

    The Flow

    By default all of your site's CSS loads normally (including your responsive.css).

    If the viewport width is below the threshold (default 980), the 'view full site' toggle will appear and allow visitors to choose their mobile experience.

    Manual installation

    Drop your files into your required folders, make sure you're using the files from the dist folder, which is the compiled production-ready code. Ensure you place the script before the closing </body> tag so the DOM tree is populated when the script runs.

    <body>
        <!-- html content above -->
      <script src="dist/responsible.js"></script>
      <script>
      responsible.init(cssPath: 'http://yoursite.com/css/responsive.css');
      </script>
    </body>
    

    Usage:

    Include the script on your page and initialize:

    // launches script with default settings
    responsible.init(cssPath: 'http://yoursite.com/css/responsive.css');
    

    By default, the script inject the responsive toggles into the dom for you. You can override that by passing in different settings:

    // launches script with custom settings
    responsible.init({
          cssPath: 'responsive.css', // path to responsive css file containing media queries
          desktopWidth: 1280, // the desired width of the mobile desktop view
          toggleThreshold: 980, // if the window is smaller than this width, the mobile toggle will display
          desktopToggleDisplay: true, // set to false to hide mobile toggle
          desktopToggleText: "Toggle Mobile Site", // Text on the 'Back to mobile' Toggle
          mobileToggleDisplay: true, // set to false to hide mobile toggle
          mobileToggleText: "View Full Site", // Text on the 'View full site' Toggle
          mobileToggleAlign: 'right', // right or left
          mobileToggleBottom: '0px' // offset from bottom
        });
    

    Set your own toggles

    If you want to turn off the built in toggles, you can set both ToggleDisplay settings to false and trigger the desktop or mobile mode manually with custom events.

    Like for example, if you want to have the mobile/desktop toggles in your site footer or menu instead of the baked in toggles.

    responsible.init({
          desktopToggleDisplay: false,
          mobileToggleDisplay: false,
    });
    
    <!-- Toggle Desktop from custom button click -->
    <button onClick="script:responsible.desktop();">Toggle Desktop</button>
    <!-- Toggle Mobile from custom button click -->
    <button onClick="script:responsible.mobile();">Toggle Mobile View</button>
    

    Inspired By:

    Github has a pretty solid mobile experience for users but when switching from mobile to desktop it requires a full page reload, this library sidesteps that and creates a seamless experience for mobile browsing

    Show All