Subscribe

By: Amanda Kievet

Print this Page

January 13th, 2016

Zen and the Art of Progressive Enhancement

Application Development

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:

Zen and the Art of Progressive Enhancement Stride NYC

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.

Stride HTML CSS Programming NYC

HTML, followed by CSS, followed by Javascript

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?)

Stride Javascript Package

This is a package

 

Stride NYC javascript

This is a continuum

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?

Stride NYC HTML CSS

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?

Stride NYC Javascript

Print to screen

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.

Stride NYC 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.

Stride NYC Progressive Enhancement

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."

Related Concept: Graceful Degradation

Stride NYC Progressive Enhancement

Graceful Degradation

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

Stride NYC Progressive Enhancement

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

Stride NYC Design Text

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>

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

Javascript to Enhance Code Stride NYC

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

Wikipedia: Progressive Enhancement
Rachel Andrew- The Business of Front-end Development Resources/Slides
BBC Future Media Standards and Guidelines
Adactio Continuum
Jason Garber- The Practical Case for Progressive Enhancement, Designing Experience Layers, In Defense of Progressive Enhancement
Doug Avery's Response to Design Experience Layers
SPOF
John Allsopp: A Dao Of Web Design
Designing in Text by Stephen Hay
w3.org Graceful Degredation vs. Progressive Enhancement
Device Agnostic by Trent Walton
W3C HTML Techniques for Web Content Accessibility Guidelines
w3schools: HTML5 Semantic Elements
Progressive Enhancement Is Still Important by Jake Archibald

Related Posts