An Event Apart: Why Progressive Enhancement Matters

by May 12, 2014

At An Event Apart in San Diego CA 2014 Jeremy Keith talked through the importance of progressive enhancement when building for the Web. Here's my notes from his talk on Enhance:

  • Changing human behavior is very hard. We tend to continue doing what we know.
  • Every time a new medium comes along, we treat it like the medium that came before it. It takes a while for a medium to come into its own.
  • The Web standards movement not only aimed to get browsers to embrace standards but also to rewire how people thought about the Web. The fundamental message was separating HTML (structure) from CSS (presentation).
  • Progressive enhancement is a technique that keeps growing in usefulness. Separating things into layers on the Web allows us to take advantage of the advantages of each.
  • HTML is very error tolerant. If a browser does not understand a tag, it ignores it. This allows us to extend HTML while still supporting old browsers.
  • HTML is the same language from the start its just been evolving all the time.
  • HTML support structural honesty. Button tags allows you to semantically define buttons. Using spans is not structurally honesty.
  • CSS is made up of selectors, properties, and values. All of which are error tolerant like HTML. This allows us to keep adding new stuff all the time. Even if no browser supports a CSS property, you can use it.
  • Material honesty: use the right tool for the job. border-radius vs. image hacks to achieve the same effect.
  • Javascript is not fault tolerant, but it is quite forgiving. Javascript will throw errors and stop parsing/fail. As a result, we should not be relying on Javascript to make things work on the Web.
  • Javascript is like electricity of the Web. It should enhance experiences, when there.
  • On Gov.uk, .2% of people turned off Javascript and .9% don't get the Javascript for an "unknown" reason.
  • Build in layers, from HTML to CSS to Javascript. This creates a less fragile and more foolproof Web page.
  • Postel's law: be conservative in what you send, be liberal in what you accept.

Design Principles

  • Design principles underline the tools we use. Software is ideological, embedded with values. Choose the projects and tools that align with your values.
  • Stop solving problems you don't yet have. Don't include frameworks until you need them.
  • Some Javascript frameworks are more opinionated. Backbone, angular, and ember mean you might be fighting progressive enhancement.
  • You can use these tools but know you are aligning yourself with the philosophy of the framework you are using.
  • The Web platform: when trying to compete with native platforms, we're missing out on the power of the Web. If someone does not have Flash, they get 0% of your Flash software.
  • The Web instead, is a continuum. You'll always get some level of support. The point of the web is that it’s cross-platform. That’s what Tim Berners-Lee was rewiring our brains to accept.
  • Look below the presentation layer and dig into the actual goals people have. This is functional honesty.
  • But, I'm not making a Web site. I'm making a "Web app". What's a Web app really? Too often this is just a get out jail free card for ignoring some of the best practices on the Web.
  • Responsive Web design is a way of re-wiring our brains to think about one-Web. Responsive design works really well with progressive enhancement.

Enhancements

  • In mobile first RWD, layout itself is an enhancement.
  • We shouldn't be talking about making Web sites responsive, we should be talking about keeping Web sites responsive. We've been breaking the Web for years by putting our content into fixed width containers.
  • Do Web sites need to look the same in every browser? no.
  • Cutting the mustard: check for the Javascript you need to use. If it's available, then enable the enhancements. Test for features, not browsers. Use feature detection, not browser detection.
  • If the browser does not understand the new features, don't try to give it that feature. Use aggressive enhancement.
  • There's a difference between support an optimization. Support every browser but optimize for newer ones.
  • But I can't convince my boss/client to do the right thing. That's your job. The real problem to solve is making sure your bosses understand how the Web works so their expectations are right. Your boss’s expectation that websites look and work the same in all browsers. Don’t perpetuate the problem.
  • People do change. It's a matter of re-wiring their brains. It's our job to build Web experiences to provide access to all.