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

1. View Slide

2. THE GOOD
   THE BAD
   AND THE UGLY
   …with Responsive Web Design.
   

   View Slide

3. Hej!
   

   View Slide

4. I am @MarcoBarbosa
   

   View Slide

5. We are @14islands
   

   View Slide

6. View Slide

7. …Responsive Web Design?
   

   View Slide

8. There are more devices
   connected than people
   in the world today.
   http://www.bizjournals.com/prnewswire/press_releases/2014/10/06/NY30877
   

   View Slide

9. View Slide

10. View Slide

11. View Slide

12. “
    It’s about designing across an
    ever-widening array of devices,
    browsers, and whatever-the-
    heck-comes-next.
    - Ethan Marcotte
    

    View Slide

13. THE GOOD
    

    View Slide

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
    

    View Slide

15. Content needs to flow
    LIKE WATER
    

    View Slide

16. C O N T E N T
    

    View Slide

17. EMBRANCE IT
    

    View Slide

18. keep the conversation going
    COLLABORATION
    

    View Slide

19. UX Design Code
    

    View Slide

20. UX Design
    Code
    

    View Slide

21. THE BAD
    

    View Slide

22. BAD IMPLEMENTATIONS
    CAN GET PRETTY BAD
    

    View Slide

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
    

    View Slide

24. Caring for
    PERFORMANCE IS CRUCIAL
    

    View Slide

25. RESPONSIVE ALSO MEANS
    PERFORMANCE
    

    View Slide

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/
    

    View Slide

27. MEASURE IT
    webtest.org
    

    View Slide

28. the importance of
    MOBILE FIRST
    

    View Slide

29. View Slide

30. View Slide

31. View Slide

32. IGNORING MOBILE FIRST WILL
    PROBABLY BITE YOU LATER
    

    View Slide

33. THE UGLY
    

    View Slide

34. RESPONSIVE IMAGES
    

    View Slide

35. “
    There’s three topics I avoid
    discussing: religion, politics,
    and RESPONSIVE IMAGES.
    http://bradfrost.com/blog/post/responsive-images/
    - Brad Frost
    

    View Slide

36. “
    62% of web traffic today
    are images.
    http://httparchive.org/interesting.php#bytesperpage
    

    View Slide

37. WHAT CAN WE
    DO TODAY
    

    View Slide

38. srcset, sizes and
    http://alistapart.com/article/responsive-images-in-practice
    

    View Slide

39. SERVICES CAN
    HELP YOU TOO
    

    View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide

44. HOW WE ROLL
    RESPONSIVE.IO
    

    View Slide

45. CASE STUDIES
    Putting it all together
    

    View Slide

46. TICTAIL
    

    View Slide

47. View Slide

48. Lazy loading.
    (Like, a LOT)
    

    View Slide

49. Can’t hog the page.
    

    View Slide

50. one way:
    SIMPLY DELAYING IT
    

    View Slide

51. Load me first!
    Not yet!
    Not yet!
    

    View Slide

52. Not yet!
    Not yet!
    Load me first!
    

    View Slide

53. Load me!
    Load me!
    Load me first!
    

    View Slide

54. another way:
    DICTATED BY SCROLL
    

    View Slide

55. loaded loaded
    loaded
    

    View Slide

56. loaded loaded
    loaded
    Visible area
    

    View Slide

57. loaded loaded
    loaded
    loading! loading!
    not loaded
    Visible area
    Load area
    

    View Slide

58. loaded loaded
    loaded
    loaded loaded
    loading!
    

    View Slide

59. DIFFERENT BREAKPOINTS
    DIFFERENT LOOKS
    

    View Slide

60. View Slide

61. View Slide

62. View Slide

63. View Slide

64. View Slide

65. ELASTICA
    

    View Slide

66. View Slide

67. FIXED BUT
    ACTUALLY FLUID
    

    View Slide

68. width=“450”
    height=“500”>
    

    View Slide

69. width=“450”
    height=“500”>
    looks fixed, right?
    

    View Slide

70. .canvas-selector {
    position: absolute;
    width: 100%;
    height: 100%;
    }
    .canvas-parent-selector {
    padding-bottom: 100%; /*1:1*/
    height: 0;
    }
    

    View Slide

71. now it’s fluid!
    .canvas-selector {
    position: absolute;
    width: 100%;
    height: 100%;
    }
    .canvas-parent-selector {
    padding-bottom: 100%; /*1:1*/
    height: 0;
    }
    

    View Slide

72. .canvas-selector {
    position: absolute;
    width: 100%;
    height: 100%;
    }
    .canvas-parent-selector {
    padding-bottom: 100%; /*1:1*/
    height: 0;
    }
    and with ratio
    

    View Slide

73. SANTA TRACKER
    

    View Slide

74. View Slide

75. We love
    SVGS
    

    View Slide

76. View Slide

77. width="1034.3px"
    height="131px"
    viewBox="0 0 1034.3 131"
    >
    

    View Slide

78. a different approach
    SCALING
    

    View Slide

79. 100%
    

    View Slide

80. 100%
    80%
    

    View Slide

81. View Slide

82. View Slide

83. View Slide

84. View Slide

85. View Slide

86. View Slide

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 */
    }
    }
    

    View Slide

88. 100%
    80%
    70%
    55%
    40%
    35%
    

    View Slide

89. THE RECIPE
    Conclusion
    

    View Slide

90. EMBRACE
    THE METHODOLOGY
    

    View Slide

91. EMBRACE
    THE METHODOLOGY
    DO GOOD
    IMPLEMENTATION
    

    View Slide

92. EMBRACE
    THE METHODOLOGY
    DO GOOD
    IMPLEMENTATION
    CARE FOR
    PERFORMANCE
    

    View Slide

93. Tack!
    

    View Slide