Progressive Enhancement with Modernizr

Some things about stuff.

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.
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.
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.
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.
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.
129. Modernizr.load({ test: !Modernizr.touch && Modernizr.mq(), yep: [“parallaxDock.js”, “parallaxDock.css”], nope: “touchDock.js”, callback: function(){ // bindings } });
130. + Modernizr.load() =
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.