Graceful Degradation and Progressive Enhancement

Graceful degradation is the process of building a website so that it works best in a modern browser that uses JavaScript, but still works to a reasonable standard in older browsers or if JavaScript or some of its features are unavailable. An example of this are programs that are broadcast in high definition (HD)―they work best on HD televisions but still work on a standard TV; it’s just that the picture quality will be of lesser quality. The programs will even still work on a black-and-white television.

Progressive enhancement is the process of building a web page from the ground up with a base level of functionality and then adding extra enhancements if they are available in the browser. This should feel natural if you follow the principle of three layers, with the JavaScript layer enhancing the web page rather than being an essential element that the page cannot exist without. An example might be the phone companies who offer a basic level of phone calls, but provide extra services such as call-waiting and caller ID if your telephone supports it.

Whenever you add JavaScript to a web page, you should always think about the approach you want to take. Do you want to start with lots of amazing effects that push the boundaries and then make sure the experience degrades gracefully for those people who might not have the latest and greatest browsers? Or do you want to start off building a functional website that works across most browsers and then enhance the experience using JavaScript? The two approaches are similar, but subtly different. This blog post might help you to decide which approach to take.