Progressive degradation

In recent weeks I’ve been preparing videos of talks from our Summit last year for Conffab (the keynotes and several of the tracks are available now, with the rest coming soon). If you didn’t attend, for just $20 a month or $200 a year you can get access to all the videos of all our conferences going back over a decade, plus other conferences as well. Or a free account gives you access to anything over 2 years old. No ads, no tracking, no algorithm promoting Jordan Peterson videos.

One concept that came up a number of times, to my surprise, was that of graceful degradation.

Graceful degradation?is a design philosophy that centers around trying to build a modern website/application that will work in the newest browsers, but falls back to an experience that while not as good still delivers essential content and functionality in older browsers.

It’s an old idea, one that for the most part was superseded by the concept of progressive enhancement, probably 20 years or more ago.

Progressive enhancement?is a design philosophy that provides a baseline of essential content and functionality to as many users as possible, while delivering the best possible experience only to users of the most modern browsers that can run all the required code.

One reason the former approach fell out of favour among many is it means making an inclusive and accessible solution is the extra work–and we all know how well extra work and expense goes down when there are new features to build, new shiny technologies to explore.

So today a paean to progressive enhancement and some reading to help you progressively enhance your sites and applications.

Futuristic Progressive Enhancement

Imagine someone came to you in a time machine and said, “In the future we will write software that becomes more capable as time passes without any effort on our part.”

Source:?Futuristic Progressive Enhancement – Jim Nielsen’s Blog

Software rarely if ever gets better when left alone. As developers we know this, we return to a code base months (or longer) later and simply the effort to start working on it again can be overwhelming. Progressive enhancement is sort of miraculous, we should acknowledge that from time to time.

Multi-page application View Transitions are here

• CSS, animation, View Transitions

Transform your web experiences with View Transitions. Last year, we debuted Same-Document View Transitions for use in your Single-Page Applications (SPAs), and now we’re taking it to the next level. Get ready for enhanced control over View Transitions to more easily create immersive user experiences. We are also giving you Cross-Document View Transitions which allow you to create seamless navigations in your Multi-Page Applications (MPAs).

Bramus Van Damme gives a detailed overview of View Transitions, which we’ve covered a bit at our conferences in the last year or so. It works well as a progressive enhancement and they are really straightforward to implement.

Enhancing Cross-Document Navigation with the View Transitions API

• View Transitions

The View Transitions API helps developers create smooth animations when moving between different parts of a webpage. You’ll often notice this when going from one page to another (like from /page-1 to /page-2), but it can also make updates within the same page more dynamic.

Source:?Enhancing Cross-Document Navigation with the View Transitions API Trung Vo

Bonus Video: OK, we’re such a big fan of view transitions we’re giving you not one but two links, and a bonus video CSS Between the Pages from Phil Nash at Summit ’23 all about, you guessed it, view transitions.

What is Motion Sensitivity? How to Design Accessible Web Animations

• animation

As web developers, we love a good animation, right? But let’s be honest, sometimes we get caught up in the wow factor and forget that our websites exist for real people with diverse needs.

Source:?What is Motion Sensitivity? How to Design Accessible Web Animations

To emphasise how animation is best thought of as a progressive enhancement, for people with motion sensitivity they are positively a degradation. So here’s how to think about designing more accessible animations (perhaps by starting with no animation at all).

Bonus video: Val Head covered this at Code '20, with 'Prefers Reduced Motion: Designing Safer Animation for Motion Sensitivities'. Watch with no signup right now!

Hidden vs. Disabled In UX — Smashing Magazine

• a11y, accessibility

Both hiding and disabling features can be utterly confusing to users. And for both, we need very, very good reasons. Let’s take a closer look at what we need to consider when it comes to hiding and disabling — and possible alternatives that help enhance the UX.

Source:?Hidden vs. Disabled In UX — Smashing Magazine

Hiding or disabling elements on. page when they aren’t active are common UX patterns–but they can confuse and frustrate users. So when and why should we use them? And what alternatives are there? Longtime friend of Web Directions Vitaly Friedman takes a deeper look.

Want more like this?

Head over to Conffab's Elsewhere section, add our RSS feed to your favourite newsreader, or follow us on Mastodon (we're @[email protected]).

Or why not create a free Conffab account giving you access to a lot of the back catalog of presentations.

We publish a lot more than we can fit here each week so to keep up with everything we think is vital in web technology and practice see you there!