Introduction toResponsive Web Design

version 2.0

Clarissa Peterson@clarissa

a workshop for theDC Web WomenCode(Her) Series

September 11, 2012

1. What is responsive web design

2. Where it came from

3. Example sites

4. Hands-on demonstration

5. Other things you should know

6. Q&A

Responsive Web Design

Responsive Web Design

Responsive Web Design

A collection of techniques that allowyour website to respond to the device

that it is being viewed on.

Responsive Web Design

A collection of techniques that allowyour 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

HTML

Markup Language

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

Designing for one canvas.

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

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

Designing for unlimited canvases?

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

The web is free from the physical restraints of the canvas

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 http://www.abookapart.com/products/responsive-web-design/

Responsive Architecture

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

It’s easy to build a houseon flat land with four walls.

© Clarissa Peterson

Work around the environment.

© Clarissa Peterson

Think about design differently.

© Clarissa Peterson

A website with a responsivedesign is no longer just a

picture on a canvas.

A Few Examplesof Responsive Design

Smashing Magazinehttp://www.smashingmagazine.com

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

United Pixelworkershttp://www.unitedpixelworkers.com/

World Wildlife Fundhttp://worldwildlife.org/

Stuff & Nonsensehttp://www.stuffandnonsense.co.uk/

Emeril’s Restaurantshttp://www.emerilsrestaurants.com/

Andersson-Wise Architectshttp://www.anderssonwise.com

Federal Government: AIDS.govhttp://aids.gov

WordPress Theme: Twenty Twelvehttp://twentytwelvedemo.wordpress.com/

Two Approaches

1. Start from scratch

2. Make an existing designmore responsive

download files for hands-on exercise here: 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:

Some of this won’t work in older browsers, so you’ll need to do some

extra stuff to make it work.

(read the book....)

1. A flexible, grid-based layout

2. Flexible images and media

3. Media queries

Columns provide structure.

http://www.bostonglobe.com/

target ÷ context = result

target ÷ context = result

___px ÷ 1280px = __%

(but you don’t actually needto remember the formula)

Example 1 in style.css

<div class="site">! ...</div>

Example 1 in style.css

.site { ! width: 1280px;}

Example 1 in style.css

.site { ! width: 100%; }

Example 2 in style.css

<div id="heading">! ...</div>

Example 2 in style.css

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

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

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

Example 3 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 id=”content”> <div class="contentbox"> <h2>Who We Are</h2>

...

</div>

...

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

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

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

Example 3 in style.css

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

Example 3 in style.css

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

Don’t set the width and heightattributes of the image

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

@media screen {! ...}

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

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

min-device-width: 00pxmax-device-width: 00px

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 { ! !! !! !! }}

Example 6 in style.css

@media screen and (max-width: 1100px) { ! #navbox { ! ! clear: left;! !! !! }}

Example 6 in style.css

@media screen and (max-width: 1100px) { ! #navbox { ! ! clear: left;! ! padding-top: 0;! !! }}

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) { ! .nav li { ! ! ! !! !! }}

Example 7 on style.css

@media screen and (max-width: 500px) { ! .nav li { ! ! display: block; ! !! !! }}

Example 7 on style.css

@media screen and (max-width: 500px) { ! .nav li { ! ! display: block; ! ! margin-left: 0; ! ! 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%; ! ! ! ! ! }}

Example 7 on style.css

@media screen and (max-width: 500px) {

! ...

! .contentbox { ! ! width: 100%; ! ! float: none; ! ! padding: 25px 0 0; ! }}

Breakpoints

(where the design breaks)

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

But what happens whenthere are new devices?

Break when the design tells you to.

Options:

Options:Ignore Mobile?

Options:Ignore Mobile?

Separate Mobile Site

Options:Ignore Mobile?

Separate Mobile Site

Native Mobile App

Options:Ignore Mobile?

Separate Mobile Site

Native Mobile App

Responsive Design

Your boss saying you needa mobile app is not a good

reason to make a mobile app.

Mobile First

Start from the smallest screen,determine which parts of the designare truly necessary, and make those

the basis of your design.

Mobile first = better userexperience across devices

Mobile-Only Users

Consider bandwidth

Older Browsers:

Give them default CSS that they can understand.

Device Testing(if you don’t have devices)

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

Test early, test often

Test at Various Widths

tools such as:

resizemybrowser.com

quirktools.com/screenfly/

Use a Mobile Emulator

such as:

mobilephoneemulator.com

Smartphones

Feature Phones

Tablets

Touch Interaction

Desktop Browsers

Mobile Browsers

Device Lab DC

devicelabdc.com

Responsive Process

How to explain responsivedesign to (internal/external) clients

The design won’t look thesame on every browser/device

Static comps aren’t enough

Style Tiles

Style Tilesfonts, colors, interface elements

Style Tilesfonts, colors, interface elements

communicate the essence of a visual brand for the web

Style Tiles via Creative Commons http://styletil.es/

Style Tileshelp form a common visual

language between thedesigners and the stakeholders

Style Tiles via Creative Commons http://styletil.es/

Photoshop is for photos

InDesign is for design & typography

Design

Develop

Design doesn’t endwhen development begins

Content First

Users aren’t coming to yoursite because it’s pretty,

they’re coming for the content.

Responsive Design:We are free of the canvas.

Q&A

Resources

Books

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

Luke WroblewskiMobile First (2011)http://www.abookapart.com/products/mobile-first

ArticlesResponsive Web Design - Ethan Marcotte (May 2010)http://www.alistapart.com/articles/responsive-web-design/

How to Approach a Responsive Design (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

3 Types of Solutions To Work With Responsive Images - Steven Bradley (July 2012)http://www.vanseodesign.com/web-design/responsive-images/

More ArticlesThe 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

Presidential Smackdown Edition: Separate Mobile Website Vs. Responsive Website - Brad Frost (Aug. 2012)http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/

Responsive Design Case Study (South Tees Hospitals NHS Foundation Trust) - Matt Berridge (Aug. 2012)http://builtbyboon.com/blog/responsive-design-case-study

MiscellaneousSomeone asked how I measure things on the screen:

MeasureIt (Firefox add-on)https://addons.mozilla.org/en-US/firefox/addon/measureit/

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/

Other Information

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. Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)

Thank You

Clarissa Petersonclarissapeterson.com

cp@clarissapeterson.com@clarissa