Responsive Web Design: A Deep-Dive Crash Course

1,536 views

Published on

Responsive Web Design is a very hot topic in web development. Using the web via devices will soon exceed using it via a desktop or laptop. As developers, we need to make complete, rich web experiences for all devices. We need to be responsive. This presentation is a deep-dive crash course on just that.

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,536
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Responsive Web Design: A Deep-Dive Crash Course

  1. 1. RESPONSIVEWEBDESIGNMatt Smith / @AllThingsSmittyA DEEP-DIVE CRASH COURSE
  2. 2. ?
  3. 3. 2007
  4. 4. http://bit.ly/QnmeZ4
  5. 5. http://bit.ly/qo0qVk“Everyone once in a while arevolutionary product comesalong that changes everything.”
  6. 6. http://bit.ly/12sLpv8
  7. 7. http://bit.ly/12sLpv8
  8. 8. http://thebea.st/rq9jCj
  9. 9. http://bit.ly/17VwlLf
  10. 10. http://bit.ly/XvuRWT0204060801001201402007 2008 2009 2010 2011 2012Global iPhone sales(in million units)
  11. 11. http://bit.ly/XvuRWT01002003004005002009 2010 2011 2012Global Android smartphone sales(in million units)
  12. 12. http://bit.ly/XvuRWT0501001502002503003504004505002007 2008 2009 2010 2011 2012WindowsRIMSymbianiPhoneAndroidGlobal smartphone sales(in million units)
  13. 13. http://read.bi/10SDQm4
  14. 14. http://read.bi/MvOtBk0.010.020.030.040.050.060.0April 2009 May 2010 May 2011 April 2012Percentage of U.S. mobile web use
  15. 15. http://bit.ly/zE1zgpThe penetration of desktop and laptopownership in the U.S. is the same today asit was in 2007.
  16. 16. mobile-only sites
  17. 17. click for the “full desktop site”
  18. 18. Mobile web use will continue to surge overthe next 5 years at a rate of 66% each year.http://bit.ly/nqdf
  19. 19. http://bit.ly/17zP3rQ
  20. 20. http://bit.ly/197Ma09
  21. 21. http://bit.ly/17zP3rQ
  22. 22. http://bit.ly/109yJsn
  23. 23. http://slidesha.re/MrioZs
  24. 24. http://slidesha.re/MrioZs
  25. 25. http://bit.ly/16HYLdy
  26. 26. http://bit.ly/16I2V5e
  27. 27. http://bit.ly/10ZlqkC
  28. 28. MAY252010
  29. 29. Responsive Web Design
  30. 30. Fluid Layout + CSS3 Media Queries+ Fluid Images/Media = RWD
  31. 31. FLUIDLAYOUT
  32. 32. ?
  33. 33. Fancy Markup + CSS = Grid System
  34. 34. Grid Systems 101
  35. 35. @grid-types {.fixed {width: 960px; /* pixel-based */}.fluid {width: 75%; /* percent-based */}.elastic {width: 60em; /* proportion-based */}.hybrid {height: 1.25em; /* combination */margin-left: 6.191495%;}}
  36. 36. @grid-types {.fixed {width: 960px; /* pixel-based */}.fluid {width: 75%; /* percent-based */}.elastic {width: 60em; /* proportion-based */}.hybrid {height: 1.25em; /* combination */margin-left: 6.191495%;}}
  37. 37. @grid-types {.fixed {width: 960px; /* pixel-based */}.fluid {width: 75%; /* percent-based */}.elastic {width: 60em; /* proportion-based */}.hybrid {height: 1.25em; /* combination */margin-left: 6.191495%;}}
  38. 38. @grid-types {.fixed {width: 960px; /* pixel-based */}.fluid {width: 75%; /* percent-based */}.elastic {width: 60em; /* proportion-based */}.hybrid {height: 1.25em; /* combination */margin-left: 6.191495%;}}
  39. 39. the web is not fixed width
  40. 40. http://bit.ly/10AcqLs
  41. 41. <div class="container"><div class="grid"><div class="one-third-column">.container {margin: 5em;padding: 0 1em;max-width: 85%;}.grid { padding: 1em 0 5em; }.one-third-column { width: 33.333333333%;}
  42. 42. target fluidity
  43. 43. http://bit.ly/YnNo5Y
  44. 44. (target pixel value / context pixel value) *100 = dimension value in percentage
  45. 45. .one-third-column {margin: 0 3.317535545023697% 0 0; /*21px / 633px */width: 31.1216429699842%; /* 197px /633px */}h1 {width: calc(1/6 * 100%); /*16.66666666666667px */}
  46. 46. http://bit.ly/ww3TNX
  47. 47. CSS3MEDIAQUERIES
  48. 48. <link rel="stylesheet" type="text/css"href="main.css" media="screen" /><link rel="stylesheet" type="text/css"href="print.css" media="print" />
  49. 49. <link rel="stylesheet" type="text/css"media="screen and (max-device-width:480px)" href="small.css" />
  50. 50. “Breakpoints”
  51. 51. (max-device-width: 480px)@media only screen and (max-device-width:480px) {.column {float: none;}}breakpoint
  52. 52. @mediaonly screenand (min-device-pixel-ratio: 2)and (min-width: 320px),only screenand (min-resolution: 192dpi)and (min-resolution: 2dppx) {/* small screens, Retina display */.column {float: none;}}
  53. 53. @media only screen and (min-width: 320px){/* small screens */}@media only screen and (min-width: 700px){/* medium screens */}@media only screen and (min-width:1300px) {/* large screens */}
  54. 54. don‟t rely on device dimensions
  55. 55. http://bit.ly/LZo4uS
  56. 56. “It‟s not about what happens at thebreakpoints, it‟s about what happensbetween the breakpoints.”– JEREMY KEITHhttp://bit.ly/IyLnvL
  57. 57. FLUIDIMAGES/MEDIA
  58. 58. img[class*="scale"] {max-width: 100%;height: auto;}.video iframe,.video object,.video embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
  59. 59. Responsive Images
  60. 60. <picture><source media="(min-width: 40em)"srcset="big.jpg 1x, big-hd.jpg 2x"><source srcset="small.jpg 1x, small-hd.jpg 2x"><img src="small.jpg" alt=""></picture>
  61. 61. http://bit.ly/Ska86f
  62. 62. testing across devices
  63. 63. http://bit.ly/159ImPj
  64. 64. http://bit.ly/GVXkNu
  65. 65. http://bit.ly/11Z5Rq0
  66. 66. http://bit.ly/p325bW
  67. 67. disruption will only accelerate
  68. 68. http://bit.ly/XR8O7U
  69. 69. one web
  70. 70. http://bit.ly/YjCtKylisten to your peers
  71. 71. MYTHSABOUTRWD
  72. 72. “People want to do different things onmobile, so one adaptive experience is a badidea.”http://bit.ly/10KHnOd
  73. 73. “Responsive Web Design produces badperformance.”http://bit.ly/Uh5czr
  74. 74. “Responsive sites/apps require more codeand more testing.”
  75. 75. By 2015, there will be one mobile phone forevery person on Earth.Google Internal Data
  76. 76. More than half your customers won‟trecommend your business to a friend if youhave a bad mobile site.http://bit.ly/qCcpl3
  77. 77. http://bit.ly/Yd0LmjWhen someone searches and finds yourmobile site:• 61% of them will call you• 59% will visit you• 70% of mobile users compare prices• 65% read product reviews• 50% of mobile searches have lead topurchases
  78. 78. this is just the tip of the iceberghttp://slidesha.re/14HG8RJ
  79. 79. http://slidesha.re/14HG8RJ
  80. 80. remember…
  81. 81. Responsive Web Design is not mobile design
  82. 82. Responsive Web Design does not have totake more time, or cost more money
  83. 83. Responsive Web Design is worth it
  84. 84. “Responsive Web Design rocks. It‟s likeMotörhead playing „Ace of Spades‟ atStonehenge…on an asteroid.”– BRUCE LAWSONFuture Insights Live, April 30, 2013
  85. 85. Responsive Web Designhttp://alistapart.com/article/responsive-web-design +http://www.abookapart.com/products/responsive-web-designImplementing Responsive Web Designhttp://www.implementingresponsivedesign.com/Adaptive Web Designhttp://easy-readers.net/books/adaptive-web-design/A New Responsive Design Processhttp://www.netmagazine.com/features/new-responsive-design-process
  86. 86. Matt Smith / @AllThingsSmitty

×