This post was originally going to be a summary of themes from Artifact Conf but, inspired by Jeremy Keith’s presentation, I got preoccupied with progressive enhancement. I also wanted to make this picture of cookies:
In a nutshell, progressive enhancement is building “content out”, separating the structure of a website (HTML) from its presentation and behavior (CSS and JS). Content should be available regardless of the capabilities of the device, and should not rely on styling or scripting to function at a base level.
A good example is the footer anchor navigation pattern in mobile menus. Once the menu works in only HTML, build in the fancy flyout effects. If the browser doesn’t support the flyout effects, it will simply ignore them and fallback to the footer anchor.
I’ll open the “for” argument with a particularly resonant quote by Jake Archibald from Jeremy’s talk:
When an elevator fails, it’s useless. When an escalator fails, it becomes stairs. We should be building escalators, not elevators.
By compensating for older technologies and edge cases, are we inhibiting innovation on the web?
Overall, I think it depends on the project. For the type of work I do, progressive enhancement is very valuable – the best practices it encourages are excellent for a small business website made of mostly static content and a few UX-y flourishes. However, for highly interactive web applications like Instacart or Feedly whose user base is primarily affluent 20-30 somethings, sure, make something flashy that pushes the web to it’s limits.
- Progressive Enhancement: It’s About the Content – Happy Cog
- Understanding Progressive Enhancement – A List Apart
- Progressive Enhancement is Dead – Tom Dale
- Jeremy Keith on building with progressive enhancement – Creative Bloq
- How one second could cost Amazon $1.6 billion in sales – Fast Co.