Introduction to Responsive Web Design

Introduction toResponsive 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 yourwebsite to respond to the device that it isbeing viewed on.

Responsive Web Design:A collection of techniques that allow yourwebsite to respond to the device that it isbeing viewed on.This allows all users to have an optimal experiencewithout creating separate sites for different devices.

http://www.bostonglobe.com/

1. A ﬂexible, grid-based layout2. Flexible images and media3. Media queries

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

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

Control:HTML tables spacer gifs

Cascading Style Sheets (CSS)

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 wayforward, ﬁnally allowing us to “design forthe ebb and ﬂow of things.” - Ethan Marcottehttp://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

A Few Example Sites

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

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

Two Approaches

1. Start from scratch2. Make an existing design more responsive

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

If you’re doing this at home, please note that eachsection of code is marked at the bottom of the slide withan example number that you can look for in yourstyle.css ﬁle.Example 1 in style.css like this

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)

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/

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 = result22px ÷ 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.5emh3 20px ÷ 16px = 1.25emp 14px ÷ 16px = .875emExample 2 in style.css

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

<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

embedobjectvideo

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: landscape orientation: portraitdevice-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: 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) {! ...! .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

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

Breakpoints

Standard Breakpoints Why to Use ThemWhy Not to Use Them

Commonly-Used Breakpoints Device Type WidthMobile phones (portrait) 320pxMobile phones (landscape) 480px7” tablets (portrait) 600px10” tablets (portrait) 768px10” tablets (landscape), Monitors 1024pxWider monitors 1280px

What’s a Device Lab?

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

Device Lab DChttp://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 Workﬂow

Photoshop is for photosInDesign is for design & typography

We are free of the canvas

Content First

Resources

BooksEthan 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-designDesign Process In The Responsive Age - Drew Clemens (May 2012)http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/Making of: People Magazines Responsive Mobile Website (July 2012)http://globalmoxie.com/blog/making-of-people-mobile.shtmlThe 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/RWDFuture 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 AboutResources 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 RWDDC 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 ﬁelds.http://www.dcwebwomen.org/We Are All AwesomeBe a role model: why there should be more female speakers at tech conferences. Resources oncreating 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 Petersonclarissapeterson.comcp@clarissapeterson.com @clarissa

http://www.iphone-entreprise.com	349
http://lanyrd.com	29
https://si0.twimg.com	25
https://twimg0-a.akamaihd.net	7
http://www.linkedin.com	5
http://ck.2012.1.metallica.epistema.local	2
http://a0.twimg.com	1
http://bundlr.com	1

Introduction to Responsive Web Design

by Clarissa Peterson on Aug 14, 2012

Accessibility

Categories

Upload Details

Usage Rights

8 Embeds 419

Statistics

Introduction to Responsive Web Design Presentation Transcript