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:
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?
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.
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.
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
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
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
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
<nav>tags instead of wrapping everything in a
<em>tags instead of
<i>. The latter have no semantic meaning and only represent visual style, whereas the former convey meaning.
3. Use CSS to suggest appearance
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.
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.
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%.
- 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.
- 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)[http://sixtwothree.org/posts/designing-experience-layers], In Defense of Progressive Enhancement
- Doug Avery’s Response to Design Experience Layers
- 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