Progressive degradation

How to understand the principle of progressive improvement?

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

Both of these principles help to make 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 reference points and the choice between these principles depends on the project. The features of each we now analyze.

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

You could see in the articles the abbreviations PE and GD or their full versions Progressive Enhancement and Graceful Degradation. Long compound words, behind which are some muddy ideas, right? In fact, everything is easier. To begin with, we’ll make them closer: progressive improvement and gradual degradation. Immediately somehow become more familiar.

A progressive improvement is when all browsers get something equally good, and the most modern get another cherry on the cake. This works well with technologies that are not yet widely supported, but can already benefit. For example, you made a layout on floats, backed up with all-clear fixes and it just works. And then you check the support of the supports directive and make it even cooler: the rubber is more flexible, the adaptation is more adaptable and something like that.

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

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

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

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

In fact, 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 dialogue 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? And the devil knows.

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

 <a onclick="login()" href="login.html">  </a> 

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

And here we come to the general pleasant features of these principles. It's not just about old browsers: a lot of things can go wrong in the frontend, especially with scripts. Blocked someone else's CDN, your server zapyastil, unsuccessfully called the file and it was eaten by the adblocker - the circle of enemies. But if everything is progressively improving or gradually deteriorating, then the problems are much less.

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

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

If you knocked out traffic jams and stopped the elevator in which you drive, then you have a problem. If the escalator stopped, then you just go on - it degraded to the stairs. Let's do interfaces that are ready for life and open to all people and browsers.

Video version

Questions can be asked here .