Marking External links with CSS

A few weeks ago I decided it was time to do something about the external links on the site I maintain at work. There are a few reasons why I felt the need to do this:

1. It’s just good usability. Sending people to completely different sites unexpectedly has got to be disorienting
2. The housing site has a parituclarly vague mix of internal and external links. External links often show up in unexpected places, including….
3. On the navbar — this was the biggest problem I wanted to address. Some of the links from the navbar (particularly under the “residence services” section) go to external sites.

There are two problems that need to be solved here: what icon to use and how to apply them using HTML and CSS. (To clarify, external links are links that point to another website NOT links that open in a new window. That’s a completely different issue).

Doing the research

One of the key problems with marking external links is that the icon has to be recognizable to people. I knew that wikipedia had an icon to mark external links, but how are others handling it? In order for this to work there has to be a convention. So I started googling around and this is what I came up with:

• Simple, accessible external links - adds support for non-CSS browsers
• Using CSS3 attribute selectors
• Long article with thorough explaination of rationale and the above technique

I also asked around at TWF for some feedback on the topic. That turned out to be inconclusive, but Andy had some good advice.

Deciding on a suitable icon

After doing the research I found that there is no clear convention for the image to be used. Some are using the wikipedia icon , others have a similar one with a page instead of a box and others are using a globe. Hopefully the convention will sort itself out as this technique becomes more popular. This CSS-discuss thread mentions that the box or page icon with arrow seems to be the best convention.

I decided to use the Wikipedia icon mainly because it is the widest read and most recognized site using this convention. I knew that my target audience was highly familiar with Wikipedia and would be likely to recognize that icon, if any.

Figuring out the mark-up

There are a couple of ways that you could do this with HTML and CSS:

1. Put in a class=”external” and style the class (not as semantically corect as…)
2. Put in a rel=”external” attribute and use attribute selectors to style the CSS (as suggested by Andy; does not work in IE 6)
3. Putting the image direclty into the code so it can be read by alternate devices (could get messy)
4. Use attribute selectors to check for an “http” at the start of the link href (a[href^"=http://"] ; also does not work in IE 6)
5. Put “external link” in brackets after the text inside a span that is then replaced with an image using CSS

I didn’t see any of these options as distinctly superior to the others. I decided to use the second option — rel=”external” with CSS using attribute selectors as suggested by Andy. That seemed like the best option to me (by a small margin!). I also decided to include a title=”external link” attribute to help explain the link to people who didn’t know what the icon means. This code does not work in IE 6 and that’s okay with me. IE 7 will be coming out shortly so this will not be as much of an issue in a few months. It is an extra feature and it is therefore not essential that it work in all browsers.

Putting in the icon

So the CSS is simple, put in the icon as a background image and add some padding to make sure there’s space for it:

a[rel="external"] {background:url(../images/external.png) 99% 40% no-repeat; padding-right: 15px;}

The 99% 40% just centers it in the availble space so it looks a little nicer.

And that’s it! See it in action. I am thinking about doing similar icons for email, pdf, and links to other sites in the UW domain. But that’s probably overkill

Posted in Design, Usability, Web Standards Post a comment

Comments RSS