Let’s say you have a good designed website with outstanding content but you feel something is missing. That little extra that makes people go WOW. That extra can be JavaScript which you probably know of. It could be that you’re a little afraid of implementing to much JavaScript and you should be.
It can cause the loading time to increase dramatically and break some web browsers, especially if JavaScript is not activated at the moment. What you maybe didn’t know is that there are some very lightweight effect libraries out there freely available for download. They have all been around for a while but few are using it.
We will guide you through the variety of libraries and make sure you learn how not to break any poor visitor’s browser.
script.aculo.us
Script.aculo.us is a very well known effects library used by many famous sites like Gucci, Digg and Apple. At Gucci’s site they have used it in a way that simulates a flash application without actually being one. The library is absolutely cross-browser and only 148 KB big. If you want to see what can be achieved they have a little demo section on their website.
moo.fx
Moo.fx s a highly customizable small library of effects. It can be extended and used in diffrebt ways depending on your requirements. It’s all very good explained on their website.
It’s built upon the prototype.js but has it’s own streamlined version which only requires 3 KB space.
Rico
Rico is a library that has been around for quite some time. It’s was originally developed on its own, depending on nothing but has been rebuilt with prototype.js.
If you feel like you want to see some demos from Rico, they can be found here.
Not to break anything
I think we can agree that usability is at the top of the priority list when building a website. Make sure hat all of your users can access your page. Since most effects libraries no has cross-browser support that is not the main problem. With every new JavaScript effect you must make sure that your visitors without JavaScript support can navigate through your page too. That is why there exist a html tag called noscript.
What you put between the <noscript> </noscript> tags will only be visible to visitors that has JavaScript disabled.
Another beginner problem when using one of the libraries above is that errors appear due to non-validated code. Take the time to validate your code over at W3C.
Good luck!
Share This
2 responses so far ↓
1 Forrest // Nov 8, 2007 at 8:36 am
I’ve been playing more and more with javascript on my blog lately … there are a few more categories I still want to add, but I’ve seen blogs with hundreds of them that require WAY too much scrolling. So I made the categories ( and archives, and “meta” ) collapsible. Then I added cookies to the equation, so the browser can remember which ones you had open, and which ones you folded away.
FireBug, a plugin for FireFox, has a built in javascript debugger. You can set breakpoints, and look at the values in all your variables. It makes everything so much easier, except that IE still has 85 % or so of the browser market. You can debug javascript with IE and Visual Studio, but that’s a lot more involved…
2 Duncan // Jan 10, 2008 at 10:49 pm
I don’t like too much glitz vs content. It has to make sense to include.
Leave a Comment