A minimum viable experience makes for a resilient, inclusive website or app

I explain what a minimum viable experience is and how I think it’s a crucial part of progressive enhancement’s role in building resilient websites and apps for the web.


The whole idea of progressive enhancement is using the power that the web platform gives us for free—specifically, HTML, CSS and JavaScript—to provide a baseline experience for the people who visit our sites and/or apps, and then build on that where appropriate and necessary, depending on the capabilities of the technology that they are using.

These capabilities can and do vary hugely. A very large cohort of people that use the internet, do so on Android devices (70% + market global share), often on slow connections. This makes the probability of the browser environment being hostile to websites and apps that are distributed with a single point of failure, very high. This is often the case with client-side JavaScript-heavy single page applications, known as SPAs.

We can mediate this weakness with progressive enhancement, though, and a minimum viable experience approach helps us to use a principle of least power to make sure that everyone gets a great experience.

What is a minimum viable experience? permalink

I started using this term as a nod to a more commonly used term: minimum viable product, which is a the minimum version of a product that satisfies the purpose of itself, making it worth existing in the first place.

A good example of a minimum viable experience is an email client that is just a HTML form that when submitted, sends an email to the specified address. You could then enhance this minimum viable experience if JavaScript is available by adding client-side validation, auto-complete and all of the other handy tricks our modern email clients give us. The important thing is that when JavaScript fails, we can still provide the basic capability that the user needs.

The real beauty of progressive enhancement is that if you really take it seriously, a user won’t even notice if they don’t have the “optimal experience”. The fact they have an acceptable experience at all—a minimum viable experience—is good enough.

A diagram often used to demonstrate a minimum viable product. It’s explained in detail over the next few paragraphs

This sort of diagram is often used to illustrate a minimum viable product, but I think it perfectly illustrates what progressive enhancement is.

The top row shows four steps with a car as the optimal experience, right at the end. The problem is that in the preceding three steps, the experience is either completely broken or extremely unusable. A car is useless with just one wheel or with no windows or roof (especially in rain-sodden England where I live). It’s only when everything works perfectly when this experience is optimal, which in the case of the web, knowing that the likelihood that everything will work perfect is extremely low, seems like a daft approach, right?

Step in the second row, which has the same four steps. The difference here is instead of a single wheel: step 1 is a skateboard. Instead of a chassis and wheels only, step 2 is a micro scooter. Step 3 is a push bike, instead of a car with no roof or windows, and finally, step 4 is a motor scooter instead of a car. Every step is acceptable and gets the user from A to B. It just so happens that with each progression, the experience gets better.

I deliberately chose the motor scooter as the optimal experience in this context because if you work with a progressive enhanced mindset—creating a minimum viable experience—you more often-than-not, create a much lighter end-product. This is because you don’t need to mess around with backwards-compatibility hacks or polyfills.

Identifying a minimum viable experience permalink

I’ll quickly run-down the process of how I identify a minimum viable experience and then, enhance it. I’ll use the context of this jotter app I made, for quick note-taking on the web.

The jotter app, which on the left, is a large text box. It features a placeholder: “Add your lovely notes here”. On the right is some information about the app

First up: what’s the minimum viable experience? It’s a humble <textarea> element! Good ol’ HTML allows us to create something useful immediately, and all this app needs to work is a <textarea> to write notes in. Happy days.

Now, how can we enhance that minimum viable experience? Firstly, we can add some CSS to make the <textarea> fill the space up and remove some default styles, like this:

Code language
CSS
textarea {
  display: block;
  width: 100%;
  min-height: 100vh;
  border: none;
  background: transparent;
  font-size: 1.2rem;
  padding: 1rem;
  resize: none;
}

Along with some light CSS that provides our layout and look and feel, it’s all nice and simple, so far and things are nice and resilient.

Right about now is the time to start adding some JavaScript. As you can see on the app, there’s a toggle for dark mode and light mode because although honouring the colour scheme user preference by default is useful: you should give users a choice because frankly, they might not like your dark/light mode!

Next on the list of JavaScript enhancements of this app is offline storage, using local storage to save your notes as you type. This means that if you accidentally refresh your browser: you won’t lose what you were typing. It also means that your notes will be there if you come back another time. This is especially useful for shopping lists, I find.

Lastly, you can enhance it even further by using a service worker to make it work completely offline by putting all the assets into cache storage then routing all requests through the service worker. Suddenly, you’ve got an installable, progressive web app, that works offline!

Not bad for something that starts as a humble <textarea>, right?

The same jotter app as before, but this time, it says “Progressive Enhancement Rules” in the text box

Wrapping up permalink

I appreciate that this is a simplified example, but the minimum viable experience approach to building for the web really does make things scale, far beyond the limited, fragile approach of heavy-duty, client-side JavaScript-driven development. Progressive enhancement is how so much of the web works already—especially the flexible, declarative programming languages that power it: HTML and CSS. It’s why so many websites that are now decades old, still work!

JavaScript is not something to turn your nose up at either. It’s extremely handy at enhancing a user’s experience. When it doesn’t load, it doesn’t matter, because if you produce a solid minimum viable experience: the user can likely do what they came to do anyway.

A last thing to note is that progressive enhancement and modern frameworks are not at odds with each other. Heck, this site is built with Next JS but still has progressive enhancement right at its core.

If you prioritise the experience of your users over your experience developing something, trust me: everyone will be much happier overall.

Until next time, take it easy 👋


Comments

If you liked this post, you might like these ones, too

  1. Improve the readability of the content on your website

    Learning how to make long-form content, like blog posts, read well is a valuable and transferable design skill to learn. In this tutorial, we’re looking at how CSS gives us all the tools we need to achieve this, as a compliment to semantic HTML.

    Continue
  2. CSS Frameworks, hype and dogmatism

    Some notes on the dogmatism and gatekeeping themes of Tech Twitter and how they can generate often incorrect and naive statements—specifically about frameworks and methodologies.

    Continue
  3. What are design tokens?

    Design tokens are just spicy variables, right? Wrong! They are an extremely versatile way of sharing design properties and in this tutorial, you’ll learn how they work.

    Continue

Become a supporter by joining the Piccalilli Membership

For as little a $5 per month, you can get access to a private, friendly community, get a weekly newsletter and help to make as much content free as possible around here. If you join the $10 per month supporters club, you get access to premium tutorials and free access to mini courses!

Become a member

Sign up for updates

Stay up to date with updates from Piccalilli. You’ll get alerted as soon as any new content gets published. You’ll also get updates on upcoming courses and membership features! You can unsubscribe at any time, too.