Академический Документы
Профессиональный Документы
Культура Документы
C o m m u n i t y
E x p e r i e n c e
D i s t i l l e d
$ 29.99 US
19.99 UK
"Community
Experience
Distilled"
Learn how to build your own pattern library and fill it with the
most popular responsive web design patterns
Chelsea Myers
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.
Preface
Websites come in varying shapes and sizes. In our lifetime, we may work on sites
that have four or 400 different pages. And the devices these websites are viewed
on are just as different. Creating websites for all these variables is a daunting
task. Breaking sites down to bite-sized pieces, or patterns, can make this task
more manageable.
Web design and development is a great industry to be a part of because the people in
it love to share. When developing a responsive website, it can be a challenge to come
up with solutions for scaling content from small to large screens. Luckily, we can
look to responsive patterns and responsive pattern libraries shared by the companies
and individuals that make up this industry.
Together, let's look at the most popular responsive web design patterns and how
they are built. Responsive patterns, just like patterns in the analog world, can be
used as a guide, a foundation, or solely inspiration for your own work.
Preface
Chapter 4, From Static to Dynamic Embedding Media, shows how to deliver catered
images for different quality displays and how to make media such as images and
video scale with a responsive website.
Chapter 5, Gathering and Displaying Information, covers patterns and guidelines for
developing the more analytical elements of a website such as forms and tables.
Chapter 6, Combining Responsive Patterns, teaches how to decide whether a responsive
pattern is the right one to use and how to combine patterns to create a more
custom solution.
Chapter 7, Ship It Finalizing Your Pattern Library, lays out the final steps to polishing
up a responsive library before archiving it or handing it to the client.
What is RWD?
[2]
Chapter 1
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.
[3]
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 (http://dev.w3.org/csswg/
mediaqueries-4/) 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*/
header {
background-color: blue;
}
@media screen and (min-width: 800px) {
header {
[4]
Chapter 1
background-color: red;
}
}
/*NAVIGATION*/
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
}
}
[5]
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 (http://dev.w3.org/csswg/mediaqueries-4/#custommq). It will allow aliases for media queries to be declared with @custommedia 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 (http://
abookapart.com/products/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.
[6]
Chapter 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.
[7]
[8]
Chapter 1
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 Disney.com'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 http://video.disney.com/movies or see the following image:
[9]
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, http://
patternlab.io/, 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
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.
[ 10 ]
Chapter 1
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
Page
Disney.com
http://disney.com/
Template
Media page
Organism
Video gallery
Molecule
Atom
Video thumbnail
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
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.
[ 11 ]
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.
[ 12 ]
Chapter 1
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
[ 13 ]
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
MailChimp's responsive pattern library is my favorite example.
You can view this example at http://ux.mailchimp.com/patterns/.
[ 14 ]
Chapter 1
Responsive Patterns
Responsive Patterns is another pattern library developed by Brad Frost. That guy
must love pattern libraries, am I right? Responsive Patterns (https://bradfrost.
github.io/this-is-responsive/patterns.html) is a catalog of popular patterns
being used across the Web. Along with showing examples of these patterns, Frost
includes a CodePen (http://codepen.io/) 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:
Starbucks (http://www.starbucks.com/static/reference/styleguide/)
Google (https://developers.google.com/web/fundamentals/
resources/styleguide/)
[ 15 ]
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 (http://
prismjs.com/). 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.
[ 16 ]
Chapter 1
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 (http://lea.verou.me/) 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:
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.
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 (http://www.sublimetext.com/) or Atom (https://atom.
io/). Or you can copy the pattern template code from the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive Pattern Library</title>
[ 18 ]
Chapter 1
<meta name="viewport" content="width=device-width, initialscale=1">
<!-- Load in template styles -->
<link rel="stylesheet" href="../assets/css/pattern-style.css">
<!-- Load in Google Font: Lato -->
<link href='http://fonts.googleapis.com/css?family=Lato:400,700'
rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/
svn/trunk/html5.js"></script>
<![endif]-->
<style>
/*Pattern ## - Description*/
/*Insert CSS here*/
</style>
</head>
<body>
<!-- Insert pattern markup here -->
</body>
</html>
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>.
[ 19 ]
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><h4>Pros:</h4></li>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ul class="list-compare">
<li><h4>Cons:</h4></li>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<h4>Example</h4>
<iframe src="pat-00-template.html" frameborder="0"
height="100"></iframe>
<h4>HTML</h4>
<pre>
<code class="language-markup">
<!-- Markup goes here. -->
</code>
</pre>
<h4>CSS</h4>
<pre>
<code class="language-css">
/*Styles go here*/
</code>
</pre>
</div><!--end pattern-->
[ 20 ]
Chapter 1
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 <!-- Markup goes here. --> with the markup (HTML) of
the pattern. Replace all less-than characters, <, with its HTML entity, <,
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 filledout 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.
Summary
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.
[ 21 ]
www.PacktPub.com
Stay Connected: