Usability improvements using the DOM

    Alex Walker

    As a rule, users don’t like surprises. If they expect one thing to happen and you give them something else, they get grumpy. And rightly so.

    Links are probably the best example of this. How many swear words have you muttered watching Acrobat suddenly spontaneously launch itself moments after clicking on a seemingly innocent-looking link? A huge pet hate of mine.

    Of course, taking the time to visually tag your links is no new break-through idea. Matterform released a Dreamweaver extension back in 2001 (from memory) that automatically identified external links, mail links, new windows, Word, Flash, Quicktime and a few dozen more non-standard links, and recoded them tasty little icons. It didn’t write the prettiest code (what’s a tag?), but that could be fixed.

    In fact, the biggest issue we found was often just rolling it out across larger sites and CMS’s — how do you let your clients tag a link as a PDF?

    Chris Campbell at particleTree has a satisfying answer to that question — chill and let the browser do it.

    In Preview Your Links with Unobtrusive JavaScript, Chris shows you how do use his linkPreview() function to teach the smart, young browsers to reach into each page, grab the links, check their file extension and append the appropriate icon.

    I can’t think of many good reasons not to use this. It’s small, it seamlessly installs in pre-existing systems (just load the script in the head) and it improves usability at a stroke. It doesn’t require much technical savvy to implement and could be comfortably refitted to identify other files formats or sites such as WAV, MP3 or even Wikipedia. Non-JS browsers are no worse off than they were.

    As some commenters point out, CSS3 does have facilities for doing exactly this kind of thing. Excellent. There’s also some chance that pixies from the enchanted forest could use their magical fairy dust to re-classify every link on the web.

    The DOM looks a better bet for the minute, though.