Enhancing Responsive Layouts With

Size: px

Start display at page:

Download "Enhancing Responsive Layouts With"

Vernon Cain
6 years ago
Views:

CSS Layouts Enhancing Responsive Layouts With JQuery Enhancing Responsive Layouts With JQuery You can do a lot with just HTML and CSS (particularly HTML5 and CSS3), and we can design beautiful and

1 CSS Layouts Enhancing Responsive Layouts With JQuery Enhancing Responsive Layouts With JQuery You can do a lot with just HTML and CSS (particularly HTML5 and CSS3), and we can design beautiful and beautifully responsive Web sites using only those tools. However, JavaScript particularly the popular JavaScript library jquery can enhance your site in a myriad of ways, helping you create content sliders, incorporate interactive photo galleries, animate elements, and more. We touched briefly on jquery Mobile in the last lecture. In this lecture, we're going to explore a handful of jquery plugins that sharpen and expand your options for responsive designs. Follow along at the example site here, and be sure to check out the source code. In this lecture, we'll explore a variety of jquery plugins that can help you add elegance and interactivity to your responsive layouts. In this lecture, you can expect to: Learn how to implement jquery plugins into your site. Learn how to enhance image slideshows with a responsive slider. Learn how to incorporate a modal dialog. Learn how to customize tooltips. Learn how to make a mobile friendly navigation menu. Implementing JQuery Plugins Implementing jquery plugins into your site is fairly easy, and as you move through this lecture, you'll notice a pattern in implementing a jquery plugin. Once you link to the the main jquery library in your HTML document, using a plugin usually involves the following steps: 1. Download the plugin files and upload them to your server. Minimally, the files include a JavaScript file, but they can also include CSS files. 2. Link to the script (and the CSS, if applicable) in the head of your HTML document. 3. Include a small script in your head as well, defining any plugin options as well as the plugin "trigger." This trigger, usually a class or id name, serves as a hook for the script, so the plugin knows which elements within

2 your document to act on. 4. Place these triggers (as class or id names) in the relevant HTML elements in the body of the document. 5. For some plugins, you have to add some additional CSS rules to your main CSS file. HTML Layout Preparation Before we dive into the plugins themselves, let's begin with our HTML layout. Note here that we're using an HTML5 based responsive framework by Harry Roberts called inuit.css, which makes it easier for us to get up and running with a responsive design: Don't try to reinvent the wheel, but do make sure you have the latest wheel technology: use an HTML5 based responsive framework to give yourself a leg up on responsive design preparation! <head> <meta charset=utf 8> <meta name=viewport content="width=device width, minimum scale=1.0, maximum scale=1.0"> <title>nine Muse Photography</title> <! The framework > <link rel=stylesheet href="css/inuit.css"> <! Your extension > <link rel=stylesheet href="css/style.css"> <link href=' family=mrs+saint+delafield' rel='stylesheet' type='text/css'> <! jquery > <script src=" ry.min.js"></script> </head> Note, first of all, our header. We've included a link to the latest version of jquery (as of this writing, 1.7.1). All of our plugins depend on being included as part of the Web page. Now let's look at the code for our layout: <div class="wrapper"> <div class="grids"> <div class="grid 12"> <header> <nav> <ul> <li><a href="#">contact Us</a></li> <li><a href="#">about</a></li> <li><a href="#">portfolio</a></li> </ul> </nav> <h1>nine Muse Photography</h1> </header> </div><! /grid 12 > </div><! /grids >

3 </div><! /grids > <div class="grids"> <div class="grid 12"> <ul> <li><a href="#"><img src="img/pic1.jpg" alt="picture 1" /></a></li> <li><a href="#"><img src="img/pic2.jpg" alt="picture 2" /></a></li> <li><a href="#"><img src="img/pic3.jpg" alt="picture 3" /></a></li> </ul> </div><! /grid 12 > </div><! /grids > <hr> <div class="grids"> <div class="grid 12 tagline"> We capture your most precious moments, beautifully. </div><! /grid 12 > </div><! /grids > <hr> <div class="grids"> <div class="grid 4"> [...] </div><! /grid 4 > <div class="grid 4"> [...] </div><! /grid 4 > <div class="grid 4"> [...] </div><! /grid 4 > </div><! /grids > <hr> <div class=footer> 2012 Nine Muse Photography, All Rights Reserved </div> </div><! /wrapper > If you recall Lecture One, you'll find the layout's "grid" notation familiar. Here we have a twelve column grid. The header, photo section, and tagline all span the entire width of the page (all twelve columns). There is a middle div with some text, split into three columns. Each "row" is enclosed in a wrapping div, with the class name grids. So far, our page looks like this:

