Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Whatever happened to Progressive Enhancement?

Whatever happened to Progressive Enhancement?

In my talk I want to look at whatever happened to progressive enhancement and discuss how we should approach inclusive web design with the myriad of tools, techniques and devices available today.

cole007

May 25, 2012
Tweet

More Decks by cole007

Other Decks in Programming

Transcript

  1. Whatever happened to
    Progressive Enhancement?

    View Slide

  2. helo Casnewydd

    View Slide

  3. My First Web Job

    View Slide

  4. 2005
    =

    View Slide

  5. Government website

    View Slide

  6. yuk

    View Slide

  7. Web standards

    View Slide

  8. View Slide

  9. CSS Zen Garden
    http://goo.gl/vVADw

    View Slide

  10. Birth of Ajax

    View Slide

  11. 2007

    View Slide

  12. Graceful Degradation

    View Slide

  13. Progressive Enhancement

    View Slide

  14. “Design for the lowest
    common denominator”

    View Slide

  15. Fast Forward

    View Slide

  16. 2012

    View Slide

  17. A new landscape

    View Slide

  18. View Slide

  19. Blurring of layers

    View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. 1.3%
    http://goo.gl/4WyX4

    View Slide

  24. The Death of the Reload Button

    View Slide

  25. User Expectation

    View Slide

  26. ‘Appification’ of the web
    http://goo.gl/sMBbf

    View Slide

  27. Barrier to Progress
    http://goo.gl/EsqLy

    View Slide

  28. Problems

    View Slide

  29. !=
    Sites / Apps

    View Slide

  30. Design for the best

    View Slide

  31. Graceful Degradation again

    View Slide

  32. -o-
    CSS prefixes

    View Slide

  33. CSS-dependency

    View Slide

  34. itus

    View Slide

  35. JS-dependency

    View Slide

  36. #!
    The hash-bang

    View Slide

  37. <br/>http://goo.gl/YTijg<br/>

    View Slide


  38. View Slide

  39. <br/>http://goo.gl/BaL5r<br/>

    View Slide


  40. View Slide

  41. wtf

    View Slide

  42. Performance

    View Slide

  43. Drag and drop culture

    View Slide

  44. Bloat

    View Slide

  45. Canvas-in design

    View Slide

  46. Can we fix it?

    View Slide

  47. “Design for the lowest
    common denominator”

    View Slide

  48. Mobile first

    View Slide

  49. Responsive Web Design

    View Slide

  50. not a panacea

    View Slide

  51. not a trend

    View Slide

  52. =
    Responsive Web Design is Progressive Enhancement

    View Slide

  53. Shoe-horning is unsustainable

    View Slide

  54. Solutions

    View Slide

  55. “Markup first”

    View Slide

  56. View Slide

  57. “Design for a range of
    devices”

    View Slide

  58. Three pillars of Responsive Web Design

    View Slide

  59. “Expect it to break”

    View Slide

  60. http://goo.gl/0tZam
    “Design a site to work robustly for the
    situations in which Javascript doesn’t
    succesfully run”

    View Slide

  61. protip

    View Slide

  62. protip

    View Slide

  63. “Don’t ignore the 1.3%”

    View Slide

  64. View Slide

  65. Diolch yn Fawr!
    http://goo.gl/9jnB1
    @cole007
    Font Edmondsans Icons Geomicons Wired

    View Slide