Progressive enhancement

Progressive Enhancement is the principle of starting with a solid base foundation and then adding enhancements to it, for clients that can handle the improved experience. It is developing your website or app from simplicity to complexity.

It is considered good practice to use PE, because it covers a great range of potential issues. The big advantage is that it forces you to plan your project out, and think about how to get the most out of basic web technologies, before adding more complex scripts and functionalities. This way you'll always have a solid foundation to fall back on, once complexity is added to the project.

Why would I use it?

PE has many advantages, some of the most important ones are:

• It supports the principle of "Release early, release often." With a strong foundation, you will be able to release projects as soon as they work. Then you can start focusing on adding more complex enhancements.
• PE projects are easily maintanable: troubleshooting is easier, and you can always fall back on your base foundation. You also don't have to worry about 'breaking' the basic functionalities of the project, while working on complexer interactions.
• It gives your users the security of knowing your site/app's core functionalities will still work, even if their browser can't handle the enhancements.

How do I use it?

PE can be broken down into several layers:

1. HTML: clean and semantic HTML allows your site to work well with text-based and speech-based user-agents navigating the content.
2. CSS: visual-based user-agents add your styling to the content on your site.
3. JavaScript: this is where you add enhanced functionaliites, that add to the user experience. If the user-agent isn't able to use JavaScript, the base functionalities of your site will still work.

How will I use it in my feature?

I've made a code plan to describe what kind of progressive enhancements I will implement in my dating app feature.

Here's is how one of the pages looks, enhanced from HTML to CSS to JavaScript.

Sources

Ontwikkelen met progressive enhancement · Fronteers. (n.d.). Retrieved February 25, 2020, from https://fronteers.nl/blog/2015/05/ontwikkelen-met-progressive-enhancement

Progressive Enhancement: What It Is, And How To Use It? (2009, April 22). Retrieved from https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/

Tse, T. (2017, February 15). What is Progressive Enhancement and Why Should You Care? Retrieved from https://www.shopify.com/partners/blog/what-is-progressive-enhancement-and-why-should-you-care