Introduction to Responsive Web Design

20,975 views

Published on

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/

Published in: Design, Technology, Education
3 Comments
18 Likes
Statistics
Notes
  • Really great responsive website design PPT 2016. http://www.slideshare.net/bestwebsitesreviews/web-ad-banner-design-bestwebsitesreviewscom
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 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
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • too great always http://giaunhanh.mobi
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
20,975
On SlideShare
0
From Embeds
0
Number of Embeds
699
Actions
Shares
0
Downloads
224
Comments
3
Likes
18
Embeds 0
No embeds

No notes for slide
  • \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

    1. Introduction toResponsive Web Design Clarissa Peterson @clarissa
    2. a workshop for the DC Web Women Code(Her) Series August 14, 2012
    3. Responsive Web Design:
    4. Responsive Web Design:A collection of techniques that allow yourwebsite to respond to the device that it isbeing viewed on.
    5. 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.
    6. http://www.bostonglobe.com/
    7. http://www.bostonglobe.com/
    8. http://www.bostonglobe.com/
    9. http://www.bostonglobe.com/
    10. 1. A flexible, grid-based layout2. Flexible images and media3. Media queries
    11. 1. A flexible, grid-based layout2. Flexible images and media3. Media queries
    12. 1. A flexible, grid-based layout2. Flexible images and media3. Media queries
    13. 1. A flexible, grid-based layout2. Flexible images and media3. Media queries
    14. HTML
    15. The first website. http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
    16. <p>...</p> <h1>...</h1><a href=””>...</a>
    17. <hp1>...</hp1> (highlighting)
    18. <blink>...</blink>
    19. Control:HTML tables spacer gifs
    20. Cascading Style Sheets (CSS)
    21. HTML Content CSS Presentation
    22. John Kannenberg via Creative Commons http://flic.kr/p/9E7tqh
    23. Brendan Gates via Creative Commons http://flic.kr/p/dvX1J
    24. Curtis Palmer via Creative Commons http://flic.kr/p/wyPiC
    25. Brad Frost via Creative Commons http://flic.kr/p/cfQwL7
    26. Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)
    27. Paulo Fierro via Creative Commons http://flic.kr/p/ae8Nnr
    28. 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/
    29. Responsive Web Design, 2011 http://www.abookapart.com/products/responsive-web-design/
    30. Responsive Architecture
    31. Tristan Sterk via Creative Commons http://commons.wikimedia.org/wiki/File:ResponsiveEnvelope1.jpg
    32. Fallingwater © Clarissa Peterson
    33. Fallingwater © Clarissa Peterson
    34. Fallingwater © Clarissa Peterson
    35. A Few Example Sites
    36. Andersson-Wise Architectshttp://www.anderssonwise.com People (mobile site) http://m.people.com Grey Goose http://www.greygoose.com
    37. Smashing Magazinehttp://www.smashingmagazine.com Tattly http://tattly.com AIDS.gov http://aids.gov
    38. Two Approaches
    39. 1. Start from scratch2. Make an existing design more responsive
    40. 1. Start from scratch2. Make an existing design more responsive
    41. 1. Start from scratch2. Make an existing design more responsive
    42. download files for hands-on exercise here: http://clarissapeterson.com/files/dcww/open in your text editor: style.cssopen in your browser: demo.html
    43. 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
    44. 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)
    45. Live site http://www.dcwebwomen.org
    46. Demo site with streamlined code (so it’s easier to see what you’re doing)
    47. 1. A flexible, grid-based layout2. Flexible images and media3. Media queries
    48. 1. A flexible, grid-based layout2. Flexible images and media3. Media queries
    49. Flexible Typesetting
    50. 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/
    51. 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/
    52. target ÷ context = result
    53. .nav li a:link {! color: #2b737a;! text-decoration:none;! font-size: 22px;! font-weight:100;}Example 1 in style.css
    54. target ÷ context = result22px ÷ 16px = 1.375em
    55. .nav li a:link {! color: #2b737a;! text-decoration:none;! font-size: 1.375em;! font-weight:100;}Example 1 in style.css
    56. .nav li a:link {! color: #2b737a;! text-decoration:none;! font-size: 1.375em; !! ! ! ! ! ! ! /* 22px / 16px */! font-weight:100;}Example 1 in style.css
    57. h2 24px ÷ 16px = 1.5emh3 20px ÷ 16px = 1.25emp 14px ÷ 16px = .875emExample 2 in style.css
    58. 1. A flexible, grid-based layout2. Flexible images and media3. Media queries
    59. target ÷ context = result___px ÷ 1280px = __%
    60. <div class="site">! ...</div>Example 3 in style.css
    61. .site {! width: 1280px;}Example 3 in style.css
    62. .site {! width: 100%; /* 1280px / 1280px */}Example 3 in style.css
    63. <div id="heading">! ...</div>Example 3 in style.css
    64. #heading {! background-color: #fff;! width: 960px;! margin: 1.5em auto;! text-align:right;}Example 3 in style.css
    65. #heading {! background-color: #fff;! width: 75%;! margin: 1.5em auto;! text-align:right;}Example 3 in style.css
    66. <div id="promowrapper"> <img src="promoimage.jpg" alt="Attend seminars, networking events, and more." /></div>Example 4 in style.css
    67. #promowrapper {! margin: 0 auto;! width: 960px;}Example 4 in style.css
    68. #promowrapper {! margin: 0 auto;! width: 75%;}Example 4 in style.css
    69. <div id="content"> ...</div>Example 4 in style.css
    70. #content {! background-color: #fff;! width: 960px;! margin: auto;}Example 4 in style.css
    71. #content {! background-color: #fff;! width: 75%;! margin: auto;}Example 4 in style.css
    72. <div class="contentbox"> <h2>Who We Are</h2> ...</div>Example 4 in style.css
    73. .contentbox {! width: 300px;! float:left;! padding: 2em 30px 2em 0;}Example 4 in style.css
    74. .contentbox {! width: 31.25%;! float:left;! padding: 2em 30px 2em 0;}Example 4 in style.css
    75. .contentbox {! width: 31.25%;! float:left;! padding: 2em 30px 2em 0;}Example 4 in style.css
    76. .contentbox {! width: 31.25%;! float:left;! padding: 2em 3.125% 2em 0;}Example 4 in style.css
    77. <div id="footercontent"> ...</div>Example 5 in style.css
    78. #footercontent {! width: 960px;! margin: auto;! color: #fff;}Example 5 in style.css
    79. #footercontent {! width: 75%;! margin: auto;! color: #fff;}Example 5 in style.css
    80. 1. A flexible, grid-based layout2. Flexible images and media3. Media queries
    81. <div id="promowrapper"><img src="promoimage.jpg" alt="..." /></div>#promowrapper {! margin: 0 auto;! width: 75%;}Example 4 in style.css
    82. #promo img {! margin: 2em 0;}Example 4 in style.css
    83. #promo img {! margin: 2em 0;! max-width: 100%;}Example 4 in style.css
    84. embedobjectvideo
    85. 1. A flexible, grid-based layout2. Flexible images and media3. Media queries
    86. <link rel="stylesheet" href="style.css"media=”print” />
    87. h1 { color: #f00; }p { color: #333; }@media print {! h1 { color: #0f0; }! p { color: #099; }}
    88. h1 { color: #f00; }p { color: #333; }@media print {! h1 { color: #0f0; }! p { color: #099; }}
    89. h1 { color: #f00; }p { color: #333; }@media print {! h1 { color: #0f0; }! p { color: #099; }}
    90. h1 { color: #f00; }p { color: #333; }@media print {! h1 { color: #0f0; }! p { color: #099; }}
    91. h1 { color: #f00; }p { color: #333; }@media print {! h1 { color: #0f0; }! p { color: #099; }}
    92. h1 { color: #f00; }p { color: #333; }@media print {! h1 { color: #0f0; }! p { color: #099; }}
    93. @media screen {! ...}
    94. @media screen and (min-width: 1024px) {! ...}
    95. @media screen and (max-width: 1024px) {! ...}
    96. @media screen and (min-width: 768px) and(max-width: 1024px) {! ...}
    97. min-device-width: 1024pxmax-device-width: 1024px orientation: landscape orientation: portraitdevice-aspect-ratio: 16/9 min-color-index: 256 min-resolution: 300dpi
    98. @media screen and (max-width: 1100px) {! #navbox {! ! clear: left;! ! padding-top: 0;! ! text-align: center;! }}Example 6 in style.css
    99. @media screen and (max-width: 1100px) {! #navbox {! ! clear: left;! ! padding-top: 0;! ! text-align: center;! }}Example 6 in style.css
    100. @media screen and (max-width: 1100px) {! #navbox {! ! clear: left;! ! padding-top: 0;! ! text-align: center;! }}Example 6 in style.css
    101. @media screen and (max-width: 1100px) {! #navbox {! ! clear: left;! ! padding-top: 0;! ! text-align: center;! }}Example 6 in style.css
    102. @media screen and (max-width: 500px) {! ...}Example 7 on style.css
    103. @media screen and (max-width: 500px) {! .nav li {! ! display: block;! ! margin-left: 0em;! ! padding-bottom: 5px;! }}Example 7 on style.css
    104. @media screen and (max-width: 500px) {! .nav li {! ! display: block;! ! margin-left: 0em;! ! padding-bottom: 5px;! }}Example 7 on style.css
    105. @media screen and (max-width: 500px) {! ...! .logo {! ! float: none;! ! text-align: center;! }}Example 7 on style.css
    106. @media screen and (max-width: 500px) {! ...! .contentbox {! ! width: 100%;! ! float: none;! ! padding: 1.5em 0 0 0;! }}Example 7 on style.css
    107. @media screen and (max-width: 500px) {! ...! .contentbox {! ! width: 100%;! ! float: none;! ! padding: 1.5em 0 0 0;! }}Example 7 on style.css
    108. Some Other Things You Should Know (very briefly)
    109. Breakpoints
    110. Standard Breakpoints Why to Use ThemWhy Not to Use Them
    111. Commonly-Used Breakpoints Device Type WidthMobile phones (portrait) 320pxMobile phones (landscape) 480px7” tablets (portrait) 600px10” tablets (portrait) 768px10” tablets (landscape), Monitors 1024pxWider monitors 1280px
    112. What’s a Device Lab?
    113. Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)
    114. Device Lab DChttp://www.devicelabdc.com/
    115. Mobile First
    116. If you’re thinking about mobile: responsive design isn’t the only thing you need to think about.
    117. A mobile app should not be the default choice.Only do it if it’s the best choice.
    118. Responsive Workflow
    119. Photoshop is for photosInDesign is for design & typography
    120. We are free of the canvas
    121. Content First
    122. Q&A
    123. Resources
    124. BooksEthan MarcotteResponsive Web Design (2011)http://www.abookapart.com/products/responsive-web-design/
    125. 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
    126. 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/
    127. 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/
    128. 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/
    129. Mount Rainier National Park. Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)
    130. Thank You Clarissa Petersonclarissapeterson.comcp@clarissapeterson.com @clarissa

    ×