• Save
Responsive Design
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Responsive Design

on

  • 57,520 views

 

Statistics

Views

Total Views
57,520
Views on SlideShare
48,574
Embed Views
8,946

Actions

Likes
504
Downloads
0
Comments
16

99 Embeds 8,946

http://www.splashnology.com 3854
http://pedagog.localdomain 796
http://digitalsynopsis.com 663
http://madebymany.com 321
http://www.creedinteractive.com 305
http://www.un-a-un.com 285
http://webwatching.eustema.it 284
http://joefrancisninal.info 242
http://www.vleerkatcreations.com 183
http://fred.tl 173
http://paper.li 166
http://jimmypad.com 124
http://www.wizda.in 121
http://designblog 99
http://neuestijl.com 87
http://www.conseilsmarketing.fr 85
http://www.bettiblue.com 84
http://webdesignerskit.blogspot.in 80
http://mag.splashnology.com 66
http://www.gatec.com.br 65
http://yellowroz-myhomework.blogspot.com 63
http://startthinking.posterous.com 62
http://gcre.ragedev 60
http://www.carbongraffiti.com 59
http://localhost 47
http://glueinnovation.posterous.com 46
http://multbit.kinghost.net 40
http://www.conseilsmarketing.com 39
http://dg-ujs.blogspot.mx 32
http://un-a-un.com 28
https://www.facebook.com 27
http://webdesignerskit.blogspot.com 27
http://pinterest.com 17
http://log.vikingkarwur.com 16
url_unknown 16
http://www.techgig.com 15
http://d.hatena.ne.jp 14
http://voyelle.tumblr.com 13
http://sumerator.blogspot.com 13
http://blog.websourcing.fr 12
http://twitter.com 11
https://twitter.com 11
https://madsack.instawiki.com 10
http://kalovskihost.com 9
http://www.twylah.com 8
http://share 8
http://us-w1.rockmelt.com 8
http://nloc.tumblr.com 8
http://www.slideshare.net 8
http://projects.techpolitica.com 7
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 16 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive Design Presentation 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