Progressive Enhancement with Modernizr

Some things about stuff.

Transcript

1. GREETINGS FROM
   BROOKLYN.
   10.20.2013 | @matthew_carver
   

   View Slide

2. 10.20.2013 | @matthew_carver
   PROGRESSIVE
   ENHANCEMENT
   WITH MODERNIZR
   CSSDEVCONF
   

   View Slide

3. A Little About Me
   MATTHEW CARVER
   Technology Director
   @matthew_carver
   STATS:
   Texas Ex-Patriot
   Currently live in NYC with my wife and dog
   Author of “The Responsive Web”
   

   View Slide

4. 1
   THERE’S A PROBLEM
   

   View Slide

5. There aren’t enough
   media queries.
   

   View Slide

6. IF THIS IS TABLET?
   

   View Slide

7. AND
   THIS
   IS
   MOBILE
   

   View Slide

8. FPO
   Text
   WHAT
   IS THIS?
   

   View Slide

9. FPO
   FPO
   OR THIS?
   

   View Slide

10. Screen width is a fixed commodity
    and the primary consideration in
    most responsive designs.
    

    View Slide

11. There is more to being
    “device agnostic” than
    the size of your screen.
    

    View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. @font-face
    

    View Slide

28. @font-face
    background-size
    

    View Slide

29. @font-face
    background-size
    border-image
    

    View Slide

30. @font-face
    background-size
    border-image
    box-shadow
    

    View Slide

31. @font-face
    background-size
    border-image
    box-shadow
    rgba()
    

    View Slide

32. @font-face
    background-size
    border-image
    box-shadow
    rgba()
    text-shadow
    

    View Slide

33. @font-face
    background-size
    border-image
    box-shadow
    rgba()
    text-shadow
    transitions
    

    View Slide

34. @font-face
    background-size
    border-image
    box-shadow
    rgba()
    text-shadow
    transitions
    reflections
    

    View Slide

35. @font-face
    background-size
    border-image
    box-shadow
    rgba()
    text-shadow
    transitions
    reflections
    transforms
    

    View Slide

36. @font-face
    background-size
    border-image
    box-shadow
    rgba()
    text-shadow
    transitions
    reflections
    transforms
    flexbox
    

    View Slide

37. @font-face
    background-size
    border-image
    box-shadow
    rgba()
    text-shadow
    transitions
    reflections
    transforms
    flexbox
    some other shit
    

    View Slide

38. @font-face
    background-size
    border-image
    box-shadow
    rgba()
    text-shadow
    transitions
    reflections
    transforms
    flexbox
    some other shit
    even more shit
    

    View Slide

39. @font-face
    background-size
    border-image
    box-shadow
    rgba()
    text-shadow
    transitions
    reflections
    transforms
    flexbox
    some other shit
    even more shit
    shit that hasn’t happened
    yet
    

    View Slide

40. Typically, we like to
    use the newest
    features and then find
    “hacks” or “fixes” to
    degrade to “older”
    browsers.
    

    View Slide

41. but don’t start celebrating just yet
    The clock is
    ticking on IE8
    

    View Slide

42. As users begin replacing IE8, they
    will look for new browsers.
    

    View Slide

43. as users move more and more to tablets
    The clock is also
    ticking on desktop
    computers
    

    View Slide

44. Tablets are just easier to use,
    (because they do less).
    

    View Slide

45. shit just got real
    The third world is
    coming online
    

    View Slide

46. Older systems will stay in the
    ecosystem longer.
    

    View Slide

47. All of this means one thing:
    DIVERSITY
    

    View Slide

48. 2
    PROGRESSIVE ENHANCEMENT
    

    View Slide

49. Progressive Enhancement
    To improve a site starting from the smallest
    subset of supported features.
    

    View Slide

50. Progressive enhancement workflow
    build test
    base enhance
    3
    2
    1 4
    Test your work. Start adding some
    flair.
    Build to those
    specifications.
    Identify a starting
    point.
    

    View Slide

51. START WITH A BASE
    PROGRESSIVE ENHANCEMENT
    

    View Slide

52. Starting point
    Define a starting point for site. Work it out
    with the client first, but as you develop this
    will be what you develop for first.
    

    View Slide

53. Some example starting points:
    

    View Slide

54. • A javascript disabled handheld device.
    Some example starting points:
    

    View Slide

55. • A javascript disabled handheld device.
    • A desktop computer running IE7.
    Some example starting points:
    

    View Slide

56. • A javascript disabled handheld device.
    • A desktop computer running IE7.
    • A touch screen device for the visually impaired.
    Some example starting points:
    

    View Slide

57. • A javascript disabled handheld device.
    • A desktop computer running IE7.
    • A touch screen device for the visually impaired.
    • A javascript enabled laptop.
    Some example starting points:
    

    View Slide

58. • A javascript disabled handheld device.
    • A desktop computer running IE7.
    • A touch screen device for the visually impaired.
    • A javascript enabled laptop.
    • A tablet with crappy wi-fi.
    Some example starting points:
    

    View Slide

59. • A javascript disabled handheld device.
    • A desktop computer running IE7.
    • A touch screen device for the visually impaired.
    • A javascript enabled laptop.
    • A tablet with crappy wi-fi.
    • A drunk circus clown with Google Glass.
    Some example starting points:
    

    View Slide

60. • A javascript disabled handheld device.
    • A desktop computer running IE7.
    • A touch screen device for the visually impaired.
    • A javascript enabled laptop.
    • A tablet with crappy wi-fi.
    • A drunk circus clown with Google Glass.
    • A angry cowboy wearing a smart watch.
    Some example starting points:
    

    View Slide

