(translate) Understanding "progressive enhancement (progressive enhancement)"

Original: Understanding Progressive enhancement

Author: Aaron Gustafson

Translator: Empty curtains @ Taobao UED

Since 1994, the Web development community has been called the "smooth degradation (graceful degradation)" drum. This is a concept introduced from the engineering world that provides a more comprehensive browsing experience for the newest and best browsers, and provides only a few basic features for those unfortunate enough to use Netscape 4. This approach does work, but it does not really fit the original design of the "popular accessible Web (universally Accessible Web)" of Tim Berners-lee's father of the web.

About 10 years later, some smart people began to question the "smooth degeneration" and eventually found it flawed on many levels. They are committed to improving content availability (availability), global accessibility (overall accessibility) and mobile device browsers, and finding a new way to WEB development- A way to focus on content and provide more practical support for older devices.

In the 2003 SXSW Festival and Conference, South by Southwest Festivals + conferences, this refers to the "interactive" theme of the conference, in addition to "film" and "Music" two themes), Steve Champeon and Nick Finck published a speech titled "Looking Forward to the future of Web design (inclusive web designs for the Future)." In that speech, they described the blueprint for a new approach to WEB development. Steve named it "progressive enhancement."

A (subtle) difference between the two

In case you're scratching the back of the head trying to figure out the difference between "smooth degeneration" and "progressive enhancement," I can tell you that "they are two views of the same thing". "Smooth degradation" and "progressive enhancement" are all focused on how well the same Web site behaves under different browsers in different devices. The key difference is in where they are focused, and the process that concerns how the work is affected.

The idea of "smooth degeneration"

The "Smooth degradation" view is that the Web site should be designed for the most advanced and perfect browsers. The test work in browsers that are considered "outdated" or functionally missing is scheduled at the end of the development cycle, and the test object is limited to the previous version of the mainstream browser (IE, Mozilla, etc.).

In this design paradigm, older browsers are thought to provide a "simple but poor, but passable" browsing experience. You can make some small adjustments to fit a particular browser. But since they are not the focus of our attention, other differences will be directly ignored in addition to fixing larger errors.

"Progressive enhancement" view

The "progressive enhancement" view should focus on the content itself. Notice the difference: I didn't even mention "browser" three words .

Content is the incentive for us to build our website. Some websites show it, some collect it, some seek, some operate, and some sites even contain all the above, but the same point is that they all involve content. This makes "progressive enhancement" a more reasonable design paradigm. This is why it was immediately adopted by Yahoo! and used to build its "Hierarchical browser support (graded Browser Support)" strategy.

How is it effective?

The concept of "progressive enhancement" is actually very simple: from the content. Content provides a solid foundation for styling and interaction building. If you have a sweet tooth, you can analogy it to a m&m peanut chocolate:

Image: "Progressive enhancement" of chocolate layered structure
(from top to bottom: content, performance, and client script)

Let's start with your peanut kernels--content, which is made up of rich semantic (X) HTML code. Wrapped in content is a rich (rich) CSS cream. Finally, JavaScript is the layer of hard icing that can lift its wonderful taste (and make sure it is "only soluble in the mouth, not in the hand").

If you have a good understanding of the slogan of the Web standardization movement-separation, separation, and separation-then this metaphor is very appropriate. Because development based on WEB standards is often likened to a sandwich cake (or, more imaginative metaphor, a creamy muffin).

I use m&m peanut chocolate as an analogy because each of its outer layers is completely wrapped in the inner layer, very similar to the way the styles and scripts in a Web page contain content.

If you're still willing to listen to my "food analogy" (I hope it doesn't make you feel a little hungry), I'll explain "why this view is more reasonable" and tell you "how each layer of the paradigm should interact".

Peanut son

Some people like to eat peanuts, in fact, compared to m&ms peanut chocolate, some people prefer peanuts themselves. Similarly, some people (and some things like search engine spiders) only want content.

However, there are those who do not enjoy the chocolate and sugar coated with peanut kernels (for example, diabetics). Analogy to the former, people who use mobile devices or older browsers may not enjoy your beautiful visual design or interface interaction design driven by fluent Ajax.

Make sure that your tag structure communicates the content to the user in the most detailed way, which is necessary to provide the user with a basic browsing experience.

Chocolate coating

Next, you can dip the content into the hot, delicious CSS chocolate--but before you wrap them up, you need to keep an eye out for the following things.

Some people like to eat peanuts wrapped in chocolate. These people are just like those browser users who use CSS only but may lack the appropriate JS support. Or they are employed by a company whose IT staff are struggling to cope with JavaScript security issues. For these people, JavaScript is likely to be completely banned.

But whether they love to eat or have to eat this kind of chocolate peanut beans (only peanut coating, no icing), they should enjoy the right to this delicious meal. There are ways to help you decorate your content with a "progressive enhancement" style, which will be the subject of the next article in this series.

Hard icing.

Finally, you can start adding JavaScript to the mix. JavaScript is a rich interaction possibility, it also has the ability to operate and interact with the content and presentation layers, and it can be said to actually turn the Web site into an "experience".

I don't know how m&m the hard icing to the outermost layer (but I guess it's just another dip in the sauce), but as long as you think "progressive enhancement" in your head, adding JavaScript-based functionality and interaction to your site can be a breeze. And, just as m&m can have dazzling colors, the JavaScript experience can be characterized by a different target browser and device capabilities.

As you may already know, this development approach is known as "non-invasive (unobtrusive)." I will detail its technical implications and guide practice in the third and final chapter of this series.

Put them together.

Once you understand the idea of "progressive enhancement" and start using it to guide your practice, you'll find that the development process is actually very simple; it's probably easier than making a chocolate bean. The next two articles in this series will help you use CSS and javsscript to refine your "progressive enhancement" techniques and show you how to translate ideas into code.

Illustration: Kevin Cornell

About the author

ALA 's technical editor Aaron Gustafson is the founder and chief advisor to the Web Development store--easy Designs. He often writes articles and speeches on web standards and is committed to improving web availability and accessibility.

The words of the translator

This article covers three highly controversial terms: "progressive enhancement (progressive enhancement)", "smooth degeneration (graceful degradation)" and "non-invasive (unobtrusive)", in order to ensure the fluency of the majority reading, I have adopted these three popular translation methods, and in order to take care of more readers who are not accustomed to this translation, I have attached the original words, such readers can be translated as the original word code to look at. In addition, translation is a very subjective behavior, I personally in most of the time will use a free translation to deal with the more clumsy sentences, "Fidelity" is the ultimate goal of all translators, but if my translation does not suit your taste, please forgive me. Finally, a different version of Yuber, another member of the team, is attached, hoping to provide you with more options.