Pro Yearly is on sale from $80 to $50! »

Progressive Enhancement with Modernizr

5e2029de45026a1e4fb04f82728d8e5b?s=47 Matt Carver
October 21, 2013

Progressive Enhancement with Modernizr

Some things about stuff.

5e2029de45026a1e4fb04f82728d8e5b?s=128

Matt Carver

October 21, 2013
Tweet

Transcript

  1. GREETINGS FROM BROOKLYN. 10.20.2013 | @matthew_carver

  2. 10.20.2013 | @matthew_carver PROGRESSIVE ENHANCEMENT WITH MODERNIZR CSSDEVCONF

  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”
  4. 1 THERE’S A PROBLEM

  5. There aren’t enough media queries.

  6. IF THIS IS TABLET?

  7. AND THIS IS MOBILE

  8. FPO Text WHAT IS THIS?

  9. FPO FPO OR THIS?

  10. Screen width is a fixed commodity and the primary consideration

    in most responsive designs.
  11. There is more to being “device agnostic” than the size

    of your screen.
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. @font-face

  28. @font-face background-size

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

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

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

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

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

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

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

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

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

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

    some other shit even more shit
  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
  40. Typically, we like to use the newest features and then

    find “hacks” or “fixes” to degrade to “older” browsers.
  41. but don’t start celebrating just yet The clock is ticking

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

    browsers.
  43. as users move more and more to tablets The clock

    is also ticking on desktop computers
  44. Tablets are just easier to use, (because they do less).

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

  46. Older systems will stay in the ecosystem longer.

  47. All of this means one thing: DIVERSITY

  48. 2 PROGRESSIVE ENHANCEMENT

  49. Progressive Enhancement To improve a site starting from the smallest

    subset of supported features.
  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.
  51. START WITH A BASE PROGRESSIVE ENHANCEMENT

  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.
  53. Some example starting points:

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

  55. • A javascript disabled handheld device. • A desktop computer

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

    running IE7. • A touch screen device for the visually impaired. Some example starting points:
  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:
  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:
  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:
  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:
  61. don’t let me, that dude, or some jack-mo’s tumblr tell

    you what to build. THE BUSINESS DEFINES YOUR STARTING POINT
  62. Strategy and UX groups should be providing you with user

    stories, derive your starting point from these.
  63. None
  64. None
  65. None
  66. None
  67. BUILD IT PROGRESSIVE ENHANCEMENT

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

  69. TEST IT PROGRESSIVE ENHANCEMENT

  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.
  71. TEST HERE

  72. TEST HERE

  73. TEST HERE

  74. IMPROVE IT PROGRESSIVE ENHANCEMENT

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

    antiquated browser.
  76. None
  77. None
  78. None
  79. None
  80. None
  81. None
  82. None
  83. None
  84. None
  85. None
  86. None
  87. None
  88. None
  89. None
  90. TEST

  91. ENHANCE

  92. TEST

  93. ENHANCE

  94. TEST

  95. ENHANCE

  96. In order to do this, we needed a tool that

    could appropriate what CSS and JS should be loaded for which user.
  97. 3 MODERNIZR

  98. Modernizr is a JavaScript library that detects HTML5 and CSS3

    features in the user’s browser.
  99. Detect features, not browsers.

  100. <script src=”js/modernizr.js”></script>

  101. <html class=”no-js”>

  102. <html class=”js canvas no-canvastext [...]

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

  104. YOU CAN JAVASCRIPT CONDITIONAL STATEMENTS

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

  106. ~40 tests available out of the box

  107. ADDTEST()

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

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

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

    of the iceberg.
  111. None
  112. None
  113. None
  114. None
  115. if(geolocation && hudson){ //do shit }else{ //default } ALSO IN

    CSS: .no-hudson .hudson
  116. MODERNIZR.LOAD()

  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.
  118. thing.mouseenter(function(){ Modernizr.load(‘x.js’); });

  119. You can also load files based on Modernizr tests. This

    is incredibly helpful in loading polyfills or files related to input types.
  120. Modernizr.load({ test: Modernizr.touch, yep: “touch.js”, nope: “no-touch.js”, callback: function(){ //

    do stuff } });
  121. MODERNIZR.MQ()

  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
  123. Modernizr.mq('(min-width: 960px)')

  124. Modernizr.load({ test: Modernizr.touch && Modernizr.mq(x), yep: “touch.js”, nope: “no-touch.js”, callback:

    function(){ // do stuff } });
  125. 4 PUTTING IT TOGETHER

  126. Using Modernizr you can gradually enhance a site from your

    starting point into a fully formed interactive marvel.
  127. None
  128. None
  129. Modernizr.load({ test: !Modernizr.touch && Modernizr.mq(), yep: [“parallaxDock.js”, “parallaxDock.css”], nope: “touchDock.js”,

    callback: function(){ // bindings } });
  130. + Modernizr.load() =

  131. None
  132. None
  133. None
  134. None
  135. Progressive enhancement is a slow process. It requires patience and

    hard work, but the end product is something you can be proud of.
  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.
  137. @matthew_carver manning.com/carver bigspaceship.com

  138. 10.20.2013 | @matthew_carver THANKS.