The beauty of progressive enhancement - Manuel Matuzović

Progressive Enhancement allows us to use the latest and greatest features HTML, CSS and JavaScript offer us, by providing a basic, but robust foundation for all.

Some great practical examples of progressive enhancement on one website:

  • using grid layout in CSS,
  • using type="module" to enhance a form with JavaScript,
  • using the picture element to provide webp images in HTML.

All of those enhancements work great in modern browsers, but the underlying functionality is still available to a browser like Opera Mini on a feature phone.

The beauty of progressive enhancement - Manuel Matuzović

Tagged with

Responses

Related links

Software can be finished - Ross Wintle

There’s quite a crossover between resilience and longevity:

  1. Understand the requirements
  2. Keep scope small and fixed
  3. Reduce dependencies
  4. Produce static output
  5. Increase Quality Assurance

Tagged with

Optimizing PWAs For Different Display Modes — Smashing Magazine

There’s really good browser support for display-mode media queries and this article does a really good job of running through some of the use cases for your progressive web app.

Tagged with

A pragmatic browser support strategy | Go Make Things

  1. Basic functionality should work on any device that can access the web.
  2. Extras and flourishes are treated as progressive enhancements for modern devices.
  3. The UI can look different and even clunky on older devices and browsers, as long as it doesn’t break rule #1.

Tagged with

Progressive enhancement brings everyone in - The History of the Web

This is a great history of the idea of progressive enhancement:

It is an idea that has been lasting and enduring for two decades, and will continue.

Tagged with

Request for developer feedback: customizable select  |  Blog  |  Chrome for Developers

I’m very glad to see that work has moved away from a separate selectmenu element to instead enhancing the existing select element—I could never see an upgrade path for selectmenu, but now there are plenty of opportunities for progressive enhancement.

Tagged with

Related posts

Browser support

Here’s Clearleft’s approach to browser support. You can use it too (it’s CC-licensed).

Applying the four principles of accessibility

Here’s how I interpret the top-level guidance in the Web Content Accessibility Guidelines.

Baseline progressive enhancement

If a browser feature can be used as a progressive enhancement, you don’t have to wait for all browsers to support it.

Progressive disclosure with HTML

The `details` element is like the TL;DR of markup.

Media queries with display-mode

I never would’ve known about the `display-mode` media feature if I hadn’t been writing about it.