Introduction to Responsive Web Design
Clarissa Peterson @clarissa

a workshop for the DC
Web Women Code(Her) Series August 14, 2012

Responsive Web Design:

Responsive Web Design: A collection
of techniques that allow your website to respond to the device that it is being viewed on.

Responsive Web Design: A collection
of techniques that allow your website to respond to the device that it is being viewed on. This allows all users to have an optimal experience without creating separate sites for different devices.

http://www.bostonglobe.com/

http://www.bostonglobe.com/

http://www.bostonglobe.com/

http://www.bostonglobe.com/

1. A flexible, grid-based layout
2. Flexible images and media 3. Media queries

1. A flexible, grid-based layout
2. Flexible images and media 3. Media queries

1. A flexible, grid-based layout
2. Flexible images and media 3. Media queries

1. A flexible, grid-based layout
2. Flexible images and media 3. Media queries

HTML

The first website. http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

<p>...</p>
<h1>...</h1>
<a href=””>...</a>

<hp1>...</hp1>
(highlighting)

<blink>...</blink>

Control:
HTML tables
spacer gifs

Cascading Style Sheets (CSS)

HTML Content
CSS Presentation

John Kannenberg via Creative Commons
http://flic.kr/p/9E7tqh

Brendan Gates via Creative Commons
http://flic.kr/p/dvX1J

Curtis Palmer via Creative Commons
http://flic.kr/p/wyPiC

Brad Frost via Creative Commons
http://flic.kr/p/cfQwL7

Clarissa Peterson via Creative Commons
(CC BY-NC-SA 2.0)

Paulo Fierro via Creative Commons
http://flic.kr/p/ae8Nnr

Responsive web design offers us
a way forward, finally allowing us to “design for the ebb and flow of things.” - Ethan Marcotte http://www.alistapart.com/articles/responsive-web-design/

Responsive Web Design, 2011 http://www.abookapart.com/products/responsive-web-design/

Responsive Architecture

Tristan Sterk via Creative Commons
http://commons.wikimedia.org/wiki/File:ResponsiveEnvelope1.jpg

Fallingwater © Clarissa Peterson

Fallingwater © Clarissa Peterson

Fallingwater © Clarissa Peterson

A Few Example Sites

Andersson-Wise Architects http://www.anderssonwise.com People (mobile
site) http://m.people.com Grey Goose http://www.greygoose.com

Smashing Magazine http://www.smashingmagazine.com Tattly http://tattly.com
AIDS.gov http://aids.gov

Two Approaches

1. Start from scratch 2.
Make an existing design more responsive

1. Start from scratch 2.
Make an existing design more responsive

1. Start from scratch 2.
Make an existing design more responsive

download files for hands-on exercise
here: http://clarissapeterson.com/files/dcww/ open in your text editor: style.css open in your browser: demo.html

If you’re doing this at
home, please note that each section of code is marked at the bottom of the slide with an example number that you can look for in your style.css file. Example 1 in style.css like this

Older Browsers: You need to
do some extra stuff to make all this work and we won’t have time to get to it today. (but make sure you learn it later)

Live site http://www.dcwebwomen.org

Demo site with streamlined code
(so it’s easier to see what you’re doing)

1. A flexible, grid-based layout
2. Flexible images and media 3. Media queries

1. A flexible, grid-based layout
2. Flexible images and media 3. Media queries

Flexible Typesetting

html, body, div, span, applet,
object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { ! margin: 0; ! padding: 0; ! border: 0; ! font-size: 100%; ! font: inherit; ! vertical-align: baseline; } http://meyerweb.com/eric/tools/css/reset/

html, body, div, span, applet,
object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { ! margin: 0; ! padding: 0; ! border: 0; ! font-size: 100%; ! font: inherit; ! vertical-align: baseline; } http://meyerweb.com/eric/tools/css/reset/

target ÷ context = result

