Introduction to

Responsive Web Design

Clarissa Peterson@clarissa

a workshop for theDC Web WomenCode(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 tablesspacer gifs

Cascading Style Sheets (CSS)

HTML

CSS

Content

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

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

Responsive web design offers us a way forward, finally allowing us to “design for the ebb and flow of things.”

- Ethan Marcotte

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 Architectshttp://www.anderssonwise.com

People (mobile site)http://m.people.com

Grey Goosehttp://www.greygoose.com

Smashing Magazinehttp://www.smashingmagazine.com

Tattlyhttp://tattly.com

AIDS.govhttp://aids.gov

Two Approaches

1. Start from scratch

2. Make an existing designmore responsive

1. Start from scratch

2. Make an existing designmore responsive

1. Start from scratch

2. Make an existing designmore 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

Example 1 in style.css like this

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.

Older Browsers:

You need to do some extra stuffto 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

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/

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;}

target ÷ context = result

Example 1 in style.css

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

target ÷ context = result

22px ÷ 16px = 1.375em

Example 1 in style.css

.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 2 in style.css

h2 24px ÷ 16px = 1.5emh3 20px ÷ 16px = 1.25emp 14px ÷ 16px = .875em

1. A flexible, grid-based layout

2. Flexible images and media

3. Media queries

target ÷ context = result

___px ÷ 1280px = __%

Example 3 in style.css

<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 4 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 5 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; }

1. A flexible, grid-based layout

2. Flexible images and media

3. Media queries

Example 4 in style.css

<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%;}

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: 1024pxmax-device-width: 1024px

orientation: landscapeorientation: portrait

device-aspect-ratio: 16/9

min-color-index: 256

min-resolution: 300dpi

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: 1100px) { ! #navbox { ! ! clear: left;! ! padding-top: 0;! ! text-align: center;! }}

Example 7 on 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; ! }}

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 designisn’t the only thing

you need to think about.

A mobile app should notbe 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 MarcotteResponsive Web Design (2011)http://www.abookapart.com/products/responsive-web-design/

ArticlesResponsive 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@RWDlinks about responsive design (Ethan Marcotte)https://twitter.com/RWD

Future Friendlymaking things that are future-friendlyhttp://futurefriend.ly/

Brad Frostblog that covers responsive designhttp://bradfrostweb.com/blog/

Mediaqueri.esinspirational websites using media queries and responsive web designhttp://mediaqueri.es/

Responsive Design Bookmarkleta handy tool for responsive design testinghttp://responsive.victorcoulon.fr/

Other Things You Asked About

Resources mentioned during Q&A. Thanks for all the great questions!

Kristina HalvorsonContent Strategy for the Web, Second Edition (2012)http://contentstrategy.com/

A List Aparthttp://www.alistapart.com/

PX to EM Conversion Made Simplehttp://pxtoem.com/

Not RWD

DC Web WomenA 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 AwesomeBe 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 Petersonclarissapeterson.com

cp@clarissapeterson.com@clarissa