61. don’t let me, that dude, or some
    jack-mo’s tumblr tell you what to build.
    THE BUSINESS
    DEFINES YOUR
    STARTING POINT
    

    View Slide

62. Strategy and UX groups should
    be providing you with user
    stories, derive your starting point
    from these.
    

    View Slide

63. View Slide

64. View Slide

65. View Slide

66. View Slide

67. BUILD IT
    PROGRESSIVE ENHANCEMENT
    

    View Slide

68. Get to making
    This is very much a prototyping phase.
    

    View Slide

69. TEST IT
    PROGRESSIVE ENHANCEMENT
    

    View Slide

70. Real world testing
    Test your work in the real world. Don’t just
    load it up in controlled environments, but take
    the work outside of your comfort zone.
    

    View Slide

71. TEST HERE
    

    View Slide

72. TEST HERE
    

    View Slide

73. TEST HERE
    

    View Slide

74. IMPROVE IT
    PROGRESSIVE ENHANCEMENT
    

    View Slide

75. Enhancements
    Sometimes an enhancement can be improving
    support for an antiquated browser.
    

    View Slide

76. View Slide

77. View Slide

78. View Slide

79. View Slide

80. View Slide

81. View Slide

82. View Slide

83. View Slide

84. View Slide

85. View Slide

86. View Slide

87. View Slide

88. View Slide

89. View Slide

90. TEST
    

    View Slide

91. ENHANCE
    

    View Slide

92. TEST
    

    View Slide

93. ENHANCE
    

    View Slide

94. TEST
    

    View Slide

95. ENHANCE
    

    View Slide

96. In order to do this, we needed a
    tool that could appropriate what
    CSS and JS should be loaded for
    which user.
    

    View Slide

97. 3
    MODERNIZR
    

    View Slide

98. Modernizr is
    a JavaScript library that detects HTML5 and
    CSS3 features in the user’s browser.
    

    View Slide

99. Detect features, not browsers.
    

    View Slide

100. 
     

     View Slide

101. 
     

     View Slide

102. View Slide

103. .svg .sidebar{...}
     .no-svg .sidebar{...}
     

     View Slide

104. YOU CAN
     JAVASCRIPT
     CONDITIONAL
     STATEMENTS
     

     View Slide

105. if(background-size){
     //do this stuff
     }else{
     //other less cool stuff
     }
     

     View Slide

106. ~40 tests available out of the box
     

     View Slide

107. ADDTEST()
     

     View Slide

108. Modernizr.addTest('loggedIn', function(){
     return localStorage.getItem('logged-in');
     });
     

     View Slide

109. .loggedin .sidebar{...}
     .no-loggedin .sidebar{...}
     

     View Slide

110. CSS feature detection is great,
     but it’s just the tip of the iceberg.
     

     View Slide

111. View Slide

112. View Slide

113. View Slide

114. View Slide

115. if(geolocation && hudson){
     //do shit
     }else{
     //default
     }
     ALSO IN CSS:
     .no-hudson
     .hudson
     

     View Slide

116. MODERNIZR.LOAD()
     

     View Slide

117. Modernizr.load allows
     you to load files only
     when they are
     required, so that
     jQuery plugin you
     need for a specific
     part of the page can
     be loaded only when
     it’s absolutely
     required.
     

     View Slide

118. thing.mouseenter(function(){
     Modernizr.load(‘x.js’);
     });
     

     View Slide

119. You can also load files
     based on Modernizr
     tests. This is
     incredibly helpful in
     loading polyfills or
     files related to input
     types.
     

     View Slide

120. Modernizr.load({
     test: Modernizr.touch,
     yep: “touch.js”,
     nope: “no-touch.js”,
     callback: function(){
     // do stuff
     }
     });
     

     View Slide

121. MODERNIZR.MQ()
     

     View Slide

122. While CSS media
     queries give you
     controll over the
     layout and visual
     elements on a page,
     Modernizr.mq gives
     you controll over
     functional elements as
     well as content
     

     View Slide

123. Modernizr.mq('(min-width: 960px)')
     

     View Slide

124. Modernizr.load({
     test: Modernizr.touch && Modernizr.mq(x),
     yep: “touch.js”,
     nope: “no-touch.js”,
     callback: function(){
     // do stuff
     }
     });
     

     View Slide

125. 4
     PUTTING IT TOGETHER
     

     View Slide

126. Using Modernizr you can
     gradually enhance a site from
     your starting point into a fully
     formed interactive marvel.
     

     View Slide

127. View Slide

128. View Slide

129. Modernizr.load({
     test: !Modernizr.touch && Modernizr.mq(),
     yep: [“parallaxDock.js”, “parallaxDock.css”],
     nope: “touchDock.js”,
     callback: function(){
     // bindings
     }
     });
     

     View Slide

130. +
     Modernizr.load()
     =
     

     View Slide

131. View Slide

132. View Slide

133. View Slide

134. View Slide

135. Progressive enhancement is a slow process.
     It requires patience and hard work, but the end
     product is something you can be proud of.
     

     View Slide

136. If you’re awesome at your job, nobody will
     even notice you did anything at all. But that’s
     what being a craftsman is all about.
     

     View Slide

137. @matthew_carver
     manning.com/carver
     bigspaceship.com
     

     View Slide

138. 10.20.2013 | @matthew_carver
     THANKS.
     

     View Slide