Zen and the Art of Progressive Enhancement

When I’m not programming, I’m in the woods as much as possible camping and hiking. Occasionally I need to look something up on my phone (an address for instance), and I often see this:

Loading

But why!? I think to myself. All I want is some text telling me where to get beers after this hike. Why can’t my one bar (of signal) get me directions? This question led me to discover Progressive Enhancement, and how it can help people like me access the core content of a website with any amount of internet connection.

Progressive enhancement is a web design strategy that emphasizes accessibility and content-based design by using web technology in a layered fashion. This allows everyone to access the basic content and functionality of the site using any browser, then building enhancements on top of that.

What problem does this solve?

(Or, why can’t we all have fun playing with all the shiny new Javascript things?)

This is a package

A platform is a static defined software environment responsible for running neatly packaged bundles of code. Photoshop and IOS apps are examples of these, where you either get the full experience, or none. The web, however, is a continuum. Best case you get the shiny new Javascript thing you made, and in the worst case nothing (or perhaps an infinite load spinner). That is, unless you use progressive enhancement.

Why is HTML, and even CSS, more reliable than Javascript?

Single point of failure

If your CSS or HTML have behavior that is unsupported by the browser, the browser will simply ignore it and continue rendering the parts it can. With Javascript, the browser will throw an error and stop processing altogether, meaning it is a single point of failure.

If Javascript is so unreliable, why do so many websites depend on it?

Rocking the boat

With new technology comes a period of adjustment. People working in new mediums tend to try to coerce the unfamiliar into the familiar. Since the web is a relatively new medium, many designers approach it similarly to print design. With print, the designer has a lot of control over things like layout, dimensions of the page, and typography, and the result is always going to look the same no matter where it’s viewed. These things are a little trickier on the web.

John Allsop

According to John Allsopp, we need to challenge the belief that designers are controllers. Allsopp writes designers want to: override the wishes of their users and the choices they have made about their viewing experience. They second guess platform differences, caused by different logical resolutions. They will not tolerate anything less than a rendering on every browser that is pixel perfect with the rendering on their own machine.

Brighter tomorrow

The promise of the web is a brighter tomorrow. Just as television provides an enhanced experience from radio, so the web is to print. The facts of the web are that it is accessible, adaptable, and leaves more choices to the users. As John Allsopp wrote, “The web’s greatest strength, I believe, is often seen as a limitation, as a defect. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.”

Graceful degradation is a phrase that often comes up when dealing with the problems progressive enhancement tries to solve. Graceful degradation involves designing for the best case scenario— modern browsers with a good internet connection— and providing alternative experiences in less ideal cases. Whereas progressive enhancement starts by establishing a base level experience which is accessible to all, then providing an enhanced experience for those able to access it. While graceful degradation is better than doing nothing, as Rachel Andrew said in her talk at Full Stack Fest, accessibility should never be “‘coming,” should never be a feature, and this is something prone to happen when choosing graceful degradation.

How to progressively enhance

Pendant Light

The Pendant Light by Poul Henningsen, an iconic design, illustrates what it looks like when form follows function. The lamp uses three reflecting shades to spread light evenly to illuminate and transform the room with a smooth, glare-free warmth. The lamp does exactly what it’s meant to do elegantly by not forcing the light to act in an unnatural way. When designing for the web, think about what the crucial purpose of the site is, not how should it look. Realize that your site will not look the same across all browsers and devices, but rest assured the original purpose of the site will still be met.

1. Design in text

Print to screen

Many websites are designed from the user interface in rather than from the content out. Start out with a text-based foundation for the website or application you’re designing, then add the complex interface as a layer on top. By forcing the focus on the structure of the textual content, irrelevant content becomes easy to spot when it’s not hidden by design. It’s also easy to convert from word processor documents into structured plain text.

2. Use semantic HTML to convey content

Unstyled HTML is actually both mobile ready and mobile first! Besides having many benefits for accessibility and search engine optimization, using semantic HTML is a great starting point for responsive design.

  • Use HTML5 semantic elements such as <header> and <nav> tags instead of wrapping everything in a <div>
  • Use <strong> and <em> tags instead of <b> and <i>. The latter have no semantic meaning and only represent visual style, whereas the former convey meaning.

3. Use CSS to suggest appearance

Suggestions

Your beautiful fonts might not work. Have a fallback, and keep the core functionality out of the CSS.

  • Avoid absolute sizes. Screens are inherently less readable than paper because of their low resolutions, and small font sizes are one of the biggest accessibility issues. Users should be able to specify their default font size. As a designer/developer, respect the user’s choices by using relative font sizes like percentages and ems.
  • Use mobile-first structured CSS.

4. Use JavaScript to enhance

Modernizr

By layering JavaScript on top of a solid base, you can ensure core functionality. Use JavaScript to enhance this.

Use feature detection such as Modernizr to detect which features the user’s browser has to offer and use those results to tailor the experience to the user.

Disclaimer

Progressive Enhancement is an egalitarian philosophy about the nature of the web. It may not always be practical, but it’s a good thing to shoot for. Shoot for doing as much as you can to progressively enhance and users will benefit, even if it’s not 100%.

Takeaways

  • Learn and teach the core skills: HTML, CSS and Javascript.
  • Use Progressive Enhancement from the get go - it’s a pain to implement later.
  • Progressive Enhancement is cheaper to maintain since simpler code is more maintainable code.

Resources

You May Also Enjoy