Introduction to Responsive Web Design

Introduction to
Responsive Web Design

Clarissa Peterson
@clarissa

a workshop for the
DC Web Women
Code(Her) Series

August 14, 2012

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.

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

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

<hp1>...</hp1>

(highlighting)

Control:

HTML tables
spacer gifs

HTML Content
CSS Presentation

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

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

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

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

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

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

Responsive web design offers us a way
forward, ﬁnally allowing us to “design for
the ebb and ﬂow of things.”

- Ethan Marcotte

http://www.alistapart.com/articles/responsive-web-design/

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

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

Fallingwater © Clarissa Peterson

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

1. Start from scratch

2. Make an existing design
more responsive

download ﬁles for hands-on exercise here:
http://clarissapeterson.com/ﬁles/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 ﬁle.

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)

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/

.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;
! font-size: 1.375em;
! font-weight:100;
}


.nav li a:link {
! color: #2b737a;
! font-size: 1.375em; !
! ! ! ! ! ! ! /* 22px / 16px */
! font-weight:100;
}


h2 24px ÷ 16px = 1.5em
h3 20px ÷ 16px = 1.25em
p 14px ÷ 16px = .875em


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

.site {
! width: 1280px;
}


.site {
! width: 100%;
/* 1280px / 1280px */
}


#heading {
! background-color: #fff;
! width: 960px;
! margin: 1.5em auto;
! text-align:right;
}


#heading {
! width: 75%;
! margin: 1.5em auto;
! text-align:right;
}


#promowrapper {
! margin: 0 auto;
! width: 960px;
}


#promowrapper {
! margin: 0 auto;
! width: 75%;
}


#content {
! width: 960px;
! margin: auto;
}


#content {
! width: 75%;
! margin: auto;
}


.contentbox {
! width: 300px;
! float:left;
! padding: 2em 30px 2em 0;
}


.contentbox {
! width: 31.25%;
! float:left;
! padding: 2em 30px 2em 0;
}


.contentbox {
! width: 31.25%;
! float:left;
! padding: 2em 3.125% 2em 0;
}


#footercontent {
! width: 960px;
! margin: auto;
! color: #fff;
}


#footercontent {
! width: 75%;
! margin: auto;
! color: #fff;
}


<div id="promowrapper">
<img src="promoimage.jpg" alt="..." />
</div>

#promowrapper {
! margin: 0 auto;
! width: 75%;
}


#promo img {
! margin: 2em 0;
}


#promo img {
! margin: 2em 0;
! max-width: 100%;
}


h1 { color: #f00; }
p { color: #333; }

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

@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

! #navbox {
! ! clear: left;
! ! padding-top: 0;
! ! text-align: center;
! }
}



! ...

}

Example 7 on style.css

! .nav li {
! ! display: block;
! ! margin-left: 0em;
! ! padding-bottom: 5px;
! }
}



! ...

! .logo {
! ! float: none;
! ! text-align: center;
! }
}



! ...

! .contentbox {
! ! width: 100%;
! ! float: none;
! ! padding: 1.5em 0 0 0;
! }
}


Some Other Things You Should Know
(very brieﬂy)

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

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

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.

Photoshop is for photos

InDesign is for design & typography

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 ﬁelds.
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 ﬁnding 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

Introduction to Responsive Web Design

In this document