Buzzword Wednesdays: Graceful Degradation

Submitted by Jesse Mutzebaugh on 10/31/2013 - 09:29:am

*our goal with this series is to educate you from being woo'd and swayed by meaningless, superfluous words designers throw out, and to keep designers and developers from using them.

Graceful Degradation

It's that time of the week again. Today's word talks about designing smart for different browsers (cross-browser compatibility).

Graceful degradation means that your Web site continues to operate even when viewed with less-than-optimal software in which advanced effects don’t work.

Basically, it's designing for the best experience in modern browsers, but taking into consideration that some effects will break in older browsers.

For Everyone to Know

Internet Explorer sucks. It's a fact. Another unfortunate fact is this: some of your users use IE and other outdated browsers.

The goal, then, is to create a website that looks great in modern browsers without ignoring what the design looks like in old browsers.

A simple example of graceful degradation would be having rounded corners on your buttons in modern browsers, and square buttons in IE8 and below.

For Business People

Consider your demographic. Users who are, let's say 'chronologically advantaged', are more likely to be using an outdated browser. If your company sells hearing aids, you're more likely to run into design and compatibility issues than if you sell designer headphones.

This is a great conversation to have with your web development company. Knowing who uses your site often gives the designers and developers enough information to create a solution that is flexible to handle all browsers.

For Designers

Sometimes you don't have to write an entire IE stylesheet to account for graceful degradation. Just take advantage of how browsers render your stylesheets. For one-off issues, I'll just write the fallback right into the class/id.

In the example below, I have two colors set. Old browsers don't like transparent colors. New browsers will read both background-colors, but will only render the bottom one since it overrides the top. An older browser won't know what to do with RGBa, so it will ignore and render the first one.

CSS Fallbacks
  1. .button {
  2.   background-color: rgb( 50, 200, 150 );  /* fallback color */
  3.   background-color: rgba( 50, 200, 150, .8);  /* RGBa color */
  4. }
 

What about you?

How do you account (or not) for graceful degradation and designing for older browsers? Horror stories are both appreciated and sympathized with.

Bonus Pointless Design Jargon:
"The bold letters and casual script are meant to convey the strength and stability of its political institutions and democratic tradition" Costa Rica