It may be difficult to remember, but back in the web’s early days most websites were downright ugly. One of the reasons for this is that HTML, the markup language that drives the web, was originally developed in order to structure content semantically, not to make it pretty.

Thankfully, modern HTML can accommodate both the semantic and aesthetic requirements of a professional web presence. But not all browsers and computer systems can handle some of the newer layout techniques. So how can we support a wide variety of browsers without sacrificing our designs to the lowest common denominator? The answer is graceful degradation.

Graceful degradation is a term used to describe providing full-blown super-fancy designs and functionality to newer capable browsers while serving a simpler design and basic functionality to older browsers. Although the site looks slightly different depending on system capabilities, the content remains equally accessible in all browsers.

These layout differences can be very subtle or quite extreme, and are usually determined by the purpose of the website and the site’s intended audience. For example, a large ecommerce site with many users on older browsers will probably not have the design differences that a tutorial site meant for web designers would have. The important part is to make sure the content remains readable and the site is usable.

Examples of Graceful Degradation

Visual

Here is an example of a navigation layout that looks fairly similar between new and old browsers, but has subtle design details that only the new browser can interpret. The new browser gets a combination of rounded corners, transparency, and an opacity change on link rollover. The old browser gets none of these design embellishments, but the website still looks presentable. And of course, the navigation works and reads exactly the same in both old and new browsers.

This is the way most websites should be using graceful degradation: The initial site is built for the new browser, and certain non-essential aspects simply do not exist for the old browser. The overall site experience should be very similar, with users of the old browser not knowing they’re missing anything.

Behavioral

Another example of graceful degradation can be seen in this link that uses unobtrusive JavaScript.

1

<a href="http://example.com/" class="popup">Example.com</a>

This link will open in a new popup window for users with JavaScript enabled. It will function as a normal non-popup link for those without JavaScript.

This works by using a JavaScript function that traverses the page looking for anchor elements with a class value of “popup”. When the script finds this link, it attaches a popup behavior dynamically. With JavaScript disabled, the function never fires and the link works normally.

Progressive Enhancement

When discussing the concept of graceful degradation, the idea of progressive enhancement is frequently mentioned. Graceful degradation and progressive enhancement often seem like the same thing: New browsers get fanciness on top of content, old browsers get content with fewer design features.

While these two ideas are very similar, they differ in approach.

• Graceful degradation starts with the most robust design and degrades in older browsers without the users of those browsers knowing they’re missing anything.
• Progressive enhancement starts with a focus on the content only, and gradually adds features for newer browsers.

So it’s mostly a case of which direction you’re going. Are you starting with a sophisticated design with all the bells and whistles, or is that where you want to end up? The end results are usually quite similar.

Proceed Gracefully

The idea of graceful degradation allows web developers and designers to push the limits of web design without jumping through hoops and hacks to make the design look exactly the same in old browsers. Using graceful degradation and progressive enhancement can save much time and money, since front-end workflow is faster when new design techniques do not have to be ported over to old browsers.

As long as the content is not compromised on older browsers and your clients understand why their site may look slightly different for different users, graceful degradation and progressive enhancement can serve as effective best practices for a smooth and beautiful front-end development process.

Michael Herring - Senior Web Developer — Since 2000, Michael has built and designed websites with an emphasis on W3C standards-compliance, accessibility, user-friendliness and cross-platform compatibility. Michael is a member of the Guild of Accessible Web Designers.