Progressive Enhancement or Graceful Degradation

You can't just take and tell about progressive enhancement without mentioning graceful degradation. What is the difference between these concepts? As mentioned in an earlier article , graceful degradation can be translated as fault tolerance . This is a very broad concept, but in the context of the web, it can be understood as the fault tolerance of client web interfaces, the server-side of sites, and so on. In this article, graceful degradation will be understood as the resiliency of client web interfaces .

Graceful degradation can be expressed in the ability to work when JavaScript is turned off, in a fairly neat display of the interface in a browser that does not support new CSS3 properties, in an adequate display of the site when images are disabled. In each of these cases, the user experience with the interface will in principle be possible, although not so convenient.

What is progressive enhancement ? Most often, this term is translated as a progressive improvement . Progressive improvement implies that web interfaces should be created in stages, cyclically, from simple to complex. At each of the stages should be a complete web interface that will be better, more beautiful and more convenient than the previous one. We can say that now there are four such stages:

1. “Old-good-HTML” stage
2. CSS stage
3. CSS3 stage
4. Javascript stage

In the first stage, the original content of the page is laid out using HTML. At this stage it is necessary to make a logical and semantically correct markup. No additional clearance is carried out. The result is a correctly-marked HTML document, which the browser displays as it sees fit. Such a document can be called “the lowest common denominator”, since it will be correctly displayed in any , even the simplest, browser. Progressive improvement insists that the first stage is the most important , as there is nothing more important on the web than the content.
')
At the second stage, the document is drawn up using the good old CSS and acquires a more accurate look: a page grid appears, element font parameters, background images, and so on are set.

At the third stage, new features from the CSS3 specification family are applied, and the document is brought to shine: translucent dies, round corners, and shadows. Also, using CSS3, you can add various animation and decorative features: gradual fading or displacement of elements, highlighting of form fields, and so on.

At the fourth stage, the process of interaction with the interface is brought to mind: various AJAX solutions, dynamic elements, the same calendars, and so on. Javascript is used here. This stage is responsible for convenience.

We summarize the purpose of the described stages:

1. The meaning of the document, the logical markup. Technology: HTML.
2. Appearance. Technology: CSS.
3. Impeccable appearance. Technology: CSS3.
4. Interaction, interactivity, convenience. Technology: JavaScript.

We can say that a web interface created in good faith and with high quality, in accordance with the graceful degradation approach, will behave in the same way as a web interface built in accordance with progressive enhancement. That is, progressive enhancement is nothing but graceful degradation, brought to perfection. Nevertheless, we note the key differences between these concepts:

• Graceful degradation is a broader concept than progressive enhancement, which is limited only to web interfaces. Progressive enhancement - this is our, native, web.
• Progressive enhancement sets the motion vector (start simple!), But for graceful degradation it is not so important.
• Progressive enhancement insists on the importance of the content, but for graceful degradation it is in the background.

In general, progressive enhancement is a more rigorous and consistent ideology for the development of web interfaces.

Why Progressive Enhancement Appeared

Earlier it was said that if we take the web interface to the maximum quality in accordance with the graceful degradation, we get the same thing as using progressive enhancement. So why invent this enhancement?

The answer is simple: very few people have done a graceful degradation of very high quality. This frustrated the really upscale and responsible developers. After all, to say that “I am well done and do graceful degradation” almost anyone could, but the time and effort of different developers differed by orders of magnitude.

In the simplest case of a bad graceful degradation, the site is made for the most modern browsers, and for the obsolete at the top of the page a message is added that the browser is too old. At the same time, nobody cares what will happen to the site in the old browser: whether it collapses or not, all the content will be visible or something will disappear. Another common variant of bad graceful degradation is that the interface stops working when JavaScript is disabled. A simple example: try to send a message in VKontakte when JavaScript is disabled.

In short, such hack-work with fault tolerance was rather bored by the “right” developers, it was necessary to do something. Progressive enhancement arose as a reaction to poor graceful degradation. Now really good developers and designers can do progressive enhancement, and bad ones can't, since it is more difficult and more labor-intensive. At the same time, a new approach has absorbed all the best practices from graceful degradation.

Practical example

We figured out what progressive enhancement is, now it's time to demonstrate with a practical example how to apply this approach in life. We will develop and design a simple form of authorization in accordance with it.

In the first step, create a form using pure HTML. Yes, the form is not so beautiful, but it is functional. The resulting code and the result are shown in the figure:



At the second stage, with the help of the simplest CSS, we will make the form more beautiful: we will add a background, dimensions, indents. Now the form looks better:



In the third stage, we use some new CSS properties to make the shape shine. Add rounds using border-radius, shadows for elements using box-shadow, use css-gradients to design the button, and so on. We use some advanced selectors to get rid of unnecessary indents. The result is pretty good:



At the fourth stage, using Javascript, it would be possible to make an AJAX form submission so that the user can log in without reloading the page. Unfortunately, dynamic behavior cannot be shown using a screenshot.

In the simplest example, we showed how the progressive enhancement approach works. By the way, this example can be “felt live” in an interactive demonstration on htmlacademy .

To understand how graceful degradation works, simply review the steps in the example in the opposite direction. The question arises - is it possible to make graceful degradation bad for this example? Of course yes! For example, if a coder thought like this:

We will login using AJAX, so it’s not necessary to bother with the form, I use a div. Round corners and shadows ... This is a problem. For input fields I use input without borders, and set the background with a frame and shadows as a background. I will make a button using a div, on the background I will hang a picture of a button with gradient and shadows. Cool! And in the old IE it will look beautiful, and just a few pictures cut.

What problems will arise with this approach? First, when JavaScript is disabled, it will not be possible to log in, since there is no form and no data to be sent. Secondly, with disabled images, the form will not be visible, since the appearance of the fields is set exclusively with the help of images. It remains to hope that such maker-ups have already become extinct.

Progressive Enhancement and Responsive Design

Recently, an approach called responsive design , in Russian adaptive or responsive design, is gaining popularity. The essence of the approach is to use a certain set of techniques (rubber grids, rubber images, CSS media queries) to make the web page adequately displayed on various devices: from a smartphone to a widescreen monitor. This is achieved by dynamically changing the page grid, element sizes and so on.

At the same time, a similar approach called mobile first appeared . Its name can be translated into Russian as “first for mobile phones!”. In essence, this is the same responsive design, but with a mandatory requirement: always start designing an adaptive interface from the mobile version.

The ratio of responsive design and mobile first approaches is very similar to the ratio of graceful degradation and progressive enhancement. The first approach is paired in a pair, and the second approach is private and adds to the first additional requirements: “start with a simple html”, “start designing with a mobile version”, “pat the cat”.

It is worth noting that the voiced approaches are perfectly combined with each other and complement each other perfectly. And in the near future all top performers will declare: “We are doing mobile first + progressive enhancement”.

---

Unfortunately, meritt , the author of the article, does not have enough karma, so all the minuses and advantages can be addressed to him.