Be the first user to complete this post

  • 0
Add to List

Progressive enhancement vs Graceful degradation

The terms Progressive enhancement and Graceful degradation are often used in conjuction with each other although they offer completely opposite viewpoints in terms of web development.

Graceful Degradation

This refers to the development philosophy of building applications relying on the features provided by newer versions of web browsers. This implies that older browsers will either cripple or will not support those features and will require your clients to upgrade. This is generally not considered a good way to building applications anymore.

Progressive Enhancement

Progressive enhancement is about first determining a baseline of features that your application needs to support across all 'relevant' browser versions and then implementing those features without having to rely on the bells and whistles of newer technology. You then add another layer to enhance the experience of your application for browsers with better capabilities. This is a much more preferred development philosophy. Examples of where you might consider using progressive enhancement
  1. Your end user may or may not support javascript. Modern frameworks do a pretty good job at doing a server side render, which means that your entire application content can be delivered on first render even if the user cannot load content via ajax.
  2. Transparent png images are not rendered correctly on older browsers. Prefer using JPEG's with a white background or the background of your page to ensure that they are universally viewable.
  3. This philosophy also interleaves with accessibility. Make sure that you use alt tags for all of your images and title tags for anchors and other important sections of your page so that screen readers that are used by people with disabilities can also deliver your content.



Also Read:

  1. Getting started with es6 iterators and iterables
  2. es6 iterators and iterables - creating custom iterators
  3. Parse html response with fetch API
  4. A simple requestAnimationFrame example visually explained
  5. Getting the parameters and arguments of a javascript function