Why Progressive Enhancement is key to “past-proofing” your UX

Hate to admit, but I often struggle to balance design and accessibility. I can come up with an awesome new feature that looks great and runs even better… only to learn it’s incompatible with some terrible browser (which 43% of our customers apparently use).

The solution: progressive enhancement.

That’s a phrase I’d heard thrown around for years, but it’s only recently I’m understanding just how important it is in our field. So in this article, I’ll explain what I know about it, and how I plan to factor it into more projects.

What is Progressive Enhancement?

Progressive Enhancement (PE) is about starting with a simple, universally accessible foundation (plain HTML), and then layering on additional enhancements (like CSS, JavaScript, or React/Vue components) for users with more advanced browsers.

In modern frameworks like React and Nuxt.js, this means rendering a basic, functional HTML structure first, which is then enhanced by JavaScript to create a richer UX.

Why is Progressive Enhancement Important in UX Engineering?

To understand why progressive enhancement is so important, it's helpful to compare it to another approach: graceful degradation.

You see, graceful degradation means designing for the most modern, feature-rich browsers/devices first, then making sure designs are simplified for less capable ones. So the full experience is built first, and features are then removed as needed.

Effectively, this means prioritising “advanced” users, and making allowances for ones with less access to technology…

But, progressive enhancement takes the opposite approach. Instead of building the full experience first, we start with the most basic, accessible version of a site that works for everyone. Once that foundation is in place, we layer on enhancements for users with more advanced technology.

This makes progressive enhancement more inclusive and dependable, making sure a product works for everyone first, then adding things in for “advanced” users.

How Progressive Enhancement applies to modern UX engineering

Let’s look at how anyone can use PE in a modern SaaS business. The idea is to start simple, then layer on more advanced features as you go.

Designing for the lowest common denominator

We start by building the simplest, most universal version of our site. This means using semantic HTML to structure content. Even without CSS or JavaScript, the page should be functional and readable. Users should be able to navigate and interact with it on any device, whether it’s a brand-new smartphone or an older desktop.

For modern workflows, this can mean using SSR with frameworks like Next.js or Nuxt.js to make sure users get basic HTML content even if JavaScript doesn’t load. (SSR also helps with performance and SEO).

Real-world examples of Progressive Enhancement

So let’s look at a few examples that are relevant to modern SaaS businesses:

Example 1: a responsive form with React and Formik

Imagine a signup form for a SaaS product. We start with basic HTML in the public folder that allows users to submit information:

<form action="/submit" method="POST">
  <label for="email">Email:</label>
  <input id="email" type="email"name="email" required>
  <button type="submit">Submit</button>
</form>

This works for all users, even those with JavaScript disabled. Then, when JavaScript is enabled, React takes over the form. We can use Formik and Yup for real-time validation.

import React from 'react';
import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';
const SignupSchema = Yup.object().shape({
  email: Yup.string().email('Invalid email').required('Required'),
});
const SignupForm = () => (
  <Formik
    initialValues={{ email: '' }}
    validationSchema={SignupSchema}
    onSubmit={(values) => {
      /* Handle submissions with JS here :) */
    }}
  >
    {({ errors, touched }) => (
      <Form>
        <Field name="email" type="email" placeholder="Enter your email" />
        {errors.email && touched.email ? <div>{errors.email}</div> : null}
        <button type="submit">Submit</button>
      </Form>
    )}
  </Formik>
);
export default SignupForm;

Even if JavaScript doesn’t work, the form will still submit using basic HTML in the public folder. The enhancements are layered on top of that core functionality.

Example 2: navigation with Nuxt.js

Another example could be site navigation. At its core, nav bars are simple lists of links. Served by Nuxt.js with SSR, what browsers see is:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/services">Services</a></li>
  </ul>
</nav>

Using Nuxt.js (for SSR), we can create enhanced navigation with dropdown menus and client-side routing for users who have JavaScript enabled.

<template>
  <nav>
    <ul>
      <li><NuxtLink to="/">Home</NuxtLink></li>
      <li><NuxtLink to="/about">About</NuxtLink></li>
      <li v-if="hasDropdown">
        <NuxtLink to="/services">Services</NuxtLink>
        <ul class="dropdown" v-if="dropdownVisible">
          <li><NuxtLink to="/services/web-design">Web Design</NuxtLink></li>
          <li><NuxtLink to="/services/seo">SEO</NuxtLink></li>
        </ul>
      </li>
    </ul>
  </nav>
</template>
<script>
export default {
  data() {
    return {
      dropdownVisible: false,
    };
  },
  mounted() {
    this.dropdownVisible = true;
  },
};
</script>

Even if JavaScript is disabled, users will still see the main navigation links and can navigate through the site. The dropdown and advanced routing are enhancements layered on top.

Tools for PE in modern UX workflows

As UX engineers, there are a bunch of tools and techniques to help us implement progressive enhancement in our projects:

• Feature Detection: libraries like Modernizr let us figure out if a user’s browser supports a particular feature and only apply enhancements when appropriate.

• CSS Techniques: modern CSS features like Grid and Flexbox offer enhanced layouts, but we should always make browsers stuck with tables still work. PostCSS can automatically handle fallbacks for older browsers.

• JavaScript Bundling: tools like Webpack and Babel let us write modern JavaScript while making sure it works across different browsers. We can also use code-splitting to conditionally load scripts based on the user’s environment.

• Testing: testing websites on multiple devices and browsers makes sure our PE strategy works. Services like BrowserStack can help with this.

(P.S. like a lot of people - BrowserStack was my first exposure to basic PE concepts, and it’s something I grew to respect - as annoying as it was to gets sites working in Safari was at the time)

Conclusion

Progressive enhancement isn’t just a code strategy - it’s an accessibility mindset. By focusing on the core experience first and layering enhancements on top, we create resilient, inclusive, and performant user experiences.

As I’ve learned more about progressive enhancement, I’ve seen how it aligns perfectly with the principles of good UX engineering. It lets me build better products, for more people, in more environments. Ain’t that what great UX is all about?