ReView.js Changes Viewports In Responsive Designs With a Single Mouse Click
ReView.js In A Word
The tool „Responsive Viewport“ – abbreviated ReView – has the single purpose of letting users on mobile devices change from mobile to desktop view. Often the mobile view is cut down not only in terms of layout, but also in terms of content, as there is not enough space on the small screen to transport all the information provided for desktop users. Using ReView.js the visitor can freely decide whether to see the mobile or the desktop layout. Looking at the ever-growing market of Android devices with its plethora of different sizes and resolutions, this makes perfect sense to me.
How To Embed ReView.js
All done. Now we can define a link for the switching functionality anywhere in the body-section of our HTML document. We have to assign the class
review to that link as to enable ReView.js to find and process it:
<a class="reView" href="/">ReView</a>
If you’re using a desktop computer, you’ll never notice whether a website is ReView-enabled or not, as the tool shows the switch only on mobile devices. Visitors on mobile devices will see a link titled
Default View. After the switch to the desktop view aka Default View, the link title changes to
Core View. The layout changes occur without a reload of the page.
If you’re like me and don’t like the default titles, you’ll be pleased to hear that they are not carved in stone and can easily be altered using HTML5 data-attributes like this:
<a class="reView" data-defaultText="Mobile Layout" data-coreText="Desktop Layout" href="/">ReView</a>
Conclusion: With ReView.js you leave the decision to choose between two given layouts to your visitors. The inexperienced among them don’t get confused as the default view from a mobile device will always be the mobile viewport. So there are no downsides to the solution. Why not give it a try?
About the Author
Denis works as a freelance web designer since 2005.