Graceful degradation still matters!

If you know about the timeless importance of graceful degradation then you need not read this, but for those of you who think it’s an old-fashioned methodology or even an optional technicality then let me be the first to tell you that you’re wrong! I know this may put me, a mere 18-year-old web developer in the awkward position of having to tell some ignorant 50-year-old that they’re wrong but I’m perfectly comfortable with that if it ensures a better internet!

I’ve never surfed the web in a browser less capable than IE5, this should say quite a lot about my lack of understanding of less capable pieces of software and devices, yet, I still appreciate and understand that graceful degradation is of upmost important when creating any website.

Let’s look at your average out-of-college web designer’s perspective on graceful degradation, assuming they know what it means:

Note: When reading the below passage out in your head do it with an "Artful Dodger" (from Oliver Twist) accent; it’ll come across as more believable!

Some idiot:

"Look, mate, I’m NOT gonna build an entire website which validates, is table-less and has degrading JavaScript for any amount of money – that’s just stupid! Even if that 5% stat were true (I doubt it) I wouldn’t feel any different. Graceful degradation is an added feature; something which clients should have to pay more for! I make clients pay more for validation, table-less layouts, optimized images, IE6 support, IE7 support, Opera support, actually anything which isn’t Firefox (FF FTW!) I charge extra for! My approach is way more forward-thinking and innovative than those "standardistas"!! Who the hell gives a damn about some paranoid geek running Lynx to browse the web, and nobody even uses NoScript! If a user disables JavaScript then that user shouldn’t expect functionality, period! And as far as I’m concerned, if a user doesn’t have the very latest nightly build of FF3 then I’m not gonna cater to them!"

Why the idiot is wrong:

The above passage represents the complete and utter idiocy of some people, real people! You might think it’s a little over the top, what with the "if a user doesn’t have the very latest nightly build" comment but overall it is a pretty accurate depiction of what I fear a few web designers around the world actually think.

"Graceful degradation is an added feature"

This is an all-too-common misconception; if you think this is true then you’ve got it all backwards. In all this mess the only thing which is really an "added feature" is the JavaScript itself. The methodology which ensures degradability may be part and parcel with the JavaScript (as it should be!) but it certainly is not an added feature itself.

"If a user disables JavaScript then that user shouldn’t expect functionality, period!"

What you have to understand is that JavaScript and the extent to which it is supported is not always controlled by the user, there may be other reasons why your JavaScript enhancements cannot be experienced by them (look below), so don’t assume that your user’s have knowingly disabled JavaScript or that they even know what JavaScript is.

"Who the hell gives a damn about some paranoid geek running Lynx"

It’s not only the "paranoid geeks" who will have JavaScript disabled, there are many other valid reasons for JavaScript not working. Ignoring these users is selfish, against standards and is definitely a bad business decision!

Reasons for JavaScript being disabled:

  • Security reasons. (to protect from XSS attacks and Internet Explorer’s multiple security flaws etc.)
  • JavaScript slows down a user’s already slow dialup connection.
  • Browser sometimes crashes because of excessive JS, user disables it.
  • Popups, onBeforeUnload alerts, disabled right-click etc. – User get’s pissed off and disables JavaScript!
  • User is disabled in some way and uses a screen reader such as JAWS, Windows-eyes, SpeakThis etc. (Each having no or limited JavaScript support)
  • User is surfing from behind a corporate firewall – the firewall blocks client-side-scripting. .
  • Very old browsers don’t support JavaScript.
  • Mobile web browsers only have limited support of JavaScript. (‘Opera 4 mobile’ uses a proxy which strips out most JavaScript)

As you can see, it’s not just some people who disable JavaScript from within their browsers, there are a

Ensuring a degradable experience

In order to ensure a degradable experience for your users it’s important to have the right mindset from day one. Graceful degradation itself is really just an end to which the means is usually something called ‘progressive enhancement’, a well-known methodology used in building fualt-tolerant systems.

Progressive enhancement, when applied to the internet, is essentially the process of a website or web application functioning perfectly on modern software while still being able to work correctly on older software. When applying this concept to websites it’s easy to see it’s relation to the three layers of the web; content, presentation and behaviour.

Content is the fundamental backbone of any website; all your content should be visible whatever device or software platform a user is running. The content of your website will typically be found within the HTML, neither of the other two layers should be found within your HTML! Equally, your content should not come from either of the other layers. With the rise of multimedia (video/audio websites) this is becoming an ever unrealistic expectation but it’s good to have principles, right!?

Presentation (usually CSS) is the second layer and, for those browsers that support it, offers a lot of control over the layout and decoration of your content.

Behaviour (usually JavaScript) is the third layer of the web and should be the last thing to build within a project cycle. Only use JavaScript to enhance the user’s experience. By making a site’s functionality dependent on JavaScript you’re immediately cutting out a percentage of users.

Once you have your content in place you can work on the presentation of that content, and then after that you can start adding JavaScript enhancements.

Please note: I am talking about websites in this post, not web applications. Web Applications (many of which require JavaScript to operate) and the principles by which they’re built really have more in common with desktop applications than real websites. That said, it would be great if web application developers took a couple of the above points seriously!

Not only JavaScript…

The topic of this post does not only apply to JavaScript. Your content (HTML) and presentation (CSS) layers must also degrade in the same way. Nowadays most of the focus is on JavaScript because that happens to be the layer which most people screw up so frequently!

Thanks for reading! Please share your thoughts with me on Twitter. Have a great day!