Responsive Web Design Patterns

4 (1 reviews total)
By Chelsea Myers
    Advance your knowledge in tech with a Packt subscription

  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies

About this book

Responsive Web Design (RWD) is a web design approach aimed at arranging things in a way to get optimal viewing experience and easy reading and navigation on different screen sizes. It bonds together designers and developers as they publish and test new solutions to build websites for all screen sizes. The simplicity of this technology stems from the fact that learning about the most tested RWD solutions along with basic HTML, CSS, and a bit of JavaScript, can soon help you start using these solutions for yourself. The foundations of RWD, once mastered, will help you gain the skills you need to create your own responsive website.

Keep track of Responsive Web Designs (RWD) patterns by building your own pattern library and creating RWD’s most popular patterns, seen on hundreds of websites today. For beginners and pros, this book provides a toolset to help plan the design and functionality of a responsive website.

The book begins with creating a home for all your patterns by setting up your own pattern library. Each chapter is broken down into different sections of a website; presenting patterns for each section. We move on to building responsive layouts of varying degrees of complexity to house the type of content you need. Develop menu systems and see which responsive navigation fits the size of your website. Next, you’ll learn tactics to present media and data elegantly on different screen sizes. And finally, you’ll tie up all those loose ends on your responsive website and pattern library to get it ready for launch.

Publication date:
November 2015


Chapter 1. Creating a Home for Responsive Patterns

In 2010, Ethan Marcotte coined the term "responsive design." Since then web design has only been improving. The web community came together and stood behind this new concept. Beautifully responsive websites can now be seen all over the Internet. As a web developer, when I stumble upon a new responsive site, I love to evaluate the patterns that make up its system. It's like looking at the individual brush strokes that make up a painting.

Pattern libraries house the elements that make up a design system. A responsive pattern library houses elements for a responsive system. When we create these libraries ourselves, they act like a tool for archiving designs, modules, and templates for future reference. Developers can also use existing frameworks with responsive patterns premade, such as Bootstrap and Foundation. Unfortunately, using these patterns with few to no alterations has produced a lot of websites that look the same. But when we use these responsive patterns as a base, and not the solution, responsive websites can be as unique as snowflakes.

Because of its mass support, best practices have formed around responsive web design (RWD). There are popular patterns that developers and designers agree upon to be good solutions for websites catering to multiple devices. This book's goal is to familiarize you with these patterns and show you how to use them. The next step is to use these patterns as a stepping-stone to creating your own responsive designs. In this chapter, we will have a look at the following topics:

  • What is RWD?

  • What makes up a responsive website?

  • What is a pattern library?

  • How do I create my own pattern library?


The need for responsive web design

Let's say it is 2007, and I am waiting for a bus and browsing the Internet on my shiny new iPhone. If I wanted to see the latest from my favorite web comics, Hark! A Vagrant (, the page would take around 50 seconds to download. 50 seconds! If I did this today on my iPhone 6, the same page would take 6 seconds to download. Both of these figures are relying on the fact that I have a decent signal as well. And since I live in a city, I probably wouldn't even be using my data plan. With hotspots popping up all over the world, I would most likely be connected to one of those. Meaning that even the largest comics from Hark! A Vagrant wouldn't even take a full second to load.

