Responsive Web Design: A Deep-Dive Crash Course

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.

Transcript

1. RESPONSIVEWEBDESIGN Matt Smith / @AllThingsSmitty A DEEP-DIVE CRASH COURSE
2. ?
4. http://bit.ly/QnmeZ4
5. http://bit.ly/qo0qVk “Everyone once in a while a revolutionary product comes along that changes everything.”
6. http://bit.ly/12sLpv8
7. http://bit.ly/12sLpv8
8. http://thebea.st/rq9jCj
9. http://bit.ly/17VwlLf
10. http://bit.ly/XvuRWT 0 20 40 60 80 100 120 140 2007 2008 2009 2010 2011 2012 Global iPhone sales (in million units)
11. http://bit.ly/XvuRWT 0 100 200 300 400 500 2009 2010 2011 2012 Global Android smartphone sales (in million units)
12. http://bit.ly/XvuRWT 0 50 100 150 200 250 300 350 400 450 500 2007 2008 2009 2010 2011 2012 Windows RIM Symbian iPhone Android Global smartphone sales (in million units)
13. http://read.bi/10SDQm4
14. http://read.bi/MvOtBk 0.0 10.0 20.0 30.0 40.0 50.0 60.0 April 2009 May 2010 May 2011 April 2012 Percentage of U.S. mobile web use
15. http://bit.ly/zE1zgp The penetration of desktop and laptop ownership in the U.S. is the same today as it was in 2007.
16. mobile-only sites
18. click for the “full desktop site”
19. Mobile web use will continue to surge over the next 5 years at a rate of 66% each year. http://bit.ly/nqdf
20. http://bit.ly/17zP3rQ
21. http://bit.ly/197Ma09
22. http://bit.ly/17zP3rQ
23. http://bit.ly/109yJsn
24. http://slidesha.re/MrioZs
25. http://slidesha.re/MrioZs
26. http://bit.ly/16HYLdy
27. http://bit.ly/16I2V5e
28. http://bit.ly/10ZlqkC
29. MAY252010
30. Responsive Web Design
31. Fluid Layout + CSS3 Media Queries + Fluid Images/Media = RWD
32. FLUIDLAYOUT
33. ?
34. Fancy Markup + CSS = Grid System
35. Grid Systems 101
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. @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. @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. @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%; } }
40. the web is not fixed width
41. http://bit.ly/10AcqLs
43. <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.3333333%; }
44. target fluidity
45. http://bit.ly/YnNo5Y
46. (target pixel value / context pixel value) * 100 = dimension value in percentage
47. .one-third-column { margin: 0 3.317535545023697% 0 0; /* 21px / 633px */ width: 31.1216429699842%; /* 197px / 633px */ } h1 { width: calc(1/6 * 100%); /* 16.66666666666667% */ }
48. http://bit.ly/ww3TNX
49. CSS3MEDIAQUERIES
50. <link rel="stylesheet" type="text/css" href="main.css" media="screen"> <link rel="stylesheet" type="text/css" href="print.css" media="print">
51. <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="small.css">
52. “Breakpoints”
53. (max-device-width: 480px) @media only screen and (max-device-width: 480px) { .column { float: none; } } breakpoint
54. @media only screen and (min-device-pixel-ratio: 2) and (min-width: 320px), only screen and (min-resolution: 192dpi) and (min-resolution: 2dppx) { /* small screens, Retina display */ .column { float: none; } }
55. @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 */ }
56. don’t rely on device dimensions
57. http://bit.ly/LZo4uS
58. “It’s not about what happens at the breakpoints, it’s about what happens between the breakpoints.” – JEREMY KEITH http://bit.ly/IyLnvL
59. FLUIDIMAGES/MEDIA
60. img[class*="scale"] { max-width: 100%; height: auto; } .video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
61. Responsive Images
62. <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>
63. http://bit.ly/Ska86f
64. testing across devices
65. http://bit.ly/159ImPj
66. http://bit.ly/GVXkNu
67. http://bit.ly/11Z5Rq0
68. http://bit.ly/p325bW
69. disruption will only accelerate
71. http://bit.ly/XR8O7U
72. one web
73. http://bit.ly/YjCtKy listen to your peers
74. MYTHSABOUTRWD
75. “People want to do different things on mobile, so one adaptive experience is a bad idea.” http://bit.ly/10KHnOd
76. “Responsive Web Design produces bad performance.” http://bit.ly/Uh5czr
77. “Responsive sites/apps require more code and more testing.”
78. By 2015, there will be one mobile phone for every person on Earth. Google Internal Data
79. More than half your customers won’t recommend your business to a friend if you have a bad mobile site. http://bit.ly/qCcpl3
80. http://bit.ly/Yd0Lmj When someone searches and finds your mobile 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 to purchases
81. this is just the tip of the iceberg http://slidesha.re/14HG8RJ
82. http://slidesha.re/14HG8RJ
83. remember…
84. Responsive Web Design is not mobile design
85. Responsive Web Design does not have to take more time, or cost more money
86. Responsive Web Design is worth it
87. “Responsive Web Design rocks. It’s like Motörhead playing ‘Ace of Spades’ at Stonehenge…on an asteroid.” – BRUCE LAWSON Future Insights Live, April 30, 2013
88. Responsive Web Design http://alistapart.com/article/responsive-web-design + http://www.abookapart.com/products/responsive-web-design Implementing Responsive Web Design http://www.implementingresponsivedesign.com/ Adaptive Web Design http://easy-readers.net/books/adaptive-web-design/ A New Responsive Design Process http://www.netmagazine.com/features/new-responsive-design-process
89. Matt Smith / @AllThingsSmitty