TIP: There's nothing wrong with using all the latest bells and whistles to support snazzy features of newer browsers, but try to do it in a way that still allows users not supporting (or intentionally disabling) these features to access your basic content. Fortunately, this is easy to do on the Web, if you follow the spirit of the languages and protocols instead of fighting it.
"Graceful Degradation" is an important principle in Web design. It means that, when you put in features designed to take advantage of the latest and greatest features of newer browsers, you should do it in a way that older browsers, and browsers letting users disable particular features, can "step down" to a method that still allows access to the basic content of the site, though perhaps not as snazzy in appearance.
Nearly every new feature added to the Web has been done in a way that allows graceful
degradation, starting with the addition of the
NOTE: It would have been even more graceful if the
Newer constructs like
Here's an example of an applet coded for graceful degradation:
A Java-supporting user will see the result of an applet "WaveEffect", which presumably
would show a graphic with animated wave effects, and provide a way of getting to the linked
URL provided in the "HREF" parameter. But a non-Java user would have no way of seeing what
was supposed to be there, or getting onward into the site if this was the only navigational
technique, except for the alternative content. This content consists of a normal static
In some cases, when there are several different ways of doing the same effect, and the
set of browsers supporting one or another of them is slightly different, you can achieve
the maximum compatibility by having several levels of nested contstructs that can be
gracefully degraded, like an
There are also a few special tags that let you include content that is only used when
specific features are unavailable or disabled. For instance,
It takes only a little bit more work to do this correctly, and adds greatly to the accessibility, flexibility, and search-engine indexability of your pages.
Often, developers will do this with a
Fortunately, there's a better way. Instead of
NOTE: Since writing the above, I've found out that certain old browsers with early
code, such as a link mimicing the browser's "Back" button with
TIP: Always use a meaningful
By all means, don't use the regrettably rampant technique of making hyperlinks go
to the "dummy"
Gracefully Degrading Menu Rollovers
Another popular effect is to have a graphical navigation menu do "rollover effects" when the user moves his/her mouse over the items, such as "lighting up" or "pushing down" the button that is in current focus, or showing more information about the currently-selected item to help the user decide whether to follow the link.
Sample code for a gracefully-degrading rollover effect is below. However, more than learning specific code, you should learn the general attitude behind this and other gracefully-degrading techniques in Web development. That is to use a sound, logical structure with simple, widely-supported HTML constructs, and then add the "bells-and-whistles" as optional add-ons which can be ignored by non-supporting browsers. The contrary attitude, which creates non-accessible sites, is to skip the "sound, logical, simple" stage and implement the desired effects directly in some advanced language (Java, Shockwave, etc.), ending up with code that doesn't even contain a "plain" HTML link that browsers can follow without running the "applet", "script", or "plug-in". Then, if such authors decide as an afterthought that they need to support "plainer" browsers, they end up sticking an ugly set of "alternative" text links below the "fancy" navigation, which wouldn't be necessary if they designed the site in a graceful manner in the first place.
Here's the "graceful" rollover code: (Note: In this example, the "normal" versions of
the navigation buttons should be placed in
Note the "
If you're letting some editor or utility program generate the "rollover effects" for you, make sure it's using a gracefully-degrading technique such as this, and make sure you put appropriate ALT attributes in the images (by hand, if necessary, if the program fails to give you a way to do it).
Client and Server-Side Forms
If you get into HTML discussions on newsgroups, you'll probably see somebody claim that "graceful degradation" really means making sites plain, boring, and "lowest common denominator." This is far from the truth. People who say it either don't truly understand graceful degradation, or are just trying to make cheap shots against the so-called "purists" rather than discuss Web authoring in a rational way. Actually, graceful degradation does not demand that you not use anything fancy or nice-looking, or that you "author for outdated browsers." It simply requires you to understand the structure of all the elements you use, and be aware of and properly use the built-in features that permit the insertion of alternative content that is accessible to users who can't or won't use the fancy stuff.
Graceful Degradation vs. Progressive Enhancement
There's been some discussion lately on Web development sites about the distinction in mindset between "graceful degradation" and "progressive enhancement", which are actually pretty similar concepts, but looked at from different directions. Wikipedia has an article on progressive enhancement, and there have been essays on the subject. The basic difference is that in "progressive enhancement" you begin with a simple, logical, compatible set of marked-up content, and then layer enhanced features for modern browsers on top of it, while "graceful degradation" begins with a full-featured, advanced site, full of bells and whistles, and makes sure it also has content that can be accessed if the fancy features don't work for a particular user. By this standard, the mindset I've advocated fits more in PE than GD, though I used the GD terminology because the other term hadn't been invented at the time. At any rate, if done skillfully, thoughtfully, and cluefully, both techniques should result in very similar sites.
Make your site better by looking at other sites that show, by example, what not to do!
NOTE: The inclusion of a site in my "Hall of Shame" links should not be construed as any sort of personal attack on the site's creator, who may be a really great person, or even an attack on the linked Web site as a whole, which may be a source of really great information and/or entertainment. Rather, it is simply to highlight specific features (intentional or accidental) of the linked sites which cause problems that could have been avoided by better design. If you find one of your sites is linked here, don't get offended; improve your site so that I'll have to take down the link!
This page was first created 19 Jul 1998, and was last modified 14 May 2012.