Ask a Question ?
Design & Publish Websites Faster

About Graceful Degradation

About Graceful Degradation

This one is an important concept in modern web design. Basically, it refers to a philosophy of developing with current/latest technologies, but considering the devices (or situations) that are lesser capable or limited somehow. This notion can relate and be applied to different disciplines, but we’ll focus on the web development context.

A Fall Back for the Less Capable

The idea is to build a site with the most advanced technology needed for the project to function as designed. After that technology is implemented, create a fall back for older systems. Or smaller screens. Or slower connections. Or JavaScript-disabled browsers. Or some sort of medium of access with diminished capacity or that can’t otherwise use the fanciest version.

Graceful degradation diagram

Different levels of content/features are available depending on the device, but content must always be available


An example of graceful degradation put to practice is the now-classic Lightbox script. It’s used to enhance the viewing experience of images, or as an image gallery. For example, displaying a set of thumbnails that, when clicked, open up a larger version while the rest of the site is faded usually to a dark background to highlight the image (larger version) on top.

But for Lightbox to function, a JavaScript enabled browser is required. This means that it will not work on a browser that has either JavaScript blocked or disabled, or, possible though unlikely, simply doesn’t support it. So what would happen in this case? The technology required for this script is not available, but users still need to access that image. And, for something as basic as images, it is not acceptable to just say “Your browser is not supported”.

Lightbox Diagram

In this Lightbox sample, when a thumbnail is clicked in a Javascript disabled browser, the image still loads (without effects)

This is where graceful degradation comes into play. An alternative, often more rudimentary way, is presented for the user to be able to get the information/content they need – in this case: an image. It may not have the originally-intended fancy look, but visitors will still be able to get the bigger image they want.

Why did I bring this up? Because our web tool is developed with this philosophy in mind. Your visitors will always get your content, regardless of old devices/outdated browsers!