Usability improvements using the DOM

Share this article

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.

Alex WalkerAlex Walker
View Author

Alex has been doing cruel and unusual things to CSS since 2001. He is the lead front-end design and dev for SitePoint and one-time SitePoint's Design and UX editor with over 150+ newsletter written. Co-author of The Principles of Beautiful Web Design. Now Alex is involved in the planning, development, production, and marketing of a huge range of printed and online products and references. He has designed over 60+ of SitePoint's book covers.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week