Your SlideShare is downloading. ×
0
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive Design

57,439

Published on

Published in: Design, Technology
16 Comments
513 Likes
Statistics
Notes
No Downloads
Views
Total Views
57,439
On Slideshare
0
From Embeds
0
Number of Embeds
37
Actions
Shares
0
Downloads
0
Comments
16
Likes
513
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×