- ×
Responsible.js - Give visitors the choice of what mobile experience they want. Adds Toggle for mobile to desktop switching without page reloads
Filed under mobile and touchShow AllResponsible.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
Improve user experience on the mobile web
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 intostyles.css
andresponsive.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