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. 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”
  2. 12.
  3. 13.
  4. 14.
  5. 15.
  6. 16.
  7. 17.
  8. 18.
  9. 19.
  10. 20.
  11. 21.
  12. 22.
  13. 23.
  14. 24.
  15. 25.
  16. 26.
  17. 40.

    Typically, we like to use the newest features and then

    find “hacks” or “fixes” to degrade to “older” browsers.
  18. 43.

    as users move more and more to tablets The clock

    is also ticking on desktop computers
  19. 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.
  20. 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.
  21. 55.

    • A javascript disabled handheld device. • A desktop computer

    running IE7. Some example starting points:
  22. 56.

    • A javascript disabled handheld device. • A desktop computer

    running IE7. • A touch screen device for the visually impaired. Some example starting points:
  23. 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:
  24. 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:
  25. 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:
  26. 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:
  27. 61.

    don’t let me, that dude, or some jack-mo’s tumblr tell

    you what to build. THE BUSINESS DEFINES YOUR STARTING POINT
  28. 62.

    Strategy and UX groups should be providing you with user

    stories, derive your starting point from these.
  29. 63.
  30. 64.
  31. 65.
  32. 66.
  33. 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.
  34. 71.
  35. 72.
  36. 73.
  37. 76.
  38. 77.
  39. 78.
  40. 79.
  41. 80.
  42. 81.
  43. 82.
  44. 83.
  45. 84.
  46. 85.
  47. 86.
  48. 87.
  49. 88.
  50. 89.
  51. 90.
  52. 91.
  53. 92.
  54. 93.
  55. 94.
  56. 95.
  57. 96.

    In order to do this, we needed a tool that

    could appropriate what CSS and JS should be loaded for which user.
  58. 107.
  59. 111.
  60. 112.
  61. 113.
  62. 114.
  63. 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.
  64. 119.

    You can also load files based on Modernizr tests. This

    is incredibly helpful in loading polyfills or files related to input types.
  65. 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
  66. 126.

    Using Modernizr you can gradually enhance a site from your

    starting point into a fully formed interactive marvel.
  67. 127.
  68. 128.
  69. 131.
  70. 132.
  71. 133.
  72. 134.
  73. 135.

    Progressive enhancement is a slow process. It requires patience and

    hard work, but the end product is something you can be proud of.
  74. 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.