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.

Transcript

1. Does Progressive Enhancement Still Matter? Saturday, April 6, 13
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
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
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
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
6. :-) Saturday, April 6, 13
7. The Problem Saturday, April 6, 13
8. 1. The “New & Shiny” 2. User Assumptions Saturday, April 6, 13
9. The New & Shiny Saturday, April 6, 13
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
11. User Assumptions “Nobody uses Internet Explorer anymore.” ಠ_ಠ Saturday, April 6, 13
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
13. So What? Saturday, April 6, 13
14. You Can Do It! Saturday, April 6, 13
15. Best Practices Saturday, April 6, 13
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
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
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
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
20. Thanks! @jglovier Saturday, April 6, 13