Enhancing Responsive Layouts with Jquery Implementing Jquery Plugins
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 In this lecture, we'll explore a variety plugins that sharpen and expand your of jQuery plugins that can help you add options for responsive designs. Follow elegance and interactivity to your along at the example site here, and be responsive layouts. sure to check out the source code.
In this lecture, you can Implementing JQuery Plugins expect to:
Learn how to implement jQuery plugins into your site. Implementing jQuery plugins into your site is fairly easy, and as you Learn how to enhance move through this lecture, you'll notice a pattern in implementing a image slideshows with a responsive slider. jQuery plugin. Once you link to the the main jQuery library in your HTML Learn how to document, using a plugin usually involves the following steps: incorporate a modal dialog. Learn how to customize tooltips. 1. Download the plugin files and upload them to your Learn how to make a mobile friendly server. Minimally, the files include a JavaScript file, but navigation menu. 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 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 Nine Muse Photography
make sure you have the latest wheel technology: use an HTML5 based framework to give yourself a design preparation! 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:
Nine Muse Photography
We capture your most precious moments, beautifully.
[...]
[...]
[...]
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. 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 Look for plugins that to pull it into our document. Include the following in the head section: have been "minified" to be as lightweight as possible. Remember: everything you include The plugin also comes with a CSS file, which we'll need to include as is something that has well. Add the file to your CSS folder, and link to it in your header: to load when users visit your page.
Now, we need to include the following script in our header as well:
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_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. 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:
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:
Request a Quote
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.
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. Now we can add the following script in the header:
This defines the trigger for the plugin, so leanModal activates when the link is clicked.
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? 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).
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 Don't dismiss back into the humble tooltip. aspects of design that For our page, we're going to use the plugin Tooltipster, which is seem minor, lightweight and customizable. such as tooltips. Begin with loading Tooltipster's CSS file inside your header tag: Use jQuery plugins to put touches on Then load Tooltipster's JS file after your jQuery inclusion: small features and ensure a consistent and comprehensive Now, to activate Tooltipster we need to add the script within the header: user experience.
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:
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 4.0.10 qTip2 tooltipsy
With these elegance and interaction enhancements under our belt, let's 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 finger friendly. 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:
Next, let's add the script to our header:
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:
Of course, this method, while elegantly simple, is rather limiting.
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 Even if you've grown and the list, you're also out of luck. In that case, you may want to hunt comfortable with your for another plugin. However, for our purposes, with a navigation menu design routines, made up of one clean and simple unordered list, the plugin works remember that tools beautifully. evolve. Getting familiar with HTML5 elements But we will need to edit our CSS for the mobile version of the navigation will help you take full menu. While the plugin does a good job of creating a menu the user can advantage of the toggle on and off, it leaves it up to us to style it as we need to: jQuery plugins that rely on them. @media screen and (maxwidth: 650px) { nav { position: relative; top: 30px; width: 100%; textalign: center; backgroundcolor: #c5a7a7; border: 1px solid #3c1f1f; fontsize: 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 fingerfriendly 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
