Responsive Design

68,037 views
66,281 views

Published on

Published in: Design, Technology
16 Comments
547 Likes
Statistics
Notes
No Downloads
Views
Total views
68,037
On SlideShare
0
From Embeds
0
Number of Embeds
40
Actions
Shares
0
Downloads
0
Comments
16
Likes
547
Embeds 0
No embeds

No notes for slide

Responsive Design

  1. DESIGNING FOR DESKTOP WEB + MOBILEResponsiveDesignMINNEBAR 2011
  2. Something is happening…
  3. Something is happening…
  4. Something is happening…
  5. (we’re screwed.)
  6. We need to movefrom prescribed design to responsive design.
  7. g  r  o  w  t  h    o  f  MOBILE WEBH A S   O U T P A C E D  8 X  gro wth   o f   d eskto p   web  Source: Luke Wroblewski, Mobile First presentation, An Event Apart Minneapolis, 2010Source: ITU, Mark Lipacis, Morgan Stanley Research
  8. g  r  o  w  t  h    o  f  MOBILE WEBH A S   O U T P A C E D  8 X  gro wth   o f   d eskto p   web  Source: Luke Wroblewski, Mobile First presentation, An Event Apart Minneapolis, 2010Source: ITU, Mark Lipacis, Morgan Stanley Research
  9. 15 in U S E   mobile internet everyday  Source: http://www.antennasoftware.com/new-research-shows-mobile-internet-usage-a-daily-habit
  10. in  the  next  4  years   MOBILE internet USAGE W I L L   I N C R E A S E     B Y     A     F A C T O R     O F   26Source: http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.pdf
  11. BUT…Responsive design is not mobile design!
  12. It is design for _______.
  13. It is flexible, device-independent design for the web.
  14. Rethink.
  15. > 1024 768 480
  16. According to Ethan Marcotte, Responsive Web Design is: A flexible grid (with flexible images) that incorporates media queries to create a responsive, adaptive layout.Source: Ethan Marcotte, A Dao of Flexibility presentation, An Event Apart Minneapolis, 2010
  17. Flexible Grids
  18. But those are fixed width.
  19. FLEXIBLE GRIDS part oneFlex your font.
  20. FLEXIBLE GRIDSFontsh2  p  
  21. FLEXIBLE GRIDSFonts body { font-size: 100%; line-height: 1.6; color: #333; }
  22. FLEXIBLE GRIDSFonts body { font-size: 100%; /* ~ 16px */ line-height: 1.6; color: #333; }
  23. FLEXIBLE GRIDSFontsh2  p  
  24. FLEXIBLE GRIDSFonts28px  14px  
  25. FLEXIBLE GRIDSFonts28px / 16px  14px / 16px  
  26. FLEXIBLE GRIDSFonts1.75  .875  
  27. FLEXIBLE GRIDSFonts h2 { font-size: 1.75em; /* 28px / 16px */ } p{ font-size: .875em; /* 14px / 16px */ }
  28. FLEXIBLE GRIDS part twoFlex your layout.
  29. FLEXIBLE GRIDSLayout•  Template Layout (CSS3)•  Floats (CSS2)
  30. Do you remember your HTML5?
  31. <header> <nav><section><footer>
  32. FLEXIBLE GRIDSHTML5 <header> <h1>…</h1> <nav> <ul> … </ul> </nav> </header> <section> … </section> <footer> … </footer>
  33. <h2> <p><figure>
  34. FLEXIBLE GRIDSHTML5 <section> <h2>…</h2> <p>…</p> <figure> … </figure> <figure> … </figure> … </section>
  35. <h2> <p><figure> <a> <img /> <figcaption /> </a></figure>
  36. FLEXIBLE GRIDSHTML5 <figure> <a href=“#”> <img /> <figcaption>…</figcaption> </a> </figure>
  37. 20px  300px  960px  
  38. FLEXIBLE GRIDSLayout section { width: 960px; }
  39. FLEXIBLE GRIDSLayout section { max-width: 960px; }
  40. FLEXIBLE GRIDSLayout figure { float: left; width: 300px; margin: 0 10px; }
  41. FLEXIBLE GRIDSLayout 300px / 960px = 0.3125 10px / 960px = 0.010416667
  42. FLEXIBLE GRIDSLayout 300px / 960px = 31.25% 10px / 960px = 1.0416667%
  43. FLEXIBLE GRIDSLayout figure { float: left; width: 300px; margin: 0 10px; }
  44. FLEXIBLE GRIDSLayout figure { float: left; width: 31.25%; /* 300px / 960px */ margin: 0 1.0416667%; }
  45. Flexible Media
  46. FLEXIBLE MEDIAFlexible Images img { max-width: 100% }
  47. FLEXIBLE MEDIAFlexible Videos video, object { max-width: 100% }
  48. ISSUE #1max-width in IE6
  49. FLEXIBLE MEDIAmax-width in IE6 img, video, object { width: 100% }
  50. ISSUE #2 windowsimage resizing
  51. FLEXIBLE MEDIAWindows Image Rendering vs.
  52. FLEXIBLE MEDIAWindows Image Rendering IE 7 and lower Firefox 2 and lower
  53. FLEXIBLE MEDIAWindows Image Rendering IE Proprietary CSS Filter: AlphaImageLoader()
  54. FLEXIBLE MEDIAWindows Image Rendering Ethan Marcotte did all the work for you….
  55. FLEXIBLE MEDIAWindows Image Rendering …just include some JavaScript. Instructions here: http://unstoppablerobotninja.com/entry/fluid-images
  56. ISSUE #3bandwidth
  57. FLEXIBLE MEDIADownloaded vs. Displayed
  58. FLEXIBLE MEDIADownloaded vs. Displayed highRes.png
  59. FLEXIBLE MEDIADownloaded vs. Displayed highRes.png lowRes.png
  60. FLEXIBLE MEDIADownloaded vs. Displayed Filament Group did all the work for you….
  61. FLEXIBLE MEDIADownloaded vs. Displayed …just include some JavaScript. Download here: https://github.com/filamentgroup/responsive-images
  62. FLEXIBLE MEDIADownloaded vs. Displayed <img src=“highRes.png” />
  63. FLEXIBLE MEDIADownloaded vs. Displayed <img src=“lowRes.r.png” data-fullsrc=“highRes.png” /> HTML5 custom attribute
  64. Media Queries
  65. MEDIA QUERIESMedia Types <link rel=“stylesheet” media=“screen” href=“screen.css” />
  66. MEDIA QUERIESMedia Types <link rel=“stylesheet” media=“print” href=“print.css” />
  67. MEDIA QUERIESMedia Types <link rel=“stylesheet” media=“handheld” href=“handheld.css” />
  68. MEDIA QUERIESMedia Queries <link rel=“stylesheet” media=“screen and (max-width: 320px)” href=“screen.css” /> @media screen and (max-width: 320px) { … }
  69. MEDIA QUERIESMedia Queries <link rel=“stylesheet” media=“screen and (min-width: 800px)” href=“screen.css” /> @media screen and (min-width: 800px) { … }
  70. MEDIA QUERIESMedia Featureswidth heightdevice-width device-heightorientation aspect-ratiodevice-aspect-ratio colorcolor-index monochromeresolution scangrid
  71. We can adapt our designto specific range of devices
  72. We can adapt our designto specific range of devices without changing the content
  73. MEDIA QUERIESLaptop
  74. MEDIA QUERIESiPad – Portrait @media screen and (device-max-width: 768px)
  75. MEDIA QUERIESiPhone – Landscape @media screen and (max-device-width: 480px)
  76. ISSUE #1 browsercompatibility
  77. MEDIA QUERIESBrowser Compatibility " IE 9    IE 8, 7, 6 " Opera 9.5+ " Opera Mobile " Safari 3+    Safari 2 " Firefox 3.5+    Firefox 1, 2 " Chrome
  78. MEDIA QUERIESBrowser Compatibility Wouter van der Graaf did all the work for you….
  79. MEDIA QUERIESBrowser Compatibility …just include some JavaScript. Download here: http://code.google.com/p/css3-mediaqueries-js
  80. MEDIA QUERIESBrowser Compatibility " IE 9  IE 8, 7, 6 " Opera 9.5+ " Opera Mobile " Safari 3+  Safari 2 " Firefox 3.5+  Firefox 1, 2 " Chrome
  81. ISSUE #2mobile resizing
  82. FLEXIBLE MEDIAMobile Resizing vs.
  83. FLEXIBLE MEDIAMobile Resizing <meta name="viewport" content="width=device-width; initial-scale=1.0">
  84. Create great experiences.
  85. DESIGNING FOR DESKTOP WEB + MOBILEThanks.mike@livefront.com@mikebollinger
  86. THE EXAMPLE USED IN THIS PRESENTATION:http://livefront.com/responsive-designA LIST APART ARTICLE (Ethan Marcotte):http://alistapart.com/articles/responsive-web-design/BOOK (Ethan Marcotte):http://abookapart.com/products/responsive-web-designMEDIA QUERIES TEMPLATE (Andy Clarke):https://gist.github.com/798569

×