.nav li a:link { !
color: #2b737a; ! text-decoration:none; ! font-size: 22px; ! font-weight:100; } Example 1 in style.css

target ÷ context = result
22px ÷ 16px = 1.375em

.nav li a:link { !
color: #2b737a; ! text-decoration:none; ! font-size: 1.375em; ! font-weight:100; } Example 1 in style.css

.nav li a:link { !
color: #2b737a; ! text-decoration:none; ! font-size: 1.375em; ! ! ! ! ! ! ! ! /* 22px / 16px */ ! font-weight:100; } Example 1 in style.css

h2 24px ÷ 16px =
1.5em h3 20px ÷ 16px = 1.25em p 14px ÷ 16px = .875em Example 2 in style.css

1. A flexible, grid-based layout
2. Flexible images and media 3. Media queries

target ÷ context = result
___px ÷ 1280px = __%

<div class="site"> ! ... </div>
Example 3 in style.css

.site { ! width: 1280px;
} Example 3 in style.css

.site { ! width: 100%;
/* 1280px / 1280px */ } Example 3 in style.css

<div id="heading"> ! ... </div>
Example 3 in style.css

#heading { ! background-color: #fff;
! width: 960px; ! margin: 1.5em auto; ! text-align:right; } Example 3 in style.css

#heading { ! background-color: #fff;
! width: 75%; ! margin: 1.5em auto; ! text-align:right; } Example 3 in style.css

<div id="promowrapper"> <img src="promoimage.jpg" alt="Attend
seminars, networking events, and more." /> </div> Example 4 in style.css

#promowrapper { ! margin: 0
auto; ! width: 960px; } Example 4 in style.css

#promowrapper { ! margin: 0
auto; ! width: 75%; } Example 4 in style.css

<div id="content"> ... </div> Example
4 in style.css

#content { ! background-color: #fff;
! width: 960px; ! margin: auto; } Example 4 in style.css

#content { ! background-color: #fff;
! width: 75%; ! margin: auto; } Example 4 in style.css

<div class="contentbox"> <h2>Who We Are</h2>
... </div> Example 4 in style.css

.contentbox { ! width: 300px;
! float:left; ! padding: 2em 30px 2em 0; } Example 4 in style.css

.contentbox { ! width: 31.25%;
! float:left; ! padding: 2em 30px 2em 0; } Example 4 in style.css

.contentbox { ! width: 31.25%;
! float:left; ! padding: 2em 30px 2em 0; } Example 4 in style.css

.contentbox { ! width: 31.25%;
! float:left; ! padding: 2em 3.125% 2em 0; } Example 4 in style.css

<div id="footercontent"> ... </div> Example
5 in style.css

#footercontent { ! width: 960px;
! margin: auto; ! color: #fff; } Example 5 in style.css

#footercontent { ! width: 75%;
! margin: auto; ! color: #fff; } Example 5 in style.css

1. A flexible, grid-based layout
2. Flexible images and media 3. Media queries

<div id="promowrapper"> <img src="promoimage.jpg" alt="..."
/> </div> #promowrapper { ! margin: 0 auto; ! width: 75%; } Example 4 in style.css

#promo img { ! margin:
2em 0; } Example 4 in style.css

#promo img { ! margin:
2em 0; ! max-width: 100%; } Example 4 in style.css

embed
object
video

1. A flexible, grid-based layout
2. Flexible images and media 3. Media queries

<link rel="stylesheet" href="style.css"
media=”print” />

