Lightburn

When it comes to browsing the web, few things are more frustrating than clicking on a link that you expect to go to another page, only to find yourself stuck in a PDF morass.  Nothing breaks a user’s flow faster than a link behaving differently than how they expected.

As web designers and developers, it’s our responsibility to clearly label links so the user knows what is going to happen before they commit to anything.  When you warn your user about what they’re about to do, they’ll feel more confident using your site. This in turn will give your site more credibility, and ultimately leads to a better overall user experience.

There are a lot of ways to do achieve this effect; this is the one that I like:

The Setup

First, we start with a bit of CSS.  On a small site where you have control over every page, this (with a bit of corresponding HTML) is all you need:

1
2
3
4
5
6
7
8
9

.pdf, .doc, .xls, .zip{
	padding-right:20px;
	background-position:right center;
	background-repeat:no-repeat;
}
.pdf{background-image:url(pdf.png);}
.doc{background-image:url(doc.png);}
.xls{background-image:url(xls.png);}
.zip{background-image:url(zip.png);}

View Example

The problem with this set up is that you have to go through and manually add a class to every link.  This can become an issue if your website has a lot of pages, is edited by multiple people, is CMS driven, or if you’re just too lazy to update all of the links. Luckily, we can toss in a bit of javascript to make our lives easier.

Some javascript for flavor

All we need is 3 lines:

1
2
3

$('a[href$=pdf],a[href$=doc],a[href$=xls],a[href$=zip]').addClass(function(){
	return $(this).attr('href').split('.').pop();
});

View Example

This snippet searches through your anchor tags, and determining if they are pointing towards a pdf, doc, xls or a zip.  If the script finds a tag that matches the criteria, it copies extension and classes to that tag.  If you want to use it to look for more than just the 4 example formats shown in this example, all you have to do is add “a[href$=format]” to the list.

Variation

If you don’t want to use icons, we can change the javascript a bit to append the filename to the end of the anchor tag, rather than using it as a class name:

1
2
3

$('a[href$=pdf],a[href$=doc],a[href$=xls],a[href$=zip]').append(function(){
	return ' (' + $(this).attr('href').split('.').pop() +')';
});

View Example

The Future

Once CSS3 is more widely available for use (And when I say that, what I mean is when we don’t have to cater to IE 6 & 7 anymore), this can be pulled off without javascript entirely.  Instead, we would modify the CSS to look like this:

1
2
3
4
5
6
7
8
9

a[href$=pdf], a[href$=doc], a[href$=xls], a[href$=zip]{
	padding-right:20px;
	background-position:right center;
	background-repeat:no-repeat;
}
a[href$=pdf]{background-image:url(pdf.png);}
a[href$=doc]{background-image:url(doc.png);}
a[href$=xls]{background-image:url(xls.png);}
a[href$=zip]{background-image:url(zip.png);}

View Example

That’s it! Feel free to grab any of the code/files I have here and use or abuse them any way you see fit.  If you have any suggestions on how to improve this, let me know in the comments!