You’re right about Ajax, it wouldn’t really benefit a page like this because the form is pretty much the only element of the page. If this quiz were a widget of a much larger site then Ajax would make sense…

@Ben, you’ve still got one more thing to think about with Ajax pagination – Obviously, google will index your site without JavaScript and so it will link to the static pages. If someone arrives on a static page, e.g. /about.html and they have JS enabled with they get routed to the corresponding Ajax’y page? (e.g. #about)… And you might want to discuss what happens if someone with JS enabled bookmarks your page and then sends the link (www.site.com#about) to a friend who does not have JS enabled… What will happen to them? It’s not a big issue at all, but might be worth mentioning in your tut, just as a point of discussion.

@James I’ll check it out, but if that works then I should have it all worked out then!

http://instantsolve.net/examples/quiz.htm
http://instantsolve.net/examples/quiz2.htm

The application I am working on creates quizzes and these are sample questions. The drag and drop is more interactive and usable than using select boxes. The page works equally well without JavaScript enabled. If you analyse the JQuery I have written, you will see that the JS submits exactly the same data back to the server. (obviously being a static demo, there is no server interaction)

It doesn’t use Ajax because there is no significant speed benefit of using Ajax in this instance and it requires me to write extra code on the server side which I don’t want to do.

I was planing on doing a tutorial based on using JQuery to make forms more interactive and user friendly. Obviously this kind of interaction is not suited to every website but it shows how you can create rich interaction while using progressive enhancement.

I think you’re spot on about what the NETTUTS audience needs – unfortunately a couple of articles in the past have not taken PE into consideration… Good luck on your next post! 🙂

@Thomas, The problem is that some people really don’t see the benefit of it. Plus many people are just lazy. When creating a user-input form the ideal would be to have it normally submit without JS and then when JS is available do some Ajax’y stuff. Most people don’t bother with the Ajax’y stuff which in my opinion, is also a bad practice – obviously it’s worse if you ONLY do the Ajax and don’t do the server-side integration but in some cases ignoring either can be equally as bad!

For example the only reason I haven’t ajaxified this comment form is because I’m lazy and cannot be bothered to mess around with WP! 😀 … I really should though!

What are you planning on including in that tutorial? Just interested. Make sure not to go too over-the-top with sliding and fading everything! 😉

I start off by thinking about how to create a feature using only HTML. When I’m happy that it’s usable and accessible, I write the CSS. Only when the feature is fully functional with HTML and CSS, I add some Javascript (which tends to be JQuery). The JS submits the same data back to the server as the normal HTML form, so I don’t have to change anything on the server to accommodate for JS.

I only add Javascript when it enhances the user experience, for example a drag and drop list is easier than using lots of option inputs and clicking on an object to edit it is better than selecting a radio button.

I was actually thinking of writing a NETTUTS article about enhancing forms using Javascript. Like Ben says, NETTUTS needs more progressive enhancement tutorials.

I really hope NETTUTS likes the article I wrote because while the last one I wrote that you read (for others: its an article introducing PHP OOP) is nice, the next one is what I’m exited for, I’m going to take a good amount of time correctly setting up the blog to degrade but still have the cool ajax-y stuff going on.

I think NETTUTS’ audience especially needs to start being exposed to progressive enhancement.

And any web designer / developer who doesn’t read ALA shouldn’t be aloud to make web sites 😛

A great example of a site which is in Flash but really does not need to be is http://www.007.com/ … Most of the effects can be done in plain unobtrusive JavaScript – no doubt there was some hot-shot creative who said, “yeh, we need to use Flash to be cool!”…

@Ben, I agree, the problem did exist before JS libraries but I think it’s got worse since things like MooTools and jQuery became popular. Because these new libraries have made it so easy to add these enhancements everyone, even designers (who don’t know what progressive enhancement is) are jumping on board!

I like your optimism but honestly, I think it’s just going to get worse. With new “cool” technologies arising every week, and more young people (amateurs) joining the field every day terms like progressive enhancement and graceful degradation are just going to get lost in the noise. When I first got into this whole website creation thing I hadn’t heard of either of them – I was 15 and like many people joining the industry, I knew nothing of accessibility, usability, standards etc.

ALA is doing a good job but many web developers don’t even read ALA… or any magazines/blogs for that matter!

I think to stay on top of the best practices in this industry you have to be truly interested in it otherwise you’ll have no drive to continue…

I think I need some of your optimism! … I’m being quite negative.

The sad thing is how very simple it is to gracefully degrade your JavaScript especially in jQuery.

Hopefully people will start catching on just like they did eventually with web standards, especially with people like ALA pushing the concepts of graceful degradation through that latest article on progressive enhancement. People will come around.