h1 { color: #f00; }
p { color: #333; } @media print { ! h1 { color: #0f0; } ! p { color: #099; } }

h1 { color: #f00; }
p { color: #333; } @media print { ! h1 { color: #0f0; } ! p { color: #099; } }

h1 { color: #f00; }
p { color: #333; } @media print { ! h1 { color: #0f0; } ! p { color: #099; } }

h1 { color: #f00; }
p { color: #333; } @media print { ! h1 { color: #0f0; } ! p { color: #099; } }

h1 { color: #f00; }
p { color: #333; } @media print { ! h1 { color: #0f0; } ! p { color: #099; } }

h1 { color: #f00; }
p { color: #333; } @media print { ! h1 { color: #0f0; } ! p { color: #099; } }

@media screen { ! ...
}

@media screen and (min-width: 1024px)
{ ! ... }

@media screen and (max-width: 1024px)
{ ! ... }

@media screen and (min-width: 768px)
and (max-width: 1024px) { ! ... }

min-device-width: 1024px max-device-width: 1024px orientation:
landscape orientation: portrait device-aspect-ratio: 16/9 min-color-index: 256 min-resolution: 300dpi

@media screen and (max-width: 1100px)
{ ! #navbox { ! ! clear: left; ! ! padding-top: 0; ! ! text-align: center; ! } } Example 6 in style.css

@media screen and (max-width: 1100px)
{ ! #navbox { ! ! clear: left; ! ! padding-top: 0; ! ! text-align: center; ! } } Example 6 in style.css

@media screen and (max-width: 1100px)
{ ! #navbox { ! ! clear: left; ! ! padding-top: 0; ! ! text-align: center; ! } } Example 6 in style.css

@media screen and (max-width: 1100px)
{ ! #navbox { ! ! clear: left; ! ! padding-top: 0; ! ! text-align: center; ! } } Example 6 in style.css

@media screen and (max-width: 500px)
{ ! ... } Example 7 on style.css

@media screen and (max-width: 500px)
{ ! .nav li { ! ! display: block; ! ! margin-left: 0em; ! ! padding-bottom: 5px; ! } } Example 7 on style.css

@media screen and (max-width: 500px)
{ ! .nav li { ! ! display: block; ! ! margin-left: 0em; ! ! padding-bottom: 5px; ! } } Example 7 on style.css

@media screen and (max-width: 500px)
{ ! ... ! .logo { ! ! float: none; ! ! text-align: center; ! } } Example 7 on style.css

@media screen and (max-width: 500px)
{ ! ... ! .contentbox { ! ! width: 100%; ! ! float: none; ! ! padding: 1.5em 0 0 0; ! } } Example 7 on style.css

@media screen and (max-width: 500px)
{ ! ... ! .contentbox { ! ! width: 100%; ! ! float: none; ! ! padding: 1.5em 0 0 0; ! } } Example 7 on style.css

Some Other Things You Should
Know (very briefly)

Breakpoints

Standard Breakpoints Why to Use
Them Why Not to Use Them

Commonly-Used Breakpoints Device Type Width
Mobile phones (portrait) 320px Mobile phones (landscape) 480px 7” tablets (portrait) 600px 10” tablets (portrait) 768px 10” tablets (landscape), Monitors 1024px Wider monitors 1280px

What’s a Device Lab?

Clarissa Peterson via Creative Commons
(CC BY-NC-SA 2.0)

Device Lab DC
http://www.devicelabdc.com/

Mobile First

If you’re thinking about mobile:
responsive design isn’t the only thing you need to think about.

A mobile app should not
be the default choice. Only do it if it’s the best choice.

Responsive Workflow

Photoshop is for photos InDesign
is for design & typography

We are free of the
canvas

Content First

Q&A

Resources

Books Ethan Marcotte Responsive Web
Design (2011) http://www.abookapart.com/products/responsive-web-design/

Articles Responsive Web Design -
Ethan Marcotte (May 2010) http://www.alistapart.com/articles/responsive-web-design/ How to Approach a Responsive Design (The Boston Globe) - Tito Bottitta (Jan. 2012) http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/ 50 Fantastic Tools for Responsive Web Design - Denise Jacobs, Peter Gasston (Apr. 2012) http://www.netmagazine.com/features/50-fantastic-tools-responsive-web-design Design Process In The Responsive Age - Drew Clemens (May 2012) http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/ Making of: People Magazine's Responsive Mobile Website (July 2012) http://globalmoxie.com/blog/making-of-people-mobile.shtml The Top Responsive Web Design Problems and How to Avoid Them - James Young (Aug. 2012) http://www.netmagazine.com/features/top-responsive-web-design-problems-and-how-avoid-them

Websites @RWD links about responsive
design (Ethan Marcotte) https://twitter.com/RWD Future Friendly making things that are future-friendly http://futurefriend.ly/ Brad Frost blog that covers responsive design http://bradfrostweb.com/blog/ Mediaqueri.es inspirational websites using media queries and responsive web design http://mediaqueri.es/ Responsive Design Bookmarklet a handy tool for responsive design testing http://responsive.victorcoulon.fr/

Other Things You Asked About
Resources mentioned during Q&A. Thanks for all the great questions! Kristina Halvorson Content Strategy for the Web, Second Edition (2012) http://contentstrategy.com/ A List Apart http://www.alistapart.com/ PX to EM Conversion Made Simple http://pxtoem.com/

Not RWD DC Web Women
A professional organization of more than 3000 members located in the Washington, DC, area. Members are professional women, students and enthusiasts who specialize in web-related fields. http://www.dcwebwomen.org/ We Are All Awesome Be a role model: why there should be more female speakers at tech conferences. Resources on creating presentations, getting ideas, writing proposals, and finding conferences with open CFPs. http://weareallaweso.me/

Mount Rainier National Park. Clarissa
Peterson via Creative Commons (CC BY-NC-SA 2.0)

Thank You Clarissa Peterson clarissapeterson.com
cp@clarissapeterson.com @clarissa