The good, the bad and the ugly with responsive web design

Responsive Web Design has been around for a while and it’s worth taking a step back to see what a successful responsive project actually requires.

Transcript

2. THE GOOD THE BAD AND THE UGLY …with Responsive Web Design.
3. Hej!
4. I am @MarcoBarbosa
5. We are @14islands
7. …Responsive Web Design?
8. There are more devices connected than people in the world today. http://www.bizjournals.com/prnewswire/press_releases/2014/10/06/NY30877
12. “ It’s about designing across an ever-widening array of devices, browsers, and whatever-the- heck-comes-next. - Ethan Marcotte
13. THE GOOD
14. “ Get your content ready to go anywhere because it’s going to go everywhere. - http://bradfrost.com/blog/web/for-a-future-friendly-web/ - Brad Frost
15. Content needs to flow LIKE WATER
16. C O N T E N T
17. EMBRANCE IT
18. keep the conversation going COLLABORATION
19. UX Design Code
20. UX Design Code
21. THE BAD
22. BAD IMPLEMENTATIONS CAN GET PRETTY BAD
23. “ Shoot me now…responsive design has seemingly become confused with an opportunity to reduce performance rather than improve it. - Stephanie Rieger - https://twitter.com/stephanierieger/status/245240465572642816
24. Caring for PERFORMANCE IS CRUCIAL
25. RESPONSIVE ALSO MEANS PERFORMANCE
26. “ 85% of mobile users expect pages to load as fast or faster than they load on the desktop. - http://blog.radware.com/applicationdelivery/applicationaccelerationoptimization/2014/01/55-web-performance-stats-youll-want-to-know/
27. MEASURE IT webtest.org
28. the importance of MOBILE FIRST
32. IGNORING MOBILE FIRST WILL PROBABLY BITE YOU LATER
33. THE UGLY
34. RESPONSIVE IMAGES
35. “ There’s three topics I avoid discussing: religion, politics, and RESPONSIVE IMAGES. http://bradfrost.com/blog/post/responsive-images/ - Brad Frost
36. “ 62% of web traffic today are images. http://httparchive.org/interesting.php#bytesperpage
37. WHAT CAN WE DO TODAY
38. srcset, sizes and <picture> http://alistapart.com/article/responsive-images-in-practice
39. SERVICES CAN HELP YOU TOO
44. HOW WE ROLL RESPONSIVE.IO
45. CASE STUDIES Putting it all together
46. TICTAIL
48. Lazy loading. (Like, a LOT)
49. Can’t hog the page.
50. one way: SIMPLY DELAYING IT
51. Load me first! Not yet! Not yet!
52. Not yet! Not yet! Load me first!
53. Load me! Load me! Load me first!
54. another way: DICTATED BY SCROLL
55. loaded loaded loaded
56. loaded loaded loaded Visible area
57. loaded loaded loaded loading! loading! not loaded Visible area Load area
58. loaded loaded loaded loaded loaded loading!
59. DIFFERENT BREAKPOINTS DIFFERENT LOOKS
65. ELASTICA
67. FIXED BUT ACTUALLY FLUID
68. <canvas width=“450” height=“500”>
69. <canvas width=“450” height=“500”> looks fixed, right?
70. .canvas-selector { position: absolute; width: 100%; height: 100%; } .canvas-parent-selector { padding-bottom: 100%; /*1:1*/ height: 0; }
71. now it’s fluid! .canvas-selector { position: absolute; width: 100%; height: 100%; } .canvas-parent-selector { padding-bottom: 100%; /*1:1*/ height: 0; }
72. .canvas-selector { position: absolute; width: 100%; height: 100%; } .canvas-parent-selector { padding-bottom: 100%; /*1:1*/ height: 0; } and with ratio
73. SANTA TRACKER
75. We love SVGS
77. <svg width="1034.3px" height="131px" viewBox="0 0 1034.3 131" >
78. a different approach SCALING
79. 100%
80. 100% 80%
87. @media (min-width: 1000px) and (max-width: 1200px) { .scene { transform: scale(0.8); width: 125%; /* 100/80 = 1.25 * 100 */ height: 125%; /* 100/80 = 1.25 * 100 */ } }
88. 100% 80% 70% 55% 40% 35%
89. THE RECIPE Conclusion
90. EMBRACE THE METHODOLOGY
91. EMBRACE THE METHODOLOGY DO GOOD IMPLEMENTATION
92. EMBRACE THE METHODOLOGY DO GOOD IMPLEMENTATION CARE FOR PERFORMANCE
93. Tack!