Link icons through CSS

Posted on Jun 16, 2007 in Design, Web Dev | 0 comments

After a dearth of design-related posts, I finally have a useful tidbit to write about. “What!?” I hear you shout. Why, it’s the use of tiny icons that indicate to visitors what a link will actually do. Some sites (notably Wikipedia.org) employ this technique and I decided I wanted to do so on a site I’m working on for my former employer, CESNW. I’m working a Learn and Serve project site for them.

Why would this be important? It’s another information layer for users as they navigate. A link could potentially:

• Go to a new page within the same site;
• Go to an external site (say, Amazon.com from a blog page);
• Download a PDF, Word document, or other file; or
• Open your mail client to send a message (the mailto: link)

Why not show the visitor what’s going to happen when they click the link? “Too much work,” you say. Pshaw! Not with CSS and some crafty selectors. Simply develop some cute icons for the link types you want to call out, then add anchor selectors (the a) that search for tell-tale strings like the .pdf or the http:// protocol that precedes external links. That’s all you have to do, as compliant browsers (IE 7, Safari, Firefox, etc. but not the ill-mannered IE 6) do the rest.

I found a couple of good sites that explain all this if you want more details. I’ll implement this on my site when I’ve finished doing so for the others I’m working on.

Related: If you liked this, check out:

1. Little-known CSS selectors Anyone worth his or her proverbial web development salt knows...
2. Usability—or lack of it—in GigaSize downloads Some sites’ usability is so atrocious it simply must be...