Easy Responsive Web Design with the Restive jQuery Plugin
Posted on January 13, 2014 at 12:11 pm
Designing sites for smartphones and tablets sounds awesome when you are reading about it. You get all excited about the awesome possibilities of having your homepage look and feel great on multiple mobile devices (and non-mobile devices alike). However, when you actually stop the dreaming and get to the doing, your joy literally gets knocked in the teeth by the fearless fists of sorrow.
Have you ever been so frustrated that you shout out the phrase that is identified by those notorious letters “WTF“, but you’re so gobsmacked with said frustration that you skip the first word and then can’t even finish the expletive, you’re just like “…THE FFFFF…?!” Well, that’s what it was like for me about a year ago when I was trying to get the hang of this responsive and adaptive web design thing, and I’m pretty sure I’m not the only one.
It was – to put it lightly and like Jerry Maguire – “An Up-at-dawn, Pride-swallowing Siege”. Numerous CSS media queries, polyfills, and shims, all conspiring like minions to make me less productive. This whole scenario is one of the primary reasons I felt compelled to develop the Restive Plugin.
So what is the Restive plugin?! Basically, it’s a jQuery Plugin that enables any web designer to put together responsive and adaptive web sites as though they were an expert at it. The only real skill you need to have is HTML and CSS (which every web designer should know anyway). Most web designers can pretty much design any web site they want for any screen size using HTML and CSS. The real problem is getting everything to work on every device, and the Restive Plugin helps make this happen.
A Working Example
Let’s say today is “Hello World” Day, the day you’re going to build your first site using the Restive plugin (with the help of HTML and CSS). I find that it’s usually easier getting my head around something tough when you work through a simple example. So let’s do that right now.
So, let’s assume you have an existing site that was initially designed primarily for the desktop, but we now want to make it responsive and/or adaptive to mobile devices (this is the scenario most of us will be saddled with as not everyone has the luxury of “mobile-first”).
The site code base is as follows:
The HTML
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Restive Plugin</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="global.css" type="text/css"> </head> <body> <header> <section id="hs-level-1"> <article id="hs-level-1-content"> <div class="logo"></div> </article> </section> <section id="hs-level-2"> <article id="hs-level-2-content"> <nav> <ul class="menu"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> <li><a href="#">Item 6</a></li> </ul> </nav> </article> </section> </header> <div id="wrapper"> <section id="bs-level-1"> <article id="bs-level-1-content"> <h1>My Page Title</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus venenatis lacus nec dignissim. Pellentesque nisl diam, congue nec purus ut, convallis consectetur dui. Proin aliquam mauris et nunc accumsan tristique vulputate eu eros. Pellentesque eget massa in magna pellentesque dapibus. Suspendisse accumsan eu mi id lacinia. Nullam sit amet dolor quis ipsum consequat tempor ut ornare mi. Vestibulum volutpat dictum adipiscing. Etiam ac justo condimentum, molestie diam eu, pulvinar elit. Nullam sagittis, ante sagittis eleifend bibendum, nunc elit commodo nunc, ut euismod lectus dui id neque. Etiam ut commodo eros. Aenean sagittis viverra tincidunt. Nunc posuere posuere consectetur. Integer tincidunt tortor eget nulla cursus, ut consectetur leo tristique. </p> <p> Donec tempus consectetur tellus, non elementum nunc consectetur at. Nunc quis turpis ac ligula tincidunt aliquam. Mauris ante est, pharetra id sem ac, ultricies semper orci. Pellentesque sit amet mauris non massa lobortis ultrices a accumsan est. Donec tempor interdum ante, vitae volutpat neque faucibus eu. Integer sit amet blandit velit. Curabitur justo odio, consectetur vitae urna et, consectetur pharetra nibh. Nunc consectetur porttitor leo, non accumsan velit ultrices eget. Pellentesque vitae consectetur elit, non pharetra odio. Vivamus dictum laoreet dui, a sodales purus tristique sed. Nunc quis elit quam. Praesent facilisis tempor tempus. Etiam ullamcorper felis quis dui auctor aliquam. Cras luctus orci ut porta viverra. Ut eu dui sed libero convallis adipiscing sed ut elit. </p> </article> </section> </div> <footer> <section id="fs-level-1"> <article id="fs-level-1-content"> <div class="contact"> <p>1 WhereIWork Lane, WhereILive, USA 10101</p> </div> </article> </section> <section id="fs-level-2"> <article id="fs-level-2-content"> <div class="legal"> <p>Copyright © 2013 Business Inc.</p> </div> </article> </section> </footer> </body> </html>
The CSS
/** global.css **/
/*
CSS Reset by Eric Meyer - Released under Public Domain
http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0; font-size: 100%; font-weight:normal; vertical-align: baseline; background: transparent;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: ''; content: none;}
:focus {outline: 0;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse;border-spacing: 0;}
small, sub, sup { font-size: .83em; }
sub { vertical-align: sub;}
sup { vertical-align: super; }
/*------------------------------------------
Global Styles
-------------------------------------------*/
/* SET ALL ELEMENTS TO BOX-SIZING : BORDER-BOX */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
*behavior: url(boxsizing.htc);
/* If you need support for IE7 and lower make
sure the boxsizing.htc file is linked properly.
More info here: https://github.com/Schepp/box-sizing-polyfill */
}
body {font-family: Arial, Verdana, sans-serif; font-size: 100%; background-color: #ffffff; margin: 0 auto; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility;}
img{max-width: 100%;}
/*------------------------------------------
Layout
-------------------------------------------*/
.clear{clear: both; display:block; overflow:hidden; visibility:hidden;}
#ie .clear{clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:1px;}
.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
.clearfix {display: inline-block;}
/* start commented backslash hack \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* close commented backslash hack */
header {width: 100%;}
header #hs-level-1 {height: 70px;}
header #hs-level-2 {height: 60px;}
#wrapper {width: 100%; padding: 30px 0 15px 0;}
#wrapper #bs-level-1 {}
#wrapper #bs-level-1-content{}
footer {width: 100%;}
footer #fs-level-1 {}
footer #fs-level-1-content {background-color: #eee;}
footer #fs-level-2 {}
footer #fs-level-2-content {background-color: #ddd;}
section article {width: 960px; margin: 0 auto;}
/*------------------------------------------
Typography
-------------------------------------------*/
h1, h2, h3, h4 {font-weight: bold;}
p {font-size: 110%; padding: 0 0 15px 0; line-height: 1.6em;}
#wrapper section article p {font-size: 120%; padding: 0 0 25px 0;}
#wrapper section article h1{font-size: 180%; padding: 0 0 15px 0;}
footer p {font-size: 100%; padding: 0 0 5px 0; color: #666;}
/*------------------------------------------
Menu
-------------------------------------------*/
header nav {}
header nav ul.menu {margin:0px; padding:0px; list-style-type: none; height: 60px;}
header nav ul.menu li {float: left; background-color: #000; width: 160px; height: 60px; line-height: 60px; vertical-align:middle; text-align: center;}
header nav ul.menu li a {color: #fff;}
header nav ul.menu li a:hover {text-decoration: none;}
/*------------------------------------------
Embellishments
-------------------------------------------*/
header #hs-level-1-content .logo {font-size: 420%; font-weight: bold;}
footer #fs-level-1-content .contact {}
footer #fs-level-2-content .legal {}
/*------------------------------------------
Mobile - for Restive Plugin
-------------------------------------------*/
As it stands, the above code is neither responsive nor adaptive.
NOTE: Just in case you didn’t notice, the CSS file is embedded by the link tag via global.css and is not inline.
NOTE: We have placed a section header in the CSS file titled “Mobile – for Restive Plugin” in anticipation of the CSS code that will be added later on.
So let’s now use the Restive Plugin to make a mobile-optimized site. However, before we start, let’s identify all the things we want to have happen to the site when viewed on a mobile device. We would like to:
- Change the layout width from 960px to a fluid value of 100%, and add 10px padding to either side
- Align the logo to the right of the layout if the device is a tablet; and align the logo to the center of the layout if the device is a phone
- Collapse the horizontal menu to a vertical one, and reduce the height of each menu item if the device is a phone
- Reduce the text size in the footer area
The list above is a simple list of design changes. You don’t actually have to do this in detail because of the way the Restive plugin works, you can do it on-the-fly.
So, now let’s install and initialize the Restive plugin by adding the following to the existing HTML code:
<!-- Install JQuery version 1.7 or higher -->
<script type="text/javascript" src="jquery.min.js"></script>
<!-- Install Restive Plugin -->
<script type="text/javascript" src="restive.min.js"></script>
<!-- Initialize Plugin -->
<script>
$( document ).ready(function() {
$('body').restive({
breakpoints: ['240', '320', '480', '640', '720', '960', '1280'],
classes: ['rp_240', 'rp_320', 'rp_480', 'rp_640', 'rp_720', 'rp_960', 'rp_1280'],
turbo_classes: 'is_mobile=mobi,is_phone=phone,is_tablet=tablet',
force_dip: true
});
});
</script>
The Installation part is pretty straighforward, we just link jQuery and the Restive Plugin.
From the Initialization part, we see that we have defined four options for the Restive Plugin: breakpoints, classes, turbo_classes, and force_dip. Now I’ll explain what this all means.
The Restive Plugin will actively monitor the viewport of any devices used to view your site for the following declared breakpoint ranges (as we have defined them above): 0 to 240px, 241 to 320px, 321 to 480px, 481 to 640px, 641 to 720px, 721 to 960px, and 961 to 1280px (Please note that these are device pixels by default and NOT device-independent pixels).
If the viewport of the device that views your site is between 0 and 240 pixels wide, Restive will detect this and it will add the class rp_240 to the <body> tag (which is our jQuery selector); if the viewport is between 241 and 320 pixels wide, Restive will add the class rp_320, and so on. This is basically how breakpoints and classes work. If you notice, the number of breakpoints items is equivalent to the number of class items.
turbo_classes is a special feature of the Restive plugin that will add one or more classes (in addition to any other classes previously added) to the <body> tag when certain conditions are met. From our settings, we have specified that we want to add three classes; mobi, phone, and tablet when the device is a mobile device, a phone, and/or a tablet. So if an iPhone 4 visits your site, the turbo_classes option will tell Restive to add mobi and phone as classes to the <body> because an iPhone 4 is a mobile device and a phone also. If it was an iPad 2 instead, then what would get added would be mobi and tablet. You’ll see why this is useful later on.
Finally, the force_dip option will force breakpoints to consider device-independent pixels (instead of device pixels) in its declared ranges. Restive by default considers device pixels. However, in certain scenarios, you might want to go with device-independent pixels instead and the force_dip option let’s you do this.
Consider an iPad 4, which has a retina display (pixel ratio of 2) and a device pixel width of 1536 in portrait orientation. This means that it will not match any of your defined ranges since your breakpoints top out at 1280. However, as our Web site is not so complicated as to warrant additional CSS rules for retina tablets, we want all retina tablets to be classified the same as non-retina tablets. So by setting force_dip to true, Restive Plugin will see only in device-independent pixels, so 1536 (device pixels) will be considered as 768 (device-independent pixels], which obviously matches one of your declared breakpoint ranges.
Let’s now append the additional style rules to our CSS file:
/*------------------------------------------
Mobile - for Restive Plugin
-------------------------------------------*/
.mobi {font-size: 110%;}
.mobi section article {width: 100%; padding: 0 10px;}
.mobi.tablet header #hs-level-1-content .logo {text-align: right;}
.mobi.phone header #hs-level-1-content .logo {text-align: center;}
.mobi.phone header #hs-level-2 {height: auto;}
.mobi.phone header nav ul.menu {height: auto;}
.mobi.phone header nav ul.menu li {float: none; width: 100%; height: 40px; line-height: 40px; border-bottom: 1px dashed #aaa;}
.mobi footer p {font-size: 80%;}
NOTE: This CSS code is appended to the earlier CSS file where we made space for it under “Mobile – for Restive Plugin”.
So if we now visit the web page with an iPhone 4, Restive will add mobi phone rp_320 to the class attribute of the <body> tag. Note that if we didn’t set force_dip to true, this value would have been mobi phone rp_640, since the plugin would be considering only device pixels (and not device-independent pixels) in the declared ranges.
So after Restive does its work, and based on the additional CSS rules, we can expect the following outcome:
- The font-size for mobile devices will be 110%
- The layout will become fluid and padding of 10px for the left and right sides will be applied
- The alignment of the logo will be to the right for tablets, and the center for phones
- The menu will collapse vertically (for phones) i.e. float will be removed, the width will be 100%, and the height of the menu layout has been reset to auto. The height of menu items (<li>) will also become 40px, and a bottom-border will be added to delineate each item.
- Finally, the footer <p> font-size will be reduced to 80%
In Closing
So with the Restive Plugin, and with just a few lines of additional JS and CSS code, you can make a relatively rigid web page that is much more responsive and adaptive to mobile devices. I wonder how long it would take to do the same thing using CSS Media Queries?!
Restive actually has a lot more features than were demonstrated here, so please have a look at the Restive Plugin Docs for more on what the plugin has to offer.
I would urge you to give the Restive Plugin a trial in your next mobile web design project and see if it makes your life a little easier.
Happy Less Coding!
Posted in Web Design