Designing a web page is simple. Making it look good is a little harder. Making it look good on every web browser is very hard. This is where the concept of Graceful Degradation comes into the picture.

Graceful Degradation is an idea that starts with making a web page look good on the best web browser rendering engine available and then tweaking it to look good on other web browser rendering engines with the understanding that it will never look identical.

To understand this process it is important to first understand the difference between a web browser and a web page rendering engine, sometimes called a layout engine. In simple terms a web browser is just an user interface for a rendering engine. It is the web page rendering engine that does all of the hard work to turn HTML with scripting and style sheets into the formatted layout you see as a web page.

The most common web rendering engines are Trident (used by Internet Explorer), Gecko (used by Firefox and others), Webkit (used by Safari, Google Chrome and many others including many smartphone web browsers) and Presto (used by Opera and some smartphone web browsers).

Each of these rendering engine development teams are all trying to keep up with the current published web standards, some of them even support new standards before the standard is finalized. Or at least the general trend is to support the standards.

What does Graceful Degradation look like?

Here is a very simple example of the Graceful Degradation process put into practice.

At the moment the Gecko (Firefox) and Presto (Opera) rendering engines have a lot of very nice next generation rendering features. These are features aimed at compatibility with the new web standards that show up in the web browser almost the same moment the standards are published. The Trident rendering engine is currently the least compatible with web standards. All other web page rendering engines fall somewhere in between.

The following screen shot is a simple web page designed to the HTML5 and CSS3 standards as shown by the Gecko rendering engine. It has only two images; the little circle logo on the black menu bar and a background graphic in the lower right corner with the same logo. The rest of what you see is plain HTML with some applied styles.

Gecko

Notice the rounded corners on the red box at the top of the page and the menu tab headings. This is a new CSS3 round border style. Next look at the inset shadow in the red box at the top of the page and the shadow around the drop down menu. This is a new CSS3 box shadow style. Next notice the text inside the red box at the top of the page and the page heading text on the white background next to the drop down menu. These are normal H1 and H2 tags with text shadow styles. Several shadows can be layered on top of each other to give the embossed effect you see on the H2 tag. And lastly a subtle example of rotated (tilted) text on the fourth list item on the page. This again is a CSS3 style applied to normal text. As you see from this example, the Gecko rendering engine supports all of these styles today.

But what about Webkit, the rendering engine behind Safari and Google's Chrome web browser?

Webkit

It looks very much the same with two small exceptions. The red box inset shadow and the rotated (tilted) text styles are not implemented yet. These are very small changes from the original web page design, but the page still renders close enough to the original design that the average web page user would not notice the difference.

Trident

Now we get to the lowest common denominator, the Trident rendering engine, and a good example why so many users are moving away from Internet Explorer to web browsers that make the web look better.

This is what the web looked like a decade ago. No round corners. No shadows and only very basic text styles. While this is still a fully functional web page, it lacks all of the attractiveness intended by the web designer.

When faced with this plain web rendering, most web designers are forced to create images to simulate the round corners, shadows and tilting. This only serves to turn text into graphics which are invisible to important things like web search engines and screen readers for visually impaired users. This last part is not just talking about blind users. When you consider the average age of the population of this planet is getting older, it is very likely the majority of the Internet users will be needing some kind of visual aid to use the Internet at some point in their life. This means creating web content that caters to those with different visual needs will be required to remain competitive.

Why not start now?

Graceful Degradation web design accepts that this web page does not look as good on a less capable web browser if it is still completely useable and accessible. If you are concerned about the look of your web page, gently encouraging your users to get a better rendering engine serves the dual purpose of making the web look better to the user and strongly encouraging the other rendering engine developers to keep up with the standards.

A quick note about proprietary features.

The Trident (Internet Explorer) rendering engine has used proprietary syntax for things like rotated (tilted) text for a long time. In a way this makes their lack of support for the same feature using industry standard syntax seem more strange, but there is another point that is much more important to note about proprietary features.

The problem with any proprietary solution is that by definition it is only available on one rendering engine. If you want the same effect on all other rendering engines you must either make a different page for each rendering engine (duplicating your work and cost) or you create one page that follows the published standards and encourage your users to adopt rendering engines that also follow those standards.

Fortunately the second choice is getting a lot easier because there are a growing number of very high performance and very high functioning rendering engines available. All of these next generation rendering engines have very responsive development teams that openly demonstrate their ability to keep up with the published standards.

First published 2009-11-09. The last major review or update of this information was on 2010-10-21. Your feedback using the form below helps us correct errors and omissions on this page.