When the iPhone first appeared on the EDGE network, accessing the Internet was a hassle and took patience for each page to load. I remember using the browser on my Blackberry Bold and hating the experience. Flash-forward to today, and I do everything on my smartphone. According to Pew Research Center (, in 2015, 64% of American adults own a smartphone and 89% of them use it to access the Internet. And the most common time to do this? When they are at home or traveling. No longer can we as designers and developers ignore that fact that any site we create will be accessed through a mobile device. It is our job to make that experience as easy as possible.


Why and how to create a responsive site

HTML is naturally responsive, but for years web developers were taught to force sites to remain fixed at one size. In 2010, Ethan Marcotte brought to our attention the fact that people are no longer accessing the Internet through only desktops and laptops. With the launch of the iPhone came hundreds of other devices that put the Internet on small screens and in our pockets. But the Web wasn't ready to be viewed on such small devices. Marcotte's article, Responsive Web Design ( acted like a wake up call ushering us into a new realm of web design.

If web design is new to you, you may not be familiar with what RWD is. RWD is creating one website that responds to the size of the viewport. The same website renders on both smartphone and desktop devices. It is the same markup, but with CSS media queries changing styles depending on the browser's resolution. A delightful example is UK web design agency, Stuff & Nonsense's website (

The preceding images are of Stuff & Nonsense's website at 400px, 800px, 1100px, and 1400px wide, respectively. The same site is served on both my smartphone and my laptop. The biggest difference between each screen size is the imagery in the header. Yes, the navigation, font sizes, and layout of the page are changing between each size as well. But the best part of this site is the advancing monkey army in the background as your browser size changes.

This is what RWD is doing technically. As developers, we are changing how the site appears depending on the viewport. As designers, we are rethinking the content that appears on smaller screens to make sure our users are receiving the information they need quickly and efficiently. Stuff & Nonsense's design requires some more advanced techniques, but can serve as an inspiration for what RWD can do.

Media queries

Media queries were introduced with the debut of CSS3. They allow web developers to control what CSS styles are applied depending on variables such as the device width, height, aspect ratio, resolution, and orientation. The following is an example of a standard media query:

@media screen and (max-width: 500px) {
  body {
    color: red;

The first part, screen, indicates what media type the media query applies to. In this case, screen refers to computer, mobile, and tablet screens. Another commonly used media type is print. The @media print annotation will apply only when the page is being printed.

Next and (max-width: 500px) is setting the media feature. Instead of max-width, we can also use features such as min-width, orientation, and resolution. Right now, this media query will only apply the CSS style, body{color: red;}, when the site is being viewed on a screen when the viewport is less than 500px wide. When both of these requirements are met, the site's font color will be red.


Check out the W3C's ( specifications on media queries to see what other media types and media features there are.

To use media queries, you first must place them in your style sheet. Throughout my time working on responsive websites, I have found two methods commonly used for organizing media queries. I have listed the methods in the following steps and shown a version of each with the media queries highlighted:

  1. Grouping styles by pattern (header, navigation, footer, and so on) and writing a new media query for each:

    header {
      background-color: blue;
    @media screen and (min-width: 800px) {
      header {
        background-color: red;
    nav li {
      display: block;
    @media screen and (min-width: 800px) {
      nav li {
        display: inline-block

    This method works better if you are working on a larger website and using a CSS precompile such as Sass. Sass allows you to nest your CSS, meaning you can nest media queries within a rule. I personally use this method on my projects. It works best when you break up your CSS into separate files and keep your CSS modular.

  2. Grouping styles by media query and writing pattern styles under each:

    /*Base Styles*/
    header {
      background-color: blue;
    nav li {
      display: block;
    /* Width 800px and up */
    @media screen and (min-width: 800px) {
      header {
        background-color: red;
      nav li {
        display: inline-block


    Downloading the example code

    You can download the example code files from your account at for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit and register to have the files e-mailed directly to you.

Grouping the CSS rules together under one media query works better on smaller websites where the CSS is not as extensive. We will be using this method for our pattern library because the design system is very simplistic. If the CSS gets larger, this method can become cumbersome. Right now, the rules are close together in their file because there are not many of them. But as a CSS file grows, there can be a lot of distance between a rule that dictates styles on mobile and the media query that changes it on a larger viewport. This means there is a lot of scrolling back and forth to make tweaks.


Custom media queries

A potential solution to this problem could be on the horizon. The W3C's Media Queries Level 4 specifications include a concept for custom media queries ( It will allow aliases for media queries to be declared with @custom-media and reused throughout the site.

Both of these examples are using mobile first design. Here, we write the styles for the smallest screen size first and work our way up. Google Product Director, Luke Wroblewski, popularized the mobile first concept in his book, Mobile First ( Designing mobile first means designing the mobile experience before the rest of the site. Working within mobile constraints from the beginning forces designers and clients to prioritize and focus their content. It is easier to work your way up to a complex desktop website than squish a desktop site onto a small screen. If you start adding media queries and find one style sheet is getting too big, you can use @import to break out each pattern or media query into its own file and import it into one main style sheet. Whatever method you choose, just make sure that you keep your code organized and well commented.

Responsive meta tag

If you start adding media queries to your CSS file without setting the proper meta tag in your HTML file, you'll find your website looking no different when it loads on a mobile device. Most mobile devices automatically zoom out and increase the browser's size to fit the website. Setting a responsive meta tags forces the device's browser to be the same width as the device's screen:

<meta name="viewport" content="width=device-width, initial-scale=1">

Put this meta tag in the <head> of your HTML files to overcome the device's zooming. This meta tag sets the browser width to the width of the device (width=device-width). The second part, initial-scale=1, makes sure that no automatic zooming occurs by setting the browser's scale to 1.


Breaking websites down to their patterns

To begin spotting responsive patterns, you have to look at websites modularly. Pick a website and start breaking down the design into its components. These repeated components are the patterns that make up the design system. Designing and developing modularly allows the site to be easily scaled up in the future. Creating templates and pages alone only accounts for the content on the website at the time of its development. They do not account for what's to come. A pattern library can be used to house all of a website's patterns.

Pattern libraries can be used in a team setting to simplify collaboration. If a project uses a pattern library containing the entire site's existing patterns, developers can see what work has already been done and what still needs to be completed. If a developer is putting together a contact page and needs a form, he or she can look through the pattern library and see whether a form pattern already exists. If it does exist, the developer has now avoided creating a pattern that was previously created.

Learning how to spot patterns

As mentioned, a great way to learn how to spot patterns is to break down existing sites. Let's look at Disney's website ( together and see what patterns make up the site:

First, let's look for elements that are repeated and used throughout the website. An easily spotted repeating pattern on most websites is the navigation. The preceding images show's navigation closed in the top row and open in the bottom. By looking at the home page like this, we can observe the global pattern for the navigation. Here, we can see that on larger screens, the main navigation (Games, Video, Blogs, and so on) is on the page while the rest is hidden in a drop-down menu. On smaller screens all the navigation links are put in an off canvas menu that slides in and out with clicking on the icon (known as the "hamburger" icon). This responsive pattern is referred to as an off canvas navigation. Navigation patterns such as this will be covered in greater depth in Chapter 2, The Main Stage – Building Responsive Layouts.

Digging through Disney's site, we can find modules being repeated on different pages. Look at or see the following image:

This page repeats modules used on the home page. The video gallery modules, as seen under See Tomorrow Today on the video page, are repeated again and again throughout the site. This module can be considered a video gallery pattern. And since this pattern's style changes depending on the browser's width, it is a responsive pattern.

If you want to break down this pattern even more, we can see that the video galleries are comprised of thumbnail images. These thumbnails can be considered their own pattern. They always have a 16:9 aspect ratio, with the video duration in the bottom right corner.

Now we are getting pretty detailed. Depending on the project or client, this level of detail may be required when creating patterns. If you find this happening, you might be interested in atomic design. Atomic design is a concept popularized by web developer Brad Frost and implemented in a project called Pattern Lab. It is a great example of how far you can break down a website. On his website,, Frost breaks down patterns into the following categories:

  • Atoms: The design elements that cannot be broken down any further and make up the building blocks of the design system

  • Molecules: Atoms combined "that function together as a unit"

  • Organisms: Combination of molecules and/or atoms that create sections of an interface

  • Templates: Structured guidelines for combining organisms

  • Pages: A "single instance" of a template with real content

If we apply this concept here, the home page will be a "page" and its structure will be a "template". To break this down further, let's look at a section, like the video gallery, on the page.

Looking at the video thumbnail, the captions, the video gallery, and the overall page, we can figure out what elements are atoms, molecules, and organisms.

Atomic design



Media page


Video gallery


Video thumbnail + caption


Video thumbnail


Building a home for your patterns

Simply put, a pattern library is a home for your patterns. It acts as a point of reference for designers and developers to view the pieces that make up a design system. A good pattern library illustrates how to implement the patterns making up a website. In a responsive pattern library, every pattern should be accompanied with:

  • An example: The actual pattern embedded, showing off its design and functionality on small to large screens

  • The code: How the patterns can be implemented (that is, what is the HTML and CSS? Is JavaScript needed?)

  • The usage: When and where should the pattern be used (that is, what templates can it appear on? Where can it not appear?)

For example, if I were adding Disney's video gallery module to a pattern library, I would first embed the pattern on a page. I would then display the code necessary to build that pattern. Lastly, I would list usage guidelines explaining how and when to use it. Some example usage guidelines may be:

  • Use no less than four (4) video thumbnails in each video gallery

  • Video galleries must span 100% of the page

  • The thumbnail image must have an aspect ratio of 16:9 with descriptions under each thumbnail if needed

These are not Disney's real rules. I just made them up as an example. But documenting patterns like this means that if I ever needed to add the video gallery pattern to another page, I would have a clear set of rules on how to do it.

A responsive pattern library focuses on how patterns change across screen sizes. For small screens, we can see that the video gallery loses the right arrow and allows thumbnails to be cropped-off screen.

Documenting these style changes is what differentiates a basic pattern library from a responsive pattern library.

Use of a pattern library

Responsive pattern libraries are not just for big team projects. Let's be honest, how good is your memory? Can you remember how much padding buttons get, months after you already developed them? And if the padding decreases on smaller screens, you are doubling the amount of information you need to remember with just one design element. Personally, I have a tracking tag on my own keys. So, if I can't remember where I left my keys this frequently, I doubt I will remember month-old code.

Without a pattern library, you need to comb through pages to find where a pattern may live. Only after this hunt can you test it or use it as a reference. A pattern library lets you quickly test all patterns on different browsers and devices. There is a benefit to having all your patterns in one place instead of hiding them away in distant corners of a website. Also, whenever you add more patterns to a system, you can see if the new styles affect older patterns. In short, instead of trying to remember every element you develop, use this book to create a responsive pattern library and begin cataloging your patterns.


Style guide versus pattern library

Although these terms are often used interchangeably, there is a slight difference. A style guide is a document that contains rules for how everything should look. This can be a PDF or an interactive guide online. A pattern library contains rules for how everything should work. A pattern library will be able to show the functionality of each pattern.

Pattern library examples

Pattern libraries are becoming a common tool in the web industry. Developers are releasing premade templates to help others build their own. Large companies such as Google and MailChimp have released their internal libraries, which serve as wonderful examples for the rest of us. I highly recommend viewing these templates and examples before you start your own. Even though pattern libraries may seem similar, they should always be tailored in some way. The tool has to fit the job.

The Pattern Lab

The Pattern Lab is Frost and Dave Olsen's example of a pattern library broken down using atomic design. This is not a company's pattern library, but a template for developers.


You can view a demo of the library at or download it yourself from Frost's GitHub repository at

The Pattern Lab organizes patterns by atoms, molecules, organisms, templates, and pages. The Pattern Lab also has awesome features such as the following:

  • Resize each pattern without resizing the browser

  • The browser width and height are always displayed on the top bar

  • Use quick-select options to view the patterns at small (S), medium (M), and large (L) screen sizes

The Pattern Lab may not be the right fit for all projects and teams. The concept of atomic design can be confusing to other team members and clients. They might not understand what an "atom" means and how it should be used. If you are a more experienced web developer, you can always download the Pattern Lab repository from GitHub and make changes. You can change the language to something more approachable (that is, "Basic Elements" instead of "Atom") and scale down the library. If you don't think you have the skills to do this, don't worry; this is not your only option.


MailChimp's responsive pattern library is my favorite example.

You can view this example at

MailChimp breaks down each pattern by showing an example, providing the code to create it, and including notes about how to use the pattern. As seen in the following screenshot, you can also decrease and increase the width of the browser and see how each pattern reacts since all patterns are functional:

The MailChimp Pattern Library (

Responsive Patterns

Responsive Patterns is another pattern library developed by Brad Frost. That guy must love pattern libraries, am I right? Responsive Patterns ( is a catalog of popular patterns being used across the Web. Along with showing examples of these patterns, Frost includes a CodePen ( to show the code behind each pattern. And since Frost accepts submissions, this site is always growing.

Other examples

Want to look at more responsive pattern libraries? Check out the following list for some great examples:

Your very own pattern library

Developing your own responsive library forces you to become a more organized developer. Creating a pattern library from scratch for the first time or trying to scale down a larger pattern library may not be the best first step. Provided with this book is a responsive pattern library template ready for you to use. Its name is simple—the responsive pattern library (RPL).


You can download the starter template at or view the finished library at

Like Frost's Responsive Patterns, this library is a catalog of popular responsive patterns found all over the Web. By changing the title and content though, it can easily be used (and is meant to be) for clients or personal projects.

The Responsive Pattern Library (

I developed this template with both beginners and more experienced developers in mind. These pages are static and created with HTML, CSS, and Prism.js ( If you are a more advanced web developer, feel free to modify these templates and fit them into your current workflow. I personally use Sass and create a .scss file for each pattern. I then pull them all into one style sheet. I also use PHP to organize my markup.. The Pattern Lab uses Mustache to do this. If you don't know how to do any of this, do not worry; you don't need to. The library is good-to-go as is.

If you look at the finished site and click on the Navigation link on the side menu, you will be brought to a section's landing page. Here, you can see popular responsive solutions for navigations. At the top of the page is the section's title and a brief description about its content. Each pattern following has a working example, the code to implement the pattern, and the guidelines for the pattern's usage.

The pattern example is being displayed using the <iframe> tag. Each pattern has its own HTML file, with styles in the <head> tag, being embedded into the section's landing page.

The code is being highlighted using Lea Verou's ( Prism.js, a syntax highlighter.

Each pattern has a View Pattern button next to its title. The View Pattern button takes you to the pattern's HTML file where you can view it alone outside the landing page. Since the point of this book it to teach you how to use these patterns and why, each pattern has:

  • A level of difficulty to implement (easy, medium, or hard)

  • A description of the pattern

  • The pros and cons of using this pattern

These are the pattern's usage guidelines. The guidelines in the actual library are brief. Look for more information about each pattern in later chapters.

Setting up your responsive pattern library

To download the pattern library, visit and click the Download Zip button at the bottom of the right column. You can find an empty starter version at After you have downloaded the library, unzip it. You will see a folder called RPL-master or RPL-starter-master if you are using the starter files. The following walkthrough will be using the filled library. Put this folder in a safe directory on your computer. By safe, I mean someplace you won't lose or delete it. I keep all my pattern libraries and style guides under a folder called Sites on the same level as Documents.

Inside the RPL folder is the index.html file, the assets folder, and a folder for every landing page and patterns on that page. The assets folder contains the CSS for the library, images used, a template for a pattern file, a template for a section's index page, and the Prism.js plugin.

Now, let's explore how the sections are set up. Open up the navigation folder. Here you will see another index.html. This is the HTML file for the navigation section's landing page. You will also see HTML files named pat-01-simplyStacked.html. These HTML files are the individual patterns. The naming convention for the pattern files is pat-##-description.html. The pat lets me know that this is a pattern file. The number tells me what order on the page it appears. The description gives me information on what the pattern actually is in one or two words.

To add a pattern to a section, copy the pattern template file (pat-00-template.html) from the assets folder and rename it. Put the new pattern file into an already existing or new landing page folder. Next, open up the file in your text editor of choice. I recommend Sublime Text ( or Atom ( Or you can copy the pattern template code from the following:

<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8">

  <title>Responsive Pattern Library</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Load in template styles -->
  <link rel="stylesheet" href="../assets/css/pattern-style.css">

  <!-- Load in Google Font: Lato -->
  <link href=',700' rel='stylesheet' type='text/css'>

  <!--[if lt IE 9]>
  <script src=""></script>

    /*Pattern ## - Description*/
    /*Insert CSS here*/

  <!-- Insert pattern markup here -->

The preceding highlighted code is where we will be adding the styles and markup for each pattern. Nothing will show up just yet though. Let's go over how to set up a section's index page and add a pattern to it.

To create a section, make a new folder in the main folder (RPL-master or whatever you renamed it to) and give it a descriptive name. Duplicate index-template.html from the assets folder, place it in the new section folder, and rename it index.html. To fill out the section page, complete the following:

  1. Add a new list item to the navigation under <ul class="menu"> so that your new section is included. Unfortunately, you will have to update the other pages as well since these templates are only HTML and CSS. Look for the comment <!-- Include new section page --> to see where to add the new list item.

  2. Add in the section's title in <h2 class="page-title">Section Title</h2>.

  3. Add a section description at <p>Section description.</p>.

Now, we can start adding patterns to the page. Use the following code for each pattern you want to add. This can be seen in index-template.html as well:

<div class="pattern">
  <h3>Pattern Title<span class="btn"><a href="pat-00-template.html">View Pattern</a></span></h3>

  <p><span class="difficulty">Level</span> Pattern description.</p>

  <ul class="list-compare">
    <li>Item 1</li>
    <li>Item 2</li>

  <ul class="list-compare">
    <li>Item 1</li>
    <li>Item 2</li>

    <iframe src="pat-00-template.html" frameborder="0" height="100"></iframe>

    <code class="language-markup">
      &lt;!-- Markup goes here. -->

    <code class="language-css">
      /*Styles go here*/
</div><!--end pattern-->

The highlighted code is the information we will be changing. Follow these steps to do this correctly:

  1. Add in a pattern title, pattern difficulty level, pattern description, and the pattern's pros and cons. If you are using this library for a personal project or a client project, insert the pattern's usage guidelines here.

  2. Replace all instances of pat-00-template.html with the name of the pattern file. The actual pattern file should be in the same folder as the section landing file you are working on.

  3. Set the height of the iframe (for example, height="100") to fit the pattern. It is set to 100px by default.

  4. Replace &lt;!-- Markup goes here. --> with the markup (HTML) of the pattern. Replace all less-than characters, <, with its HTML entity, &lt;, to stop the tags from rendering in the browser.

  5. And finally, replace /*Styles go here*/ with the CSS styles for the pattern.

The library itself is already responsive and has some basic styles applied. The library's styles can be found in assets/css/lib-style.css. In the filled-out version on the pattern library, the patterns have some global styles. These styles can be found in assets/css/pattern-style.css. This file is empty in the starter version. After you have your RPL setup, feel free to jump right in and start poking around. The filled-out version has all the patterns we will be reviewing in this book. You can always download the starter files and make each pattern from scratch as we go along.



Since its introduction, web designers and developers all over the world have rapidly adopted RWD. For us, RWD means designing an experience that holds up across multiple screen sizes. Responsive pattern libraries aid us in organizing large design systems that accommodate the smallest smartphone to the largest desktop monitor. As you can see, the library already has four sections: layouts, navigation, media, and forms and data.. All of these topics and their patterns will be covered in the following chapters. We will also be reviewing RWD best practices along the way. Hopefully, by the end of this book, you will feel inspired to start designing and developing your own patterns, while using a pattern library to hold them all.

About the Author

  • Chelsea Myers

    Chelsea Myers, throughout her career so far, has been a student, freelancer, full-time employee, teacher, assistant, researcher, and business owner in the web development industry. She is passionate about responsive frontend development and building out user-focused designs. Every new project allows her to learn and try something new. And to her, that's the best part of the job.

    She graduated from Drexel University with a degree in digital media. Currently, she works for an award-winning digital studio, Happy Cog, and teaches web development and user experience at Drexel. When she is not doing all this, or freelancing herself, she also manages her cofounded animation studio, Coffeebot Studios.

    Browse publications by this author

Latest Reviews

(1 reviews total)
Well written, but not comprehensive enough.
Responsive Web Design Patterns
Unlock this book and the full library for FREE
Start free trial