Progressive Enhancement

A plea for code quality in 43 slides by Accessabilly.

A big lightbulb spiked part of a huge ride saying "Evolution"
Evolution - The Ride, © by Kevin Dooley

Elevators versus Escalators

When elevators stop working, they are useless.

When escalators stop working, they turn into stairs.

Two spacey looking escalators pointing up to the entrance of the station, one person on the left escalator going up.
Central Station, © by Stig Nygaard

Key Principle

Expect technology to fail and offer a fallback.

With this principle, people were sent to the moon by the way…

Buzz Aldrin on the moon with Landing Capsule in the background and technology experiment in the front.
Buzz Aldrin on the Moon

3 Myths

  1. Progressive Enhancement is only for people who disabled JavaScript in their browser.
  2. Progressive Enhancement means double development effort.
  3. Progressive Enhancement is only to support older browsers.

…is only for People who disabled JavaScript in their Browser?

Wrong! Progressive Enhancement is for people,

Matt Maqrquis on Twitter: “Lots of cool features on the Boston Globe don’t work when JS breaks; “reading the news” is not one of them.”

…is only to support older Browsers?

Wrong! The exact opposite is true.

Arnaud Delafosse on Twitter: “A well-crafted responsive design is device-agnostic.” Photo of a talk by Ehtan Marcotte Ethan Marcotte talking about "Device Agnostics", © Arnaud Delafosse

…means double Development Effort?

Wrong!

Heydon Pickering on Twitter: “The answer to cross-browser compatibility is not “use a lib”. It's progressive enhancement + testing and fixing.”

It's all about Usability

It's about improving the user experience until certain JavaScript kicks in. The application can provide a bad-looking interface as long as JavaScript is not available, but the user still gets something from the server and can execute the basic functionality.

Many Truths

Progressive Enhancement is also about

Who's doing it, too?

3 Steps

  1. Identify the key functionality of the feature you want to implement.
  2. Provide this functionality with the simplest technology.
  3. Enhance!

Daily Life Example: Collapsible

"As a User of your website, I want to be able to hide content and display it with an interaction to avoid being overloaded with all content at once."

Identify the Core Functionality

Content should always be able to be displayed and should not be hidden even if JavaScript is not available.

Core Functionality in HTML

<h2><a href="#content" id="#trigger">
 This is some cool content
</a></h2>
<p id="content">Why pamper life's complexity.
Where there's music and there's people. This charming man.
"Throw your skinny body down, son!".
And if a double-decker bus. The last night of the fair.
Driving in your car. Take me out tonight.</p>
Demo 1 on Codepen

Additional Functionality in CSS

p {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
}
html.no-js p, p:target, p.show {
  overflow: auto;
  max-height: 15rem;
}
Demo 2 on Codepen

Enhanced Functionality with JavaScript

const trigger = document.getElementById('trigger');
const content = document.getElementById('content');
trigger.addEventListener('click', function(event) {
  event.preventDefault();
  content.classList.toggle('show');
}, false);
Demo 3 on Codepen

3 Layers

  1. Semantic HTML
  2. CSS
  3. JavaScript

HTML - Base Layer

Bake a cake - the cake ground.
Forming the cake ground. © by Baking Day

HTML - Base Layer

Graceful Degradation

Graceful Degradation explained: <input type="date"> in modern browsers like Chrome still working as <input type="text"> in older browsers like IE11.

Graceful Degradation

This is a HTML inherent principle of fault tolerance that describes the ability of maintaining functionality when portions of a system break down.

Referring to the slide before, an <input type="date"> in modern browsers like Chrome is still working as <input type="text"> in older browsers like IE11.

CSS - Presentation Layer

Bake a cake - the cake icing.
Icing the cake. © by Baking Day

CSS - Presentation Layer

Heydon Pickering on Twitter: Another common misunderstanding is that progressive enhancement is just about js - it's not

Example 1 for Progressive Enhancement in CSS

p {
  background-color: #000000;
  background-color: rgba(0,0,0,0.5);
  color: #ffffff;
}

Example 2 for Progressive Enhancement in CSS

.box {
  float: left;
}
@supports (display: grid) {
  .box {
    display: grid;
  }
}

JavaScript - Interaction Layer

Bake a cake - the decoration.
The final cake decoration. © by Baking Day

JavaScript - Interaction Layer

JavaScript last - but why?

HTML, CSS and JavaScript are loaded in parallel and asynchronously, but rendered in this order:

  1. Rendering the HTML to the DOM Tree
  2. Layout of the DOM tree using CSS, Paint of the DOM
  3. JavaScript is executed if it is loaded

Only now, in client-side apps event handlers can be executed, JSON API calls (Ajax, routing, etc.) are executed and content can be changed dynamically.

Jake Archibald on Twitter: “We don't have any non-JavaScript users” No, all your users are non-JS while they're downloading your JS

Time to Interactive - a Milestone in User Experience Lifecycle

Pure client apps require the entire loading of the JavaScript bundle before interaction can take place.

Users are struggling with non-working buttons or even links. Sometimes they are offered just a white page, when trying to interact with the site, only because JavaScript is not already executed.

Can't we do better than that?

Phil Hawksworth on Twitter: Our monitoring tells us that around 1% of requests for JavaScript on BuzzFeed timeout. That's around 13 million requests per month.

The Browser as an Operating System - A dangerous Paradigm

We use the browser as operating system for our web app with JavaScript as kernel. JavaScript is used to perform important basic browser functions such as content fetching, routing, etc. JavaScript can become a bottleneck or may fail due to errors.

We should rather work with the browser than against it. This means, letting the browser do the stuff it is built for. JavaScript can do powerful things, but it can destroy the browser inherit user experience, easily.

Some Solutions to faster Time to Interactive

Agile Principles ❤ Progressive Enhancement

Progressive Enhancement is a method in (frontend) software development and follows agile principles:

Chris Heilmann on Twitter: Progressive Enhancement is not about JavaScript availability - it is about planning your products and delivering.

Examples of little Enhancements in standard Web Projects

Thank y'all!

Sites that inspired this talk heavily

More Sites that inspired this talk heavily