Blog

Posted by admin on March 10th, 2009

Throughout the early years of web design there was a distinct lack of tools for adding interactivity to websites. Other than the trusty hyperlink, there weren’t really any easy ways to provide a simple means for allowing the user to control the flow of information on a website. Sure, if there were a few hours spare it would be possible to work something out in hand-coded JavaScript, or interactive elements could be done using Flash animation; But using either would always bring up cross-browser compatibility issues, and with flash you always had the ‘accessibility’ issue to contend with.

CSS 2 went some way in expanding what was possible with web interfaces; allowing for easier positioning and layering of elements, and numerous new ways of targeting certain elements and giving them unique attributes (making things such as accessible drop-down menus to be created). Pre-built open source JavaScript libraries though, have put even more power into the developer’s hands.

JavaScript libraries have given developers easy and fast ways to target and manipulate elements, making them grow, shrink, and change colour. As well as changing their appearance, it is also easy to attach behaviours to elements; making them react to mouse hovers, clicks, and key presses; and using these reactions to trigger changes in other elements. And why stop at working with just the elements already on the page? JavaScript libraries give you the power to easily manipulate the very structure of the HTML page itself, adding elements here, taking away elements there, wrapping elements in other elements, changing content, re-ordering lists, and even using Ajax to pull something in from an entirely different page… the possibilities are quite literally endless.

Prototype JS, Mootools, JQuery, Extension JS – all have become familiar tools for the more savvy developer over the last few years – and all have their strengths, weaknesses, and limitations. Developers will debate forever about which is ‘best’, but most of the time a developer use whichever he learned first, as it will usually be the quicker solution. Personally, I tend to stick to using the JQuery library (for reasons I won’t discuss, as I’m trying to make this post as non-geeky as possible), but all seem to be able to achieve similar results and make adding interactions a lot less hassle than coding JavaScript from scratch.

I can remember about JQuery a couple of years ago and thinking “That’s all well and good, but if I don’t see where I could use it!”, but it was surprising how after I’d investigated and tried a few examples, I was passing ideas to the designers about how information could be re-arranged and space could be managed differently. Soon we began to think outside our normal flat-picture mindsets, and began to think of elements having actions and reactions, areas hiding and showing when requested, certain areas scrolling and moving in response to interaction. It’s made the websites we create now better and more functional than anything we were building before, and for that – I love it!