• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Introduction to Responsive Web Design
 

Introduction to Responsive Web Design

on

  • 6,001 views

A hands-on workshop for DC Web Women on August 14, 2012. ...

A hands-on workshop for DC Web Women on August 14, 2012.

Read more about the workshop and a summary of what we talked about on my blog: http://www.clarissapeterson.com/2012/08/responsive-web-design/

Statistics

Views

Total Views
6,001
Views on SlideShare
5,561
Embed Views
440

Actions

Likes
9
Downloads
98
Comments
2

13 Embeds 440

http://www.iphone-entreprise.com 351
http://lanyrd.com 33
https://si0.twimg.com 25
https://twimg0-a.akamaihd.net 7
http://www.cgauiwtalk.com 7
http://www.linkedin.com 5
http://buildcmswebsite.com 3
http://ck.2012.1.metallica.epistema.local 2
http://www.clarissapeterson.com 2
http://bundlr.com 2
http://secure.bundlr.com 1
http://a0.twimg.com 1
https://twitter.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Creator Shadow is the most professional and affordable web development & design company. World's best Intuitive web site interfaces and user-friendliness are the hallmark of our company.Responsive Web Design
    Are you sure you want to
    Your message goes here
    Processing…
  • too great always http://giaunhanh.mobi
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Introduction to Responsive Web Design Introduction to Responsive Web Design Presentation Transcript

  • 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/
  • http://www.bostonglobe.com/
  • http://www.bostonglobe.com/
  • http://www.bostonglobe.com/
  • 1. A flexible, grid-based layout2. Flexible images and media3. Media queries
  • 1. A flexible, grid-based layout2. Flexible images and media3. Media queries
  • 1. A flexible, grid-based layout2. Flexible images and media3. Media queries
  • 1. A flexible, grid-based layout2. Flexible images and media3. 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 wayforward, finally allowing us to “design forthe ebb and flow 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
  • Fallingwater © Clarissa Peterson
  • 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
  • 1. Start from scratch2. Make an existing design more responsive
  • 1. Start from scratch2. Make an existing design more responsive
  • download files for hands-on exercise here: http://clarissapeterson.com/files/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 file.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)
  • 1. A flexible, grid-based layout2. Flexible images and media3. Media queries
  • 1. A flexible, grid-based layout2. Flexible images and media3. 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 = 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
  • 1. A flexible, grid-based layout2. Flexible images and media3. 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 layout2. Flexible images and media3. 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
  • embedobjectvideo
  • 1. A flexible, grid-based layout2. Flexible images and media3. 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: 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: 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 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 Workflow
  • Photoshop is for photosInDesign is for design & typography
  • We are free of the canvas
  • Content First
  • Q&A
  • 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 fields.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 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.comcp@clarissapeterson.com @clarissa