Responsive Web Design

6,164 views

Published on

Do your websites adapt to the device or screen on which they're being viewed? Do they accommodate viewing on a smart phone as elegantly as on a 1920-pixel wide monitor? Or a 5000px monitor? Or a netbook?

Responsive Design is the answer. It's a technique that employs flexible grids, fluid layouts, and most importantly - CSS3 media queries that let you change how things are laid out on the screen depending on the screen size (and many other factors), dynamically.

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,164
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
178
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide
  • Prediction: by 2014 90% of web devices will be mobile
  • Show example of Amscan.org
  • Responsive Web Design

    1. 1. Responsive Web Design Fort Collins Internet Professionals August 12, 2010
    2. 2. When life was simple Flickr: Jean-Lou Dupont
    3. 3. 1280 x 800 Photo: Steve Rhodes 1280 x 800 Flickr: goodrob13
    4. 4. 1280 x 800 Photo: Steve Rhodes 16 : 9 Photo: Steve Rhodes
    5. 5. 1280 x 800 Photo: Steve Rhodes Netbook 8.9” screen Flickr: ziaek
    6. 6. Title Many screens Flickr: aranarth
    7. 7. Title More is better 5120 x 1600 Flickr: jochenWolters
    8. 8. Title Flickr: photographer 2006 Smart Phones Flickr: barnoid
    9. 9. Title Flickr: photographer 2007 Smart Phones Flickr: PowerupMobile.com
    10. 10. Title Flickr: photographer And then came…
    11. 11. Title Flickr: photographer The One.
    12. 12. Title Flickr: photographer Copyright: Fox Studios
    13. 13. Title Flickr: photographer Flickr: bandita
    14. 14. Title Flickr: photographer January 9, 2007 Flickr: shapeshift
    15. 15. Title Flickr: photographer 2008 Smart Phones Flickr: midnightglory
    16. 16. Title Flickr: photographer 2009 Smart Phones Flickr: lalunablanca
    17. 17. Title Flickr: photographer 2009: Me Flickr: Spartacus007
    18. 18. Does Mobile Matter? <ul><li>Mobile internet adoption has outpaced desktop internet adoption by eight times </li></ul><ul><ul><li>http://www.morganstanley.com/institutional/techresearch/internet_ad_trends102009.html </li></ul></ul><ul><li>AT&T, the exclusive carrier for Apple's iPhone, has seen a 4,932% increase in mobile traffic data in the past three years </li></ul><ul><ul><li>http://www.lukew.com/ff/entry.asp?933 </li></ul></ul><ul><li>Smartphone sales will surpass worldwide PC sales by the end of 2011 </li></ul><ul><ul><li>http://www.pcworld.com/article/171380/ </li></ul></ul>
    19. 19. Flickr: Gravitywave
    20. 20. Title Flickr: photographer Innovation & Transition
    21. 21. Title Flickr: photographer 2010 iPad – 3 million sold in 80 days Flickr: JaredEarle
    22. 22. Title Flickr: photographer Oh yeah, it doesn’t run Flash Flickr: JaredEarle
    23. 23. Title Flickr: photographer iPhone 4 – 960 x 640 @ 326 ppi “Retina Display” Flickr: Yutaka Tsutano
    24. 24. Title Flickr: photographer Android, BlackBerry Flickr: Johan Larsson, dusk-photography
    25. 25. Title Flickr: photographer 2010 Many Screens Flickr: AndreasSchepers
    26. 26. Flickr: Malingering
    27. 27. Flickr: Beni Ishaque Luthor
    28. 28. We can rise above it <ul><li>Consolidation </li></ul><ul><li>Web browsers are the most standards-compliant we’ve ever experienced </li></ul><ul><ul><li>Google Chrome: Webkit </li></ul></ul><ul><ul><li>Safari: Webkit </li></ul></ul><ul><ul><li>Firefox: Gecko </li></ul></ul><ul><ul><li>IE8 is pretty darn good </li></ul></ul><ul><ul><li>IE7 has issues, but manageable </li></ul></ul><ul><ul><li>IE6 < 10% usage (finally!) </li></ul></ul>
    29. 29. Mobile browsers converging <ul><li>Android: Chrome: Webkit </li></ul><ul><li>iOS: Safari: Webkit </li></ul><ul><li>Blackberry: </li></ul><ul><ul><li>Proprietary browser is default </li></ul></ul><ul><ul><li>Opera Mobile available: Presto </li></ul></ul><ul><ul><ul><li>On par with Webkit </li></ul></ul></ul><ul><ul><li>Blackberry 6 will use Webkit </li></ul></ul><ul><ul><ul><li>http://devblog.blackberry.com/2010/08/developing-new-blackberry-browser/ </li></ul></ul></ul>
    30. 30. Title Flickr: photographer Einstein’s quest for the Unified Field Flickr: Thomas Thomas
    31. 31. The Unified (web) Field? <ul><li>While devices vary widely in </li></ul><ul><ul><li>Physical dimensions </li></ul></ul><ul><ul><li>Pixel dimensions </li></ul></ul><ul><ul><li>Resolution </li></ul></ul><ul><li>Consolidation in browsers means </li></ul><ul><ul><li>We can start using HTML5 and CSS3 now </li></ul></ul><ul><ul><li>The foundation is now there for a unified approach to displaying content effectively on myriad devices </li></ul></ul>
    32. 32. Responsive Web Design is <ul><ul><li>“ A flexible grid (with flexible images ) </li></ul></ul><ul><ul><li>that incorporates media queries to </li></ul></ul><ul><ul><li>create a responsive, adaptive layout.” </li></ul></ul><ul><ul><li>- Ethan Marcotte </li></ul></ul>
    33. 33. Responsive Web Design <ul><li>A flexible grid </li></ul><ul><ul><li>Sizing in proportions </li></ul></ul><ul><ul><ul><li>% rather than px, creates the fluid layout </li></ul></ul></ul><ul><ul><ul><li>images too: flexible images so they are fluid too </li></ul></ul></ul><ul><li>CSS3 Media Queries </li></ul><ul><ul><li>Conditional styling </li></ul></ul><ul><ul><li>Allows you to target specific viewport sizes, device sizes and much more </li></ul></ul><ul><ul><li>Jeffrey Zeldman: “It’s what some of us were going for with ‘liquid’ web design back in the 1990s, only it doesn’t suck.” </li></ul></ul>
    34. 34. Where do you start? <ul><li>Layout width </li></ul><ul><ul><li>Pick a default reference design </li></ul></ul><ul><ul><ul><li>User research </li></ul></ul></ul><ul><ul><li>For our example </li></ul></ul><ul><ul><ul><li>We’ll target at 1024px wide browser, but our fluid grid will accommodate a range of screens </li></ul></ul></ul><ul><ul><ul><li>Content area will be 930px wide (in the context of a 1024px viewport) </li></ul></ul></ul>
    35. 35. Keep in mind the context <ul><li>Target ÷ Context = Result </li></ul><ul><li>.outer { </li></ul><ul><li>width: 90.82%; /* 930px / 1024px */ </li></ul><ul><li>} </li></ul>
    36. 36. Full width blocks <ul><li>#masthead, #nav, #home_intro { </li></ul><ul><li>width: 100%; /* 930px / 930px */ </li></ul><ul><li>} </li></ul>
    37. 37. Sizing in % rather than px <ul><li>.intro_content { </li></ul><ul><li>width: 59.35%; </li></ul><ul><li>/* 552px / 930px = 59.35% */ </li></ul><ul><li>margin and padding too </li></ul><ul><li>padding: 50px 30px 25px 25px; </li></ul><ul><li>Becomes: </li></ul><ul><li>padding: 50px 3.23% 25px 2.69%; </li></ul><ul><li>/* 30px / 930px, 25px / 930px */ </li></ul><ul><li>} </li></ul>
    38. 38. What about images? <ul><li>img { max-width: 100%; } </li></ul><ul><li>Important: in the HTML, don’t specify height and width attributes on images </li></ul><ul><li>Can apply this to img, video, and object </li></ul>
    39. 39. Media Types <ul><li><link rel=&quot;stylesheet&quot; media=&quot;screen&quot; href=&quot;c.css&quot; /> </li></ul><ul><li><link rel=&quot;stylesheet&quot; media=”print&quot; href=&quot;c.css&quot; /> </li></ul>
    40. 40. CSS3 Media Queries… <ul><li><link rel=&quot;stylesheet&quot; media=&quot;screen and (max-width:340px)” href=“c.css” /> </li></ul><ul><li>@media screen and (max-width:340px) { ... } </li></ul><ul><li>@media screen and (max-width:340px) { ... } </li></ul>
    41. 41. CSS3 Media Queries <ul><li>min-width (refers to viewport dimensions) </li></ul><ul><li>min-device-width refers to display dimensions of the device (maybe safe for identifying the device, iPad, iPhone, etc.) </li></ul><ul><li>can select based on dpi or dpcm, not just width </li></ul><ul><li>can select based on color depth </li></ul>
    42. 42. More Media Queries <ul><li>http://www.w3.org/TR/css3-mediaqueries/ </li></ul><ul><li>width </li></ul><ul><li>height </li></ul><ul><li>device-width </li></ul><ul><li>device-height </li></ul><ul><li>orientation </li></ul><ul><li>aspect-ratio </li></ul><ul><li>device-aspect-ratio </li></ul><ul><li>color </li></ul><ul><li>color-index </li></ul><ul><li>monochrome </li></ul><ul><li>resolution </li></ul><ul><li>scan </li></ul><ul><li>grid </li></ul>
    43. 43. Browser Support <ul><li>Opera 9.5+ </li></ul><ul><li>Firefox 3.5+ </li></ul><ul><li>Safari 3 </li></ul><ul><li>Chrome </li></ul><ul><li>Mobile Webkit </li></ul><ul><li>Opera Mobile ~ </li></ul>
    44. 44. A magic bullet <ul><li>code.google.com/p/css3-mediaqueries-js/ </li></ul><ul><li>IE8 and below </li></ul><ul><li>Firefox 1 & 2 </li></ul><ul><li>Safari 2 </li></ul>
    45. 45. Design: Factors to Consider <ul><li>Range of devices with which your content will be viewed </li></ul><ul><li>How to layout content effectively for different platforms </li></ul><ul><li>Base image size may not be based on your default targeted layout. </li></ul><ul><li>Have a plan for long-line lengths on large displays </li></ul>
    46. 46. Resources <ul><li>The article that started it all, by Ethan Marcotte: </li></ul><ul><ul><li>http://www.alistapart.com/articles/responsive-web-design/ </li></ul></ul><ul><li>Fluid Images by Ethan Marcotte: </li></ul><ul><ul><li>http://unstoppablerobotninja.com/entry/fluid-images </li></ul></ul><ul><li>IE8 and below Media Queries fix: </li></ul><ul><ul><li>http://code.google.com/p/css3-mediaqueries-js/ </li></ul></ul><ul><li>IE6 min/max-width hack: </li></ul><ul><ul><li>http://www.cameronmoll.com/archives/000892.html </li></ul></ul><ul><li>Fluid Grids by Ethan Marcotte: </li></ul><ul><ul><li>http://www.alistapart.com/articles/fluidgrids/ </li></ul></ul><ul><li>Media Queries reference, list of Media Query selectors available: </li></ul><ul><ul><li>http://www.w3.org/TR/css3-mediaqueries/ </li></ul></ul><ul><li>Responsive Typesetting: </li></ul><ul><ul><li>http://www.alistapart.com/d/responsive-web-design/ex/ex-article.html </li></ul></ul>
    47. 47. A few examples <ul><li>http://www.zeldman.com/2010/06/23/responsive-design-is-the-new-black/ </li></ul>
    48. 48. Resources <ul><li>Notes and links to resources: </li></ul><ul><ul><li>http://typewith.me/fcip-rwd </li></ul></ul>
    49. 49. Where to find me <ul><li>@ron_z – follow me on Twitter </li></ul><ul><li>[email_address] </li></ul><ul><li>codegeek.net </li></ul><ul><li>SocialMediaPilots.com </li></ul><ul><li>EinsteinAndSockMonkey.com </li></ul><ul><ul><li>@EinsteinMonkey </li></ul></ul><ul><ul><li>A new web design/dev/ux podcast with Steve Martin @CleverCubed </li></ul></ul><ul><li>IgniteFortCollins.com and @IgniteFC </li></ul><ul><li>The Fort Collins Hive: HiveFC.com </li></ul>
    50. 50. Many Thanks to: <ul><li>Ethan Marcotte – for the well-crafted articles describing and demonstrating Responsive Web Design, Fluid Grids, and Fluid Images. Thanks for the excellent talk on the topic at An Event Apart Minneapolis in July 2010 too. </li></ul><ul><ul><li>http://unstoppablerobotninja.com/ </li></ul></ul><ul><li>Luke Wroblewski for the info and stats about mobile trends and techniques during your talk at AEA Minneapolis and on the web </li></ul><ul><ul><li>http://www.lukew.com/ ff/ </li></ul></ul>
    51. 51. Responsive Web Design Fort Collins Internet Professionals August 12, 2010

    ×