The Merits of Knowing Javascript as a Webdesigner

 

I'm always interested in giving new things a shot. Part of the fun of webdesign is playing with little toys that come out.

(Oh, if you're getting tired of that animation at the top, click here to stop it.)

Lately my interests turned to Javascript. I started out with buying the Big O'Reilly book, only read the first section and then let it gather dust in my closet for months. I knew in the back of my head that I needed to know Javascript, that it was the next big thing I should be competent in, but it just couldn't capture my interest. Just like when trying to learn PHP, you stumble upon a lot of boring and mostly outdated pieces of information. The W3C site is not exactly sexy and when you're new to something it's hard to weed out the good information from the crap since, well, you don't know what you're talking about yet.

A fine read

Now, at some point last year I found the perfect book for a webdesigner to get started with Javascript. It's called DOM Scripting and was written by Jeremy Keith in 2005. It teaches you just enough to get started. I can recommend it to any webdesigner wanting to get started with learning Javascript.

You won't hear me claim I know Javascript.

What I can claim, however, is that I know enough Javascript by now to do useful things when working on a project in our team. As you know, Javascript is the third layer (behavior) on top of CSS (presentation) and HTML (structure).

Part of your job as a webdesigner is designing the interactions (simple example: a menu and how it behaves). You can use Javascript to enhance those interactions, both to improve the visual aesthetics of the website, and to improve the end user experience.

You probably realize this already, but it bears repeating: if you let the developer design the interactions they will likely be of the same level as letting a developer design a site. Now you have 2 options:

  • have a developer on your team that really gets interaction design, work with him/her closely
  • do the visual/interaction side of Javascript yourself and leave the programmer type stuff for the developers

I chose option two. While the developers on my team are good at what they do, explaining the visual stuff is tiresome. You can't really explain why an animation should last 2200 milliseconds. That's playing until it feels right. Which, in itself, is entirely subjective, but also a thing you can judge better than a developer.

Again, no offence to any developers out there. I'm overgeneralizing to make a point. Of course there's developers that know a few things about design and vice versa. There's people out there that do both well. But they're rare.

Some examples

Alright, enough chit-chat, what can I use Javascript for? Why should I learn it?

Using Javascript can fill some holes in DOM support across browsers. The IE7.js script is one of the best examples, but it doesn't have to be that big. Adding general :last-child support is as simple as one line of jQuery:

$('#navigation ul li:last-child').addClass('lastChild');

You can add all sorts of visual improvements, like nicer ampersands (Example: &) and fade in/fade out effects.

You'll know how to code your own slideshows and how to hack your way around the code of existing ones so you can modify they to your needs.

You'll be able to render type in a custom font using Cufón (see example at the top left of the page).

... and there's tons more. If you ever had the feeling CSS was limiting you in what you want to do, learning Javascript will open up a whole new bag of tricks.

Performance

One last thing to be aware of though: all of this Javascript magic comes with a price to pay. If you're not careful, your site will turn into a slow beast. This simple page contains, at the time of writing, a scripts folder that is 256kb large. That's a lot if you're on mobile. Animations like the top left one will potentially slow your PC down to a crawl, and a lot of people are using slow PCs nowadays (they're called netbooks).

Some visual improvements (e.g. the text rendered in Graublau at the top left of this page) are fancy, but do away with OS and browser defaults, like the ability to select text. That's a serious consideration to make. I would never used Cufón on a site that's very likely to be copy and pasted from (e.g. a newspaper site).

Debug info: ...