Thursday, September 8th, 2005

The Hows and Whys of Degradable Ajax

Category: Accessibility, Articles

Amidst the cheer at the rise of the Ajaxian nation, we quickly found those who were not happy.

“Your land is flawed”, they cried.

“Although you the best of the best in certain situations, only certain citizens get these benefits”.

“What about catering to the entire community!”

Valid points were raised.

Ryan Campbell has written up his view on The Hows and Whys of Degradable Ajax, a piece in which Ryan discusses his views on how you can have your cake and eat it too.

The fact is that to do this, you do need to spend a bit more time in the kitchen baking, and you need to think before you throw in the ingredients.

Introduction

While working on Particletree’s shopping cart system for our magazine, we decided that we wanted to create a flawless user experience for all users without having to sacrifice the added user interface benefits provided by Ajax goodness. A lot of places will tell you that it is ok to use JavaScript and Ajax as long as it’s not mission critical. Well, we don’t think web apps have to be boring to be reliable.

And so we’ve developed some solid strategies to help us use Ajax in our apps without having to worry if they’re essential or not to the application. After some heavy experimenting, we’ve developed a method for making web pages work regardless of the user’s browser settings. While other sites have implemented their own versions of degradable Ajax, we found the lack of documentation on the subject discouraging. And so it is with great pleasure that we present to you the Particletree method of degradable Ajax.

In a nutshell, Ryan gives us a nice recipe to follow:

Client Side

  • Start off with no JavaScript
  • Use only the elements: a and input (no editible divs)
  • Use noscript if needed
  • In JavaScript, go through the DOM cleaning up (adding on* events, nuking particular divs that made sense before ajax)
  • Make sure all ajaxian form submissions add an ajax=true parameter

Server Side

  • Understand the ajax=true parameter, and do the right thing for those requests
  • Potentially call to different actions if ajax=true

Can you really end up with pure degradation? It is going to depend on your application. For small ajaxian features you can live side by side quite cleanly and simply. Wanting to do a UI such as Google Maps? maybe you bite the bullet and leave IE 3 on the Mac behind :) Or just forward those users to MapQuest.

Posted by Dion Almaer at 12:03 am
1 Comment

+++--
3.6 rating from 8 votes

1 Comment »

Comments feed

regarding your last comment: map.search.ch degrades nicely for no javascript or older browsers. It isn’t completeley feature complete, but all major use cases can be fulfilled.

thinking back, getting the noscript version running wasn’t even that much more trouble. certainly not in comparison with all the javascript problems we had to tackle.

just to emphasize your point: it shouldn’t only be done like you describe, once you dive in you will often realize that it isn’t even that much trouble to do.

Comment by Bernhard Seefeld — September 8, 2005

Leave a comment

You must be logged in to post a comment.