The external link symbol
19 September, 2008 | Filed under “The Archives”
Reservation and embracement
Let it be understood: I am no fan of symbols. They are everywhere and they change on the whim of designers – and executive authorities. What has an obvious meaning to many, may draw a blank with me. So I shy away from them. Mostly. There is, however, an interesting use of symbols for external links on web pages. It has gained support, at least among web designers. This way you (may) know that by choosing a particular link, you are taken away from the current web site. The symbol may never mature with a standardized look, however, and my present take on it is the icon suggested by Andy Budd (and there it is, immediately following the link) on the cover of his book, “CSS Mastery. Advanced Web Standards Solutions” (2006). If for no other reason, I implement the icon as an intellectual CSS exercise.
If you missed it, here it is again: 
Still miss it? My guess is that you are on Internet Explorer 6 or earlier. No luck there!
Similar symbols – identical purpose
Different web designers tend to position the symbols differently relative to the typographic baseline, and I make no effort to reproduce this behaviour in the table below. My apologies also for not necessarily displaying the symbols on their proper background colour.
Most designers seem to agree on displaying the symbol after the link, either as a GIF or as a PNG image. As such, the image will remain at a fixed size if the user enlarges or reduces the size of the text. Which is no big deal. Actually, it is no deal at all.
In no particular order, then, here is my small collection of external link symbols (updated ever and anon):
| Table. External link symbols. |
|---|
| Developer | Symbol |
|---|
| CSS Mastery (the book) |  |
| developer.mozilla.org (1) |  |
| developer.mozilla.org (2) |  |
| en.wikipedia.org |  |
| trac.browsershots.org |  |
| wellstyled.com |  |
| www.456bereastreet.com |  |
| www.bobbyvandersluis.com |  |
| www.codepoetry.net |  |
| www.flashguru.co.uk |  |
| www.friendsofed.com |  |
| www.grixel.gr |  |
| www.jeep.com |  |
| www.quirksmode.org |  |
| www.stopdesign.com |  |
| www.bioneural.net |  |
| www.apple.com |  |
| snipplr.com |  |
| electricsheep.wikispaces.com |  |
| expressionengine.com |  |
| www.flzone.com |  |
| www.lemkesoft.com |  |
| brandonaaron.net |  |
| Source forgotten |  |
Afterthought
It should be noted that it is considered bad practice to link to a new page/window (aka target="_blank"). This should only be tolerated when you link from an advertisement on a web site (for instance with a clickTAG in Flash movies). You are then often left with no option, anyway, as the owner of the site wishes the user to stay on their site for editorial (read: economical) reasons. One exception to the “rule” leaps to mind: When you need to link to a page from within a (small) “JavaScript window” as generated with the Lightbox or Lytebox methods. In such cases you should not cram new content into the (usually) restricted space. Not because the layout will suffer, but because the user might be confused as to were he/she is.
Update: Toby Somerville has expanded on this technique to, as he says, “indicate to your visitors where a link is going and to what type of file” – should the link be a download and not a hyperlink. Check out his article Helpful Hyperlinks with JavaScript at SitePoint.
