3 different ways to progressively enhance your website

The world of the web has changed a ton over the past decade. Websites that show one page at a time with no animations or interactions can feel stale and outdated.

If your website doesn't engage users, they may go elsewhere -- there are so many glitzy new "headless" interactive sites that suck people in, and if those people are ones who used to buy from you, that could be a big problem. Yet building a site using modern front-end frameworks can be costly, especially if you already have good content on your site that might need to be brought over.

Fortunately, there's a middle ground -- adding "progressive enhancements" to your existing site.

For the past month, we've been blogging about progressive enhancements, delving into different kinds of enhancements and different purposes behind them. Our hope is this will inspire you to think of ways to improve your own website!

Here's a summary of what we've blogged about:

1. Express complex systems of information. There is so much guidance about simplifying your message online -- but not all information domains are simple. Progressive Enhancements and great design can make it much easier to understand the relationships between the parts of a problem, and we've built a useful component to navigate this kind of information.
2. Improve Data Entry. When collecting information from users, sometimes they will need help providing the right answer. Custom context-aware data entry widgets can be an easy way to collect better information, reduce errors, and streamline processes.
3. Manage Data. Websites can do more than "just" present information -- they can also be tools to help you, or your customers, get their jobs done. Drupal in particular is a great platform to store data of all kinds, and entire custom applications can run in your browser using Drupal to store data in the back end.

"Headless" versus "Progressive Enhancements"

If you're paying attention to the web development world, content management system sites built on platforms like WordPress or Drupal almost seem passé. These are now "old school" technologies -- a lot of developers want to build sites using React, Vue, Angular, or Svelte, toolkits that move much of the functionality and processing into the browser where it can be far more interactive.

Yet it's still early days for these technologies, and you need developers to make any sort of change to sites built on these technologies.

Many agencies choose to make "headless" sites that still use WordPress for content management, and one of the front-end platforms for the actual user interaction. And this is a powerful way to go, but it's far more costly than just using WordPress alone.

A "headless" site is a site where the user's browser doesn't load a normal web page -- instead, it loads a bunch of Javascript, which then fetches content from the back end through an API. Building a headless site is an entirely different process -- you create templates and components in Javascript, use "client-side" data stores to keep track of various elements, and essentially build entire applications that run in your browser and just loads the bits it needs from the back end. This provides extreme flexibility, but it also requires a lot of work.

Progressive Enhancements are a middle ground -- instead of needing to rebuild all the functionality, navigation, and structure of your site a second time in the headless app, you simply carve out smaller chunks of functionality you want to improve and build them into your existing site.

This allows you to be far more targeted and efficient with what you choose to build, especially if you already have an existing site.