Chapter 7. Working with Responsive Designs

The last couple of years have seen a rise in the popularity of an approach to designing websites called responsive design. Coined by Ethan Marcotte, the term refers to websites that respond to the viewport size of your website visitor. You can learn more about responsive design in Marcotte's article at http://alistapart.com/article/responsive-web-design. Whether site visitors are viewing your website on a mobile device, a tablet, a netbook, or a huge desktop screen, the website detects the viewport size and responds by adjusting layouts, font sizes, image sizes, and more to optimize the website for that particular viewport size.

While most of the magic of responsive design happens with media queries and other CSS, JavaScript can help to enhance the experience even further for our website visitors. Some elements and layouts aren't easily adapted to the viewport size with just CSS. JavaScript can fill in and help us take our responsive designs...

Using FitVids for responsive videos

Video players are one of the handful of elements on a website that don't readily respond to being resized easily with just CSS. However, video players are so popular that we need a way to fit those into our responsive designs.

jQuery and the FitVids plugin come to the rescue. This simple little script automatically sizes your videos to fit inside any container, whether that's a page or a column on your site.

Time for action – resizing videos

Perform the following steps to make your videos respond to the viewport size:

1. We'll get started as we usually do by creating a basic HTML document and the associated files and folders just like we did in Chapter 1, Designer, Meet jQuery. In the body of the HTML document, we'll create a few sections. In each section, we'll include a place to put a video, a title, and a short description, as shown in the following code:

   <div class="content">
     <h1>Favorite Videos</h1>
     <section>
       <div class="video">
       </div>
       <div class="description">
         <h1>Maru Being Maru</h1>
         <p>A video of Maru, the cutest cat in Japan, playing with a box.</p>
       </div>
     </section>
     <section>
       <div class="video">
       </div>
       <div class="description">
         <h1>Candy apple shaped soft candy</h1>
         <p>RRCherryPie demonstrates how to use a candy...

Responsive menus

In Chapter 4, Building an Interactive Navigation Menu, we made great use of the Superfish plugin to create animated drop-down and fly-out menus. The gorgeous menus we can create with Superfish are nice, but they're not going to work very nicely for us if we're making a responsive design. On wider screen sizes, the menus will work great, but as we start to use smaller screens like those found on mobile devices, we'll lose all the benefits of the Superfish plugin.

A convention is quickly being established for responsive menus: on screen sizes too small to display a full menu bar, the menu is collapsed to a single three-line character (☰), sometimes accompanied by the word Menu. This character is most often referred to as a hamburger, but might also be called a same-o or navigation drawer. When the hamburger is clicked, the menu opens and is available for exploration to our site visitor.

We'll take a look at how we can combine the MeanMenu jQuery plugin with Superfish to create...

Time for action – making our menu responsive

We'll get started with the custom-designed menu we created in the section The hoverIntent plugin of Chapter 4, Building an Interactive Navigation Menu. Then, we'll perform the following steps to make that menu work for responsive designs:

1. We're going to use the MeanMenu plugin from MeanThemes to make our menu responsive. The MeanMenu plugin is available from GitHub at https://github.com/weare2ndfloor/meanMenu. Head over there and find the Download Zip button in the right-hand side column to download a ZIP file of all the files we'll need to get the MeanMenu working.

2. Now that we've downloaded that ZIP file, let's open it up and take a look at what's inside:

   

   This is pretty straightforward. We have a demo HTML file to show us the MeanMenu plugin in action. There's a copy of the GPL license. There are the JavaScript and CSS files for the menu, along with a minified copy of each. And finally, there's a README file with some documentation.

3. First of all...

Creating a tiled layout

In a tiled layout, or a masonry layout, HTML elements are fit together like bricks in a wall rather than the strict grid layouts we can create with just CSS. With CSS, we're limited to layouts as shown in the following figure:

This is a perfectly acceptable way to lay out our content; our site visitors can view all of the content without a problem. However, if we add JavaScript to the mix, we can improve those layouts a bit by making them fit together as shown in the following figure:

Tiled layouts or masonry layouts can help to close up gaps left by items of different heights. Tiled layouts are great for situations where our site visitors are browsing through lots of graphical content—such as a photo gallery. They're less ideal for situations where site visitors might be looking for something specific or where the content is less graphical—such as a list of search results.

To accomplish our tiled layout, we'll be using the excellent Masonry library by David DeSandro...

Time for action – creating a masonry layout

Perform the following steps to create a tiled layout:

1. We'll get started by creating a basic HTML document and the associated files and folders just like we did in Chapter 1, Designer, Meet jQuery. In the body of the HTML document, we'll set up a container with a series of repeating elements inside. We'll use a list (<ul>) as the container and individual list items (<li>) inside for the repeating elements. Inside each list item, we'll place an image and some text that describes that image, as follows:

   <div class="content">
     <h1>Cats of the World</h1>
   </div>
   
   <ul class="container">
   
     <li class="cat">
       <figure>
         <img src="images/siamese.jpg">
         <figcaption>
           <h2>Siamese</h2>
         </figcaption>
       </figure>
       <div class="info">
         <div class="traits">
           <dl>
             <dt>Country</dt>
             <...

Time for action – creating a tiled layout with different width items

Perform the following steps to take the tiled layout we've already created and to make it work for items with different widths:

1. First, we need to create items of different widths. A few of the items in the layout have images that are landscape rather than portrait orientation, which means those items appear particularly small in the layout. Let's make those the width of two columns so they stand out more. Go back to the HTML file for the list of items and add a class of w2 to each item that will now be two columns wide:

   <li class="cat w2">
     <figure>
       <img src="images/himalayan.jpg">
       <figcaption>
         <h2>Himalayan</h2>
       </figcaption>
     </figure>
     <div class="info">
       ...
     </div>
   </li>

2. Next, open your styles.css file and style these items with a wider width. As all items are of full width at narrow screen sizes, we only have to add the new width...

Summary

In this chapter, we took a look at some jQuery plugins and one JavaScript library that can make it just a little bit better to work with responsive designs. First, we took a look at how we can use the FitVids jQuery plugin to make the videos resize correctly inside responsive designs. Then we took our animated drop-down menu originally created in Chapter 4, Building an Interactive Navigation Menu, and made it work inside responsive designs with the help of the MeanMenu plugin. Finally, we took at look at how to build responsive tiled layouts with the help of the Masonry JavaScript library.

Next up, we'll look at some different ways that jQuery can help us work with images in a better way, including images inside responsive layouts.