Thinking About Graceful Degradation and Progressive Enhancement


I really should have named this "Now that I understand how to use JavaScript effectively and in a cross browser friendly way because of Prototype I need to start really thinking and weighing graceful degradation and progressive enhancement every time I include that prototype.js file"
For SEO purposes I shrunk it down. Fair?

While I was building off a script I found about drop down menus with Prototype to apply my desired enhancements and once I got it in a place where I was going to add my code to my all-mighty dev library's finished folder, I tested accidentally it with JavaScript turned off and I was instantly disappointed in myself.


Screen Shot Examples

Here, in screen shots, I guess what I'm trying to say is my version needed some work. in the graceful degradation category.

My Solution

Screen Shot: My Solution with JavaScript Enabled Screen Shot: My Solution with JavaScript Disabled
My solution breaks and looks terrible when JavaScript is disabled.

SW Drop Down

Screen Shot: SW drop down menu with JavaScript Enabled Screen Shot: SW drop down menu with JavaScript Disabled
The original solution: SW drop down menu leaves the top level usable, a fair trade-off.

Son of Suckerfish

Screen Shot: Son of Suckerfish with JavaScript Enabled Screen Shot: Son of Suckerfish with JavaScript Disabled
Son of Suckerfish is fully functional with JavaScript disabled, though that is CSS that is over my head, maybe I'll take the time some day to really examine it!


How Important is Degradation for Me/This Specific Example

But how important is it that my solution work at 100% in a JavaScript free environment? I know for the needs of a drop down menu it's likely I'll have all of my secondary and tertiary links within the main page of a top level section, so can't I just make sure my top level works (like the SW drop down menu solution?) To be honest I don't see why not.

I know that my place of business tests in Windows: IE6, IE7 and Firefox (latest version) as well as Mac: Safari (latest version) and Firefox (latest version). If my design is usable to any degree with or without JavaScript in those environments I don't see a need to spend days and days troubleshooting in IE5 (Mac or PC) or Netscape let alone Opera, Flock, Konqueror or Mozillia.

According to The Counter - January 2008 JavaScript Stats 94% of visitors to the sites they collect data from (over 4 million visitors) have JavaScript enabled. So I am willing to take the chance that a mere 6% would only have access to my top level navigation.

Side note: Why doesn't W3Counters display JavaScript stats? Jerks.

So I ran off to fix my drop down solution to display the top level correctly when JavaScript is disabled, which turned out to be much less of a pain than I had expected.


Articles about Graceful Degradation

  • Dan's Web Tips: Graceful Degradation (July 19, 1998) - A bit out-dated but still on point with theory. It is very important that as you begin to use more of the neat features (read: JavaScript) that the old browsers can still continue on their existence possibly not even knowing that they are missing something.
  • Digital Web Magazine - Fluid Thinking (October 2, 2002) - This article brings up the two main keys to graceful degradation:
    1. Any browser must be able to view the content of the site.
    2. Any browser must be able to navigate the site.
  • Graceful Degradation with Prototype, Scriptaculous... (November 11, 2005) - fantastic 2 part article - second part continues here: Graceful Degradation with Prototype, Scriptaculous...part 2 and even the second part starts to diagram and explain how to ensure even you ajax-less users should and could be able to use all the features on your site, maybe just not in the way you hope and imagine they will. As long as it gets the job done, right?
  • Graceful Degradation & Progressive Enhancement (February 6, 2007) - A more current look at graceful degradation bringing not only the alt attribute and <noscript></noscript> tag pair into play but also addressing the use of JavaScript with CSS and how to apply your JavaScript in a way that a text based user would still be able to access, while providing a visual use with something more interesting. Because let's face it if you are browsing the web with Lynx you're not looking for anything but plain content. This article also goes on to address Ajax and it's effect on polite society's web using experience.

Information and Links

Join the fray by commenting, tracking what others have to say, or linking to it from your blog.


55 kittens will go hungry today unless you
subscribe to the Ninedays Blog feed!
* We are no long in affiliation with bonsai kittens.
Similar Entries
JavaScript BMI Calculator
Time for some learnin' & JavaScriptin' One thing I had to do for a client a while back was create a JavaScript body mass index calculator. She just wanted 2 fields: Height (inches) Weight (pounds) On that same page she also had a table displaying the translation of BMI calculations from the CDC Website.
JavaScript Cookies - Baking Has Never Been So Easy!
Setting, updating retrieving and deleting cookies with JavaScript is a whole lot easier than I remembered. I've not got a quick library of functions available at my fingertips for such actions, wanna see?
Zip Code, Phone Number and Replacing Empty Fields with Really Easy Validation
While using the Really Easy Validation JavaScript validation library I've accumulated a few custom validations that for US phone numbers, US zip codes, Canadian postal codes as well as replacing empty fields or fields that don't contain a numeric value. Good stuff!
First, Last, Active and Only List Styles With Prototype
It's easier than ever to apply the classes 'first, 'last', and 'active' to your navigation lists using the Prototype Javascript library. Of course this will only work for a JavaScript enabled environment but if you have a list that is out of control, or already requires Javascript, this might be your best solution.
Simple Hide and Show with Prototype
Hiding and showing elements using Prototype is super easy. We'll walk through from the most basic hid and show functionality to slightly more complex functionality where you can change the toggle's text or image.
Next Post
Zip Code, Phone Number and Replacing Empty Fields with Really Easy Validation
Previous Post
Alternating Colors Using Prototype

Write a Comment

Take a moment to comment and tell us what you think. Some basic HTML is allowed for formatting.

Reader Comments

Be the first to leave a comment!