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

Does Progressive Enhancement Still Matter?

Does Progressive Enhancement Still Matter?

So it's 2013, and we're in the age of responsive design and web applications. The web standards war has been won and accessibility is a universal standard for all. Right?

Wrong. The web standards war has been fought, but still has not been fully won. We're on the path to victory, yes. We can now observe a prevailing mindset among developers around the web that web standards matter, and are right.

But we still have many battles yet to fight - and to keep on fighting - if we are to truly win the war.

Joel Glovier

April 06, 2013
Tweet

More Decks by Joel Glovier

Other Decks in Technology

Transcript

  1. Does Progressive
    Enhancement
    Still Matter?
    Saturday, April 6, 13

    View full-size slide

  2. Progressive
    Enhancement
    Progressive Enhancement refers to a methodology of
    building web sites and applications that allows for the
    maximum possible usability for users across all browsers,
    while rewarding users of more modern browsers with
    enhanced features.
    Features that may not be supported on older browsers,
    but do not break the experience when missing - just
    "enhance" the experience when present.
    Saturday, April 6, 13

    View full-size slide

  3. .somediv {
    ! width: 90%;
    height: auto;
    ! border-radius: 8px;
    ! box-shadow: 0px 1px 2px rgba(0,0,0,.4);
    ! background-image:
    linear-gradient(left top, white, #dddddd); }
    IE8: Ruh Roh...
    Saturday, April 6, 13

    View full-size slide

  4. .somediv {
    ! width: 90%;
    height: auto;
    ! border-radius: 8px;
    ! box-shadow: 0px 1px 2px rgba(0,0,0,.4);
    background-color: rgb(237,237,237);
    background-color: rgba(255,255,255,.75);
    ! background-image:
    linear-gradient(left top, white, #dddddd); }
    With basic fallbacks.
    Saturday, April 6, 13

    View full-size slide

  5. .somediv {
    ! width: 90%;
    height: auto;
    ! border-radius: 8px;
    ! box-shadow: 0px 1px 2px rgba(0,0,0,.4);
    background-color: rgb(237,237,237);
    background-color: rgba(255,255,255,.75);
    ! background-image:
    linear-gradient(left top, white, #dddddd); }
    With basic fallbacks,
    and conditional
    classes.
    .lte8 .somediv {
    ! box-sizing: border-box;
    ! border: 1px solid #bbbbbb;
    Saturday, April 6, 13

    View full-size slide

  6. :-)
    Saturday, April 6, 13

    View full-size slide

  7. The Problem
    Saturday, April 6, 13

    View full-size slide

  8. 1. The “New & Shiny”
    2. User Assumptions
    Saturday, April 6, 13

    View full-size slide

  9. The New & Shiny
    Saturday, April 6, 13

    View full-size slide

  10. The New & Shiny
    The temptation is to get so caught up in all the new
    developments of the web that are going on around us and
    being touted on Twitter all the time, that we start to get
    bored with the standard development best practices and
    want to push the envelope a little…or a lot.
    Characterized by: Over-reliance on vendor prefixes,
    HTML5 APIs, unfinished specs.
    Saturday, April 6, 13

    View full-size slide

  11. User Assumptions
    “Nobody uses Internet
    Explorer anymore.”
    ಠ_ಠ
    Saturday, April 6, 13

    View full-size slide

  12. User Assumptions
    As developers, we tend to like data-driven decision. But
    we don't live in a vacuum, and most of us are part of
    companies or teams that are made up of more than just
    developers. What happens in these situations is often
    when we have the data, it doesn't get to inform decisions
    as much as it should.
    Characterized by: Not taking time to actually research
    user attributes.
    Saturday, April 6, 13

    View full-size slide

  13. So What?
    Saturday, April 6, 13

    View full-size slide

  14. You Can Do It!
    Saturday, April 6, 13

    View full-size slide

  15. Best Practices
    Saturday, April 6, 13

    View full-size slide

  16. 1. Basic content and functionality should be available in
    some form to all users.
    - Semantic, content based markup
    Best Practices
    Saturday, April 6, 13

    View full-size slide

  17. 1. Basic content and functionality should be available in
    some form to all users.
    - Semantic, content based markup
    2. Enhancements to visual user experience (layout, design,
    interface4) implemented through external stylesheets
    - Providing fallbacks for browsers lacking support for advanced CSS
    techniques methods, or with javascript disabled
    Best Practices
    Saturday, April 6, 13

    View full-size slide

  18. 1. Basic content and functionality should be available in
    some form to all users.
    - Semantic, content based markup
    2. Enhancements to visual user experience (layout, design,
    interface4) implemented through external stylesheets
    - Providing fallbacks for browsers lacking support for advanced CSS
    techniques methods, or with javascript disabled
    3. Enhancements to functional user experience (behavior)
    implemented through external, unobtrusive JavaScript
    - Providing fallbacks for browsers with JavaScript disabled
    Best Practices
    Saturday, April 6, 13

    View full-size slide

  19. 1. Basic content and functionality should be available in
    some form to all users.
    - Semantic, content based markup
    2. Enhancements to visual user experience (layout, design,
    interface4) implemented through external stylesheets
    - Providing fallbacks for browsers lacking support for advanced CSS
    techniques methods, or with javascript disabled
    3. Enhancements to functional user experience (behavior)
    implemented through external, unobtrusive JavaScript
    - Providing fallbacks for browsers with JavaScript disabled
    4. End user browser preferences are respected.
    Best Practices
    Saturday, April 6, 13

    View full-size slide

  20. Thanks!
    @jglovier
    Saturday, April 6, 13

    View full-size slide