JavaScript libraries like MooTools, jQuery, Dojo and Prototype have proven very popular with developers recently, perhaps too popular!?
Over the last year there’s been a major recognition boost for these libraries, especially those featuring animations/effects and Ajax capabilities. Blinking/fading/sliding text was in fashion back in the nineties but it seems, following the hype of Web 2.0, these effects have made a massive comeback!
To be honest I think it’s great; what better way to expand the imagination of the average developer than to give him/her some brand new toy to play with? Web developers are now thinking of innovative ways to utilise these new-found JavaScript enhancements and designers are pushing boundaries with their designs, integrating these enhancements into their mockups!
This is all wonderful, but unfortunately I fear the overuse of JavaScript libraries such as jQuery has had a detrimental effect on usability. Obviously we had issues before these libraries and we will surely continue to rave about it afterwards but I cannot help but notice what is happening right now; people are turning a blind eye to usability and focusing all their attention on making their websites as smooth and swish as possible!
If you’re in the template trading industry then you will have heard of the recent successful launch of ThemeForest, yet another powerhouse off the Envato production line. At the moment it has upwards of 300 templates for sale, ranging from WordPress magazine-style themes to one-page portfolio sites.
Flicking through the templates on offer you’ll probably notice nothing wrong with what’s offered, even if you look at the previews of some of them you’ll notice nothing strange. But, if you continue you’ll eventually find a number of templates offering "jQuery effects" and featuring "Ajax pagination"! Both of these terms spark a lack-of-usability chord within me. Looking at the preview of these particular templates proves just how lacking the author’s knowledge of usability is. Even basic concepts like code validation and degradable JavaScript have been massively overlooked!
Yes, these templates look great when you’re using a modern browser like Firefox 3 and have JavaScript enabled. But what happens if you’re using IE6 without JavaScript? In fact, even using a modern browser, but with JS disabled is disappointing – for a couple of the themes nothing even comes up… not even a warning to say "you must have JavaScript enabled to view this site".
Why should these authors be allowed to make any money from their laziness? Template buyers are as clueless about the issues as the authors and so ignorantly give over the odd $15 for their new "premium" template, completely ignoring the fact that a large proportion of their users may be utterly disappointed!
One of the core values of jQuery is that it lends itself to unobtrusive JavaScript, thus promoting the ideals of progressive enhancement and graceful degradation, two terms that seem totally lost on some developers!
Contrary to the title of this post, the JavaScript libraries are not to blame; they’re merely making it easier to access JavaScript functionality so that people don’t have to spend hours developing it themselves. The problem lies in the ignorance and laziness of web developers!
Just to be clear, there is nothing wrong with ThemeForest itself, in fact it’s one of the best and probably the cheapest template-selling website out there. I only take issue with a couple of the authors – it seems they insist on making "cool" sites which totally lack many of the core and fundamental practices of the web!
Thanks for reading! Please share your thoughts with me on Twitter. Have a great day!
I entirely agree. At my fulltime job we are rebuilding the entire site and I have spent a tonnes of time explaining that we can’t just build it in flash or have js all over the place. It needs to work in HTML/CSS and then we add the spice (Flash & js) that pushes the design that little bit extra into an amazing site.
It does seem like its a big problem these days, but in some ways its always been like this. Before we had jQuery and the others there was Flash.
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.
@Curtis, That’s how it should be done – making the site work first and then adding the “spice” … It’s a shame not everyone follows suit. Most Flash sites will be done completely in Flash first and then someone will remember that “alternative HTML” needs to be done – so someone just copies across the text… why should people without Flash get such a horrible user experience!
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.
Haha I think its good to be a realist about it as well, I thought it was interesting reading this after we talked a little bit about Ajax pagination on twitter, I’ve been doing some research on how to fix the back button problem and I think I’ll be able to find a solution.
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 😛
Progressive enhancement is the way forward. At the moment I’m developing a site where I’m creating several complex user input forms. I could of just used Javascript but my philosophy is that since everything Javascript sends to the server can be sent using ordinary HTML forms, I make my forms accessible to all users.
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.
@Ben, A while ago I was looking into fixing the history problem too – there are a couple of available solutions, the only one I’ve tried (and seems to work perfectly) is this one – http://www.mikage.to/jquery/jquery_history.html.
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 have just put up a couple of demos of a progressively enhanced form.
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.
@Thomas Yeah I really like that idea for your tutorial, while it might not have practical applications it does demonstrate PE very well.
@James I’ll check it out, but if that works then I should have it all worked out then!
@Thomas, It looks good although the UI of the first one isn’t very easy to figure out. I mean, it’s not obvious the phrases are draggable. The second one is much nicer since the draggable elements are styled differently… Nice example though! And it degrades perfectly! 🙂
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.