Usability improvements using the DOM

Tweet

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • A_Brisson

    for which browsers would this work?

    This is a general solution that has the benefit of being non-hackish. When you feel comfortable relying on CSS3, you can just cut the external javascript and styles, and restyle the page. In the meantime, this solution sounds superior in its wide target range.

  • http://www.igeek.info asp_funda

    That’s a cool pointer Alex, thanks for the link!! I had to do it on the serverside till now putting an (appropriate)image beside the link, well, JavaScript was never my cup of tea!! ;)

  • 8900200

    Can’t wait to try this one out. Looks like a handy little snippit. Thanks.

  • Noel Jones

    On the question of why you might alert the reader to the fact that a link is to Amazon, sometimes a link appears to be to a document but in fact turns out to be a link to a book on Amazon. Signalling the link can avoid this disappointment.

  • http://www.deanclatworthy.com Dean C

    Superb idea and great use of the DOM :)

  • http://boyohazard.net Octal

    Totally agree. I am definately going to be making use of this :)

  • http://www.realityedge.com.au mrsmiley

    I was faced with exactly this problem the other day. This is an excellent drop in solution.

    The only comment I would have is why single out Amazon links? Isn’t that just setting yourself up for people expecting to have every website marked with an icon? A better option would be to do similar to what I have seen on the Microsoft/MSDN websites, where links external sites are marked with an icon saying that it will take you outside of that site. Then you can see which are special documents and which are internal/external links.

  • http://www.sitepoint.com AlexW

    I was faced with exactly this problem the other day. This is an excellent drop in solution. The only comment I would have is why single out Amazon links?

    I’m not entirely sure why he’d isolate Amazon links other than because quite a few bloggers review books and have affiliate links back to Amazon. If Amazon is an important revenue stream to you, maybe this is a way of making it very clear that you can actually purchase this book by clicking this link

  • http://www.saumendra.com saumendra

    This is a really good idea!. Would be implementing this in my own sites. Thanx ALEX for the great TIP.

  • http://www.metalunderground.com dgibson

    This is nothing you can’t do with CSS 2 or 3, so why bother with all the DOM scripting? To get that IE6 support? Well maybe the CSS method will be “good enough” when IE7 comes out.

    /* MP3 Media Link */
    a[href$=".mp3"] {
    padding-right: 18px;
    background: url(/images/bullets/mp3.gif) right center no-repeat;
    }

    You can also use the :before or :after pseudo classes with content: to insert the image.