This was a great article that we thought we wanted to bring back for readers to read once again, thanks DEVON!

LIV

Cars drive. 3000 (or so) pounds of moving metal on the roads. Millions of them.

With lots of cars on the roads, they tend to run into each other now and again. Every year, more safety standards come out and more safety gadgets get invented.

However, in 1959 Béla Barényi , an engineer for Mercedes-Benz came up with an idea that sounds counter-intuitive to the brand of Mercedes-Benz: design the car to break.

I mean, this is Mercedes-Benz. Big name, bigger company. They should be making cars that never break. But cars do break. Car accidents happen.

Béla Barényi invented the crumple zone. Using his gigantic engineer brain, he discovered that he can guide the outcome of a collision so that it lessens the impact on the people within the car, because this crumple zone absorbs most of that energy.

Users break websites every day. They don’t have Flash, or JavaScript, or Cookies, or Styles, or they’re using a Screen Reader, or a Mobile phone. When we design and build sites, we need to build in our own crumple zones. We need to design for cases when something catastrophic happens.

Crumple zone, we haz one. (Taken and modified from icanhazcheezburger.com)

What does this look like?

1. The content should be accessible by everyone.

We’re clever enough, and there are enough resources available that can show you how to build your site and aesthetically present semantic markup to look like almost anything. If the content is still accessible after turning everything off, that’s the equivalent of leaving the drivers alive after a head-on collision.

2. If something is only available for a specific technology, only show it when that specific technology is available.

For instance: JavaScript.

If I have a cool dynamic drawer that slides up and down and shows additional content, design it in a way that when JavaScript is turned off, the content is still there but it doesn’t look bad. Perhaps that content is tertiary, so place it lower in the DOM and reposition it with JavaScript and styles.

Or Flash:

It can regress to replacement content that is a little more relevant and thought out than “Sorry, you don’t have Flash.” Perhaps whatever meaning that was in the flash to begin with can be stored in a thoughtful paragraph and image.

3. Fail gracefully.

It’s easier for us to use the cool new technologies, and harder to think about supporting the lame outdated ones. The fact of the matter is they exist, and in greater numbers than we would like.

Failing gracefully means that the site should fail and still look like it was designed, even if only slightly. Some have gone as far as only serving up content with basic typography styles for older browsers. Others add a design element to encourage upgrading to a newer or different browser. Whichever way you choose, the site is still available and it doesn’t look broken.

What should it look like?

I think the really tough battle is getting over the fact that websites need to look identical in every browser:

• Fonts render differently on every browser, and every operating system. So there might be extra pixels, that wrap a few more lines, that makes a paragraph just a little longer or shorter, which pushes a paragraph out of a specific area, which then collides with something else.
• Colors render different in different browsers, on different operating systems, viewed on different monitors, by different types of people. So a logo might not appear to be the right shade of Pantone (also, Pantone doesn’t translate well into RGB).
• JavaScript, Flash, CSS are all interpreted differently by the different browsers.

I’ve discovered that it’s actually easier/faster/cheaper to build the optimal experience first, then dial back on form and functionality for browsers that can’t handle it. Sure the site is less wow-inducing on IE6, but all of the content is there, and it still looks decent.

Design for the web needs to breathe a bit. Things need to squash and stretch, and crumple and flex and break.