Here's our original page running with our now familiar gridded layout system. Now let's add some responsiveness! Click here for a larger version of the image.

4 Here's our original page running with our now familiar gridded layout system. Now let's add some responsiveness! Click here for a larger version of the image. Photo credits: baby photo by 2nd Street Photography, wedding photo by Varin Tsai, and engagement photo by Seth Lemmons. Notice how much screen real estate those three photos take up. The text is buried beneath them, demanding a lot of scrolling from the user. Let's balance things out and add some interactivity by turning that stack of photos into a slideshow with a responsive slider. Responsive Slider The Web is inundated with content slider jquery plugins, but only a select handful of those are responsive (that is, the slider shrinks to fit when viewed on a mobile device). For this example, we're going to use ResponsiveSlides.js, a simple slider plugin by Viljami Salminen that is lightweight, less then 1kb when minified, which means all unnecessary whitespace and other characters (such as carriage returns) have been removed to optimize file size and reduce loading time for the user. Once we download the plugin and include it in our file structure, we need

5 Look for plugins that have been "minified" to be as lightweight as possible. Remember: everything you include is something that has to load when users visit your page. to pull it into our document. Include the following in the head section: <script src="path/to/responsiveslides.js"></script> The plugin also comes with a CSS file, which we'll need to include as well. Add the file to your CSS folder, and link to it in your header: <link rel="stylesheet" href="path/to/responsiveslides.css" /> Now, we need to include the following script in our header as well: <script> $(function () { $(".rslides").responsiveslides({ pager: true, speed: 500, maxwidth: 960 ); ); </script> This defines the "trigger" in our HTML here, the rslides class that prompts the slider plugin. We're also setting some basic options: adding a pager and setting both the slideshow speed and the maximum width of the slider (which is just the width of the layout). The advantage of this plugin is that it is completely customizable with CSS,which can also be a disadvantage, as you have to do quite a bit of coding to get the pagers and navigation buttons looking slick. Fortunately, the plugin includes some great demo files, from which we can swipe the CSS we need:.rslides { margin: 0 auto;.rslides_container { margin bottom: 50px; position: relative; float: left; width: 100%;.rslides_tabs { margin top: 10px; text align: center;.rslides_tabs li { display: inline; float: none; _float: left; *float: left; margin right: 5px;

$.rslides_tabs a { text indent: 9999px; overflow: hidden; webkit border radius: 15px; moz border radius: 15px; border radius: 15px; background: #ccc; background: rgba(0,0,0,.$

6 .rslides_tabs a { text indent: 9999px; overflow: hidden; webkit border radius: 15px; moz border radius: 15px; border radius: 15px; background: #ccc; background: rgba(0,0,0,.2); display: inline block; _display: block; *display: block; webkit box shadow: inset 0 0 2px 0 rgba(0,0,0,.3); moz box shadow: inset 0 0 2px 0 rgba(0,0,0,.3); box shadow: inset 0 0 2px 0 rgba(0,0,0,.3); width: 9px; height: 9px;.rslides_tabs.rslides_here a { background: #222; background: rgba(0,0,0,.8); The rslides_tabs class encloses the pager, which is just an unordered list of links. The code above styles these links elegantly with shadows, borders, and rounded corners. Now our slideshow looks like this: Shadows and borders give a sense of physical substance to your designs. For users, the more tangible something feels, the more it feels like the product of careful choices, which (not coincidentally) is the definition of elegance.

7 A much more balanced layout, with an elegant image slideshow that features a responsive slider. Click here to see the full layout in action. Now that we've used jquery to improve our management of screen real estate and add some interactivity, what's next? Well, if the user likes what they see, they'll want to know more, so let's use jquery to help us give the user an elegant way to get in touch. Modal Window What we'd like is a dialog that allows the user to send us a message, requesting a quote. To create an elegant modal window that pops up when the user clicks on a link, we're going to use leanmodal, a jquery plugin made by a Web design studio out of Australia called Finely Sliced. Again, there are quite a few jquery plugins that do the same thing; we're picking a minimal one that's small in size but gets the job done. First, add a link to the plugin script in your header: <script src="path/to/jquery.leanmodal.min.js"></script> Now, there are two parts to the window in our HTML: the content of the modal window, and the link to this content. Here's the content, which you'll notice looks similar to the code we used for our pop up dialog in the last lecture: <div id="quote"> <h3>request a Quote</h3> <form action="form_action.php" method="get"> <label for=" "> Address</label> <input id=" " type="text" placeholder=" Address" size="30"/> <label for="message">message</label> <textarea id="message" placeholder="message"> </textarea> <input type="submit" /> </form> </div> There's nothing out of the ordinary here: you have a standard form, enclosed in a div (note the id attribute). This content is hidden from view until we trigger the modal window, so we can put this bit of code anywhere. Here we've just included it at the bottom of the document. Let's construct the link: <p id="request"> <a id="modal_box" title="tell us about your special event!" href="#quote">request a Quote!</a> </p> The text here links to the modal box div we just made (via the href attribute), and we've also created a trigger here for the jquery plugin by setting modal_box as the value for the link's id.

8 Now we can add the following script in the header: <script type="text/javascript"> $(function() { $("#modal_box").leanmodal(); ); </script> This defines the trigger for the plugin, so leanmodal activates when the link is clicked. Finally, we add our CSS: #lean_overlay { position: fixed; z index:100; top: 0px; left: 0px; height:100%; width:100%; background: #000; display: none; #quote { text align: center; display: none; width: 300px; background color: #c5a7a7; padding: 20px; border: 1px solid #3c1f1f; #quote label { display: none; #quote textarea { width: 250px; height: 200px; #quote input { width: 250px; margin bottom: 20px; The #lean_overlay CSS just styles the "dimming" effect when the window pops up, and was just copied and pasted from the plugin's instructions (here's the link again to the plugin's homepage). The remaining code styles the modal popup window. Aside from making sure to set the display property to none (so it won't show up in the document's normal flow), you can style this however you like. So now, when we click the "Request a Quote" link, our modal window pops up and looks like this:

A simple and graceful modal box that allows the user to easily send a message thanks jquery! So now we've got responsive sliders and a slick modal box. What's next?

9 A simple and graceful modal box that allows the user to easily send a message thanks jquery! So now we've got responsive sliders and a slick modal box. What's next? Let's look at how we can use another jquery plugin to give us more control over a small but useful feature: tooltips. Fancy Tooltips When you include a title attribute in an HTML element, most browsers automatically displays that title as a tooltip (right). Don't dismiss aspects of design that seem minor, such as tooltips. Use jquery plugins to put personal The default tooltip, however, lacks panache. The font and yellow background remind users of their operating system and distract from your design. Luckily there are many jquery plugins that put a bit of style back into the humble tooltip. For our page, we're going to use the plugin Tooltipster, which is lightweight and customizable. Begin with loading Tooltipster's CSS file inside your header tag: <link rel="stylesheet" type="text/css" href="css/tooltipster.css" />

touches on small features and ensure a consistent and comprehensive user experience. Then load Tooltipster's JS file after your jquery inclusion: <script type="text/javascript" src="js/jquery.

10 touches on small features and ensure a consistent and comprehensive user experience. Then load Tooltipster's JS file after your jquery inclusion: <script type="text/javascript" src="js/jquery.tooltipster.min.js"></script> Now, to activate Tooltipster we need to add the script within the header: <script> $(document).ready(function() { $('.tooltip').tooltipster({defaultposition: "top"); ); </script> Here we set the "trigger" for the tooltip, a class we'll call, appropriately, tooltip. We also set the position of the tooltip: the tooltip pops up above the titled element. Finally, we need to add the class trigger within the body of the document. We only have one relevant title element we need to worry about: the one in our "Request a Quote!" link. Let's add our class element to it: <p id="request"> <a id="modal_box" class="tooltip" title="tell us about your special event!" href="#quote">request a Quote!</a> </p> That's all there is to it! If we wanted to customize this further, we could edit the CSS file that's included with the plugin. However, the default CSS styling looks great, as we can see in our updated screenshot: Our Tooltipster jquery plugin has given us a more aesthetically pleasing tooltip, one that matches our design far better than the default. If you'd like to see what's out there beyond Tooltipster, be sure to check out the additonal options listed below for further inspiration: Open Tip Tipped qtip2 tooltipsy With these elegance and interaction enhancements under our belt, let's

11 turn our attention to device compatibility, specifically how to make our navigation menu mobile friendly. Responsive Navigation When we created our responsive Web site in the last lecture, we created a nice responsive navigation menu that, when viewed on a mobile device, stacked the menu items vertically and made them fingerfriendly. Overall, that's a good approach, and many Web sites use that technique for their responsive site. The only downside to this method is similar to the issue we had with the photographs in the original version of our photography site: the navigation menu (usually placed at the top of the mobile window) can take up valuable screen real estate, requiring the user to scroll down to view the site's main content. There are several jquery plugins that minimize the space taken up by the navigation menu on mobile devices. Some turn the navigation menu into a dropdown menu. The plugin we'll be using, a simple responsive navigation plugin by Kent Safranski, uses a toggle approach: when the user clicks on a navigation link, the menu slides out from beneath it. You might notice that this plugin appends the word "Navigation" to our navigation menu and leaves it there even if you resize the browser window back out beyond the triggering width. Our focus here is on responding to different devices and browsers, so we're not as concerned about the user's potential ability to manually resize the page. But it's always a good idea to stay aware of the limitations and tics of any outside plugins you incorporate into your work. First, we need to add the plugin link to our header: <script src="path/to/jquery.responsinav.js"></script> Next, let's add the script to our header: <script type="text/javascript"> $(function(){ $(window).responsinav({ breakpoint: 650 ); ); </script> We only need to define one option here: the "breakpoint" screen dimensions for the plugin. This defines the screen width that prompts the toggled version of the navigation menu: if the user's browser width is 650 pixels or smaller which captures mobile devices then the user sees the mobile friendly navigation menu. Note that, unlike the other plugins we've covered in this lecture, we aren't specifying an id or class name that serves as a trigger. This plugin instead relies on a certain element structure as a trigger. In this case, an unordered list nested within the nav element. So because our navigation menu already has an unordered list, we don't need to make any changes:

12 <nav> <ul> <li><a href="#">contact Us</a></li> <li><a href="#">about</a></li> <li><a href="#">portfolio</a></li> </ul> </nav> Of course, this method, while elegantly simple, is rather limiting. Even if you've grown comfortable with your design routines, remember that tools evolve. Getting familiar with HTML5 elements will help you take full advantage of the jquery plugins that rely on them. If you aren't using HTML5 elements and thus aren't yet using nav you're out of luck. Or, if you've, say, nested another div between nav and the list, you're also out of luck. In that case, you may want to hunt for another plugin. However, for our purposes, with a navigation menu made up of one clean and simple unordered list, the plugin works beautifully. But we will need to edit our CSS for the mobile version of the navigation menu. While the plugin does a good job of creating a menu the user can toggle on and off, it leaves it up to us to style it as we need screen and (max width: 650px) { nav { position: relative; top: 30px; width: 100%; text align: center; background color: #c5a7a7; border: 1px solid #3c1f1f; font size: 100%; nav li { width: 100%; If you remember our last lecture, this should look familiar: we've enclosed this specialized CSS within a media query, so that it only applies when the screen size is 650 pixels or less. We've made a few adjustments to the position, size, and colors of the menu. Most notably we've made the list items the width of the browser screen to ensure that they stack vertically. Also, if you examine the example page's CSS style.css code, you'll see this media query comes after the rest of our CSS, and we've made sure to account for any inheritance issues in the various properties. Now, when viewed on a mobile device, our navigation menu is tucked away when the page opens (left), and when the user clicks "Navigation," the menu slides down (right):

Viewed on a mobile device, the navigation menu snugly awaits a click, ready to slide down its options, keeping our page finger friendly while saving screen real estate.

plugins. Look for other plugins that offer different approaches to the functionality explored in this lecture, but don't stop there!

13 Viewed on a mobile device, the navigation menu snugly awaits a click, ready to slide down its options, keeping our page finger friendly while saving screen real estate. We've enhanced our page nicely with jquery, but really we've only scratched the surface of what jquery can add to a site, both inherently within the jquery library as well as through the use of plugins. Look for other plugins that offer different approaches to the functionality explored in this lecture, but don't stop there! Go out and explore the many effects, animations, and interface elements that jquery can add to a page. Discussion Share your thoughts and opinions with your fellow students in the Discussion area. Exercise Pull together the techniques you have learned in this course to create a mini site on the topic of your choice

HTML and CSS a further introduction

HTML and CSS a further introduction By now you should be familiar with HTML and CSS and what they are, HTML dictates the structure of a page, CSS dictates how it looks. This tutorial will teach you a few