Progressive degradation

How to understand the principle of progressive improvement?

Let's deal with gradual degradation at the same time.

Both of these principles help to create reliable sites that work well not only in your favorite browsers, but also in unloved ones - which does not make them less important. They just have different points of reference and the choice between these principles depends on the project. We will now analyze the features of each.

The web reflects the diversity of life well: there are people of different ages, views, capabilities and there are browsers of different versions, engines, platforms and devices. Many different clients for one of your site, which must be flexible enough to do its job.

You may have seen in the articles the abbreviations PE and GD or their full versions of Progressive Enhancement and Graceful Degradation. Long complicated words, behind which are some vague ideas, right? In fact, everything is simpler. Let's start by making them closer: progressive improvement and gradual degradation. Immediately somehow more dear to steel.

A progressive improvement is when all browsers get something equally good, and the most modern get a cherry on the cake. This works well with technologies that are not yet widely supported, but which may already be beneficial. For example, you made a layout on floats, backed everything with clear fixes and it just works. And then you check the grid support with the supports directive and make it even cooler: the rubber is more elastic, the adaptation is more adaptive and something like that.

.column {
  float: left;
}
@supports
  (display: grid) {
    .main {
      display: grid;
    }
}

Or here's a regular site, how it works: if there is Internet, it loads, there is no Internet, sorry. Around vrayfay and offline. And you connect a service worker to it, which stores the site’s resources in its cache, monitors network requests and, in the case of offline, returns everything from there. This is magic! And also progressive improvement. The site may not know anything about the service worker, but it works independently.

Gradual degradation is when you are on the edge, at the very edge, and do not regret modern technologies, but at the same time think about old browsers. With this approach, the interface is simplified or degraded gradually, but you can still use it. For example, when you specify a raster background image to a vector one for browsers that do not know how to SVG. Or set a solid colored background before describing the gradient.

.element {
  background-image:
    url(bitmap.png);
  background-image:
    url(vector.svg);
}

In fact, one and the same situation can be turned both as a progressive improvement and as a gradual degradation. For example, you have a login form that pops up a dialog after clicking on the "enter" button. But if you open this "button" in a separate tab, then you can enter on a separate page with this form. What principle works here? But the devil knows him.

If you first made a login page in HTML, and then decided to make it closer to people so that you can log in without going to the page, this is a progressive improvement. If any zealous authority suddenly blocks the CDN with your jQuery, you can still log in, because you correctly improved the interface progressively.

     Войти

But if you have a fashionable one-page application with rendering on the client and the login form from the very beginning - this is a dialogue, and for older browsers you render static HTML pages on the server and then the login page is loaded instead of the dialogue - this is a gradual degradation. You are well done too.

And here we come to the general pleasant feature of these principles. It's not just about old browsers: a lot of things can go wrong in the frontend, especially with scripts. They blocked a foreign CDN, your server went crazy, the file was unsuccessfully named and the ad blocker ate it - enemies around it. But if everything is progressively improving or gradually degrading, then there are much fewer problems.

Even when everything is in order, it is more pleasant to use such interfaces: the link with the login can be opened in a separate window. While the background image is loading, I see a background color similar to it, and not white text on a white background, and readers see altos with a description for the pictures and so on.

Which principle to choose? Yes, both at once! They can be easily combined. But if you choose a global principle for the entire project, then it is better to see which audience is more important to you. A project with a history is better suited to progressive improvement, a new-cool one will be easier with gradual degradation.

If traffic jams are broken and the elevator you are driving in has stopped, then you have problems. If the escalator stops, then you just move on - it degraded to the stairs. Let's make interfaces that are ready for life and open to all people and browsers.

Video version

Questions can be asked here .