Progressive degradation–this week’s reading from Web Directions
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.
Graceful degradation: MDN
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.
Progressive Enhancement MDN
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.”
Wouldn’t that be amazing? Surely you’d want to know what sorcery makes this possible, right? Well the future is here. You can do that now. It’s called progressive enhancement.
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
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
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.
Historically, achieving seamless animations during significant state changes has posed challenges, with full-page load transitions largely dependent on browser capabilities.
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
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.
One hidden hurdle for some users is motion sensitivity. It might not be something we think about every day, but it can have a big impact on how people experience the internet.In this article, I want to shine a light on motion sensitivity. We’ll explore what it’s like, the conditions it’s linked to, and how it can affect someone’s ability to enjoy using a website.
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 2020, with Prefers Reduced Motion: Designing Safer Animation for Motion Sensitivities. Watch with no signup right now!
Hidden vs. Disabled In UX — Smashing Magazine
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.
Great reading, every weekend.
We round up the best writing about the web and send it your way each Friday.
