All around the Web you’ll see quite a range of approaches to handling links to external sites. Some force a new window to open, some give visitors a choice of opening in a new window or not, some sites provide visual cues to identify external links, and some treat internal and external links visually the same. What if you’d like to visually identify external links for users without having to change your existing markup in any way and without knowing a programming language? Today’s Feast explores user-friendly options for external links, including possibilities with CSS.

External Links and New Windows

There was a time when all the external links here opened in a new window by adding the target attribute within the anchor element. I stopped doing that for a variety of reasons, including accessibility, usability, and some people’s abhorrence. There are still plenty of sites that try to force external links to open in new windows, though. I also confess that my older posts here unfortunately still contain the target attribute on external links since Blogger doesn’t have a global search/replace capability.

If you’d like to provide users with an option of opening external links in a new window there are free JavaScript scripts available all over the Web, including Dynamic Drive’s Open links in new window. Of course JavaScript won’t work if JavaScript is turned off or not available in the visitor’s browser. If clients insist on forcing a new window for external links perhaps explaining the accessibility and usability problems would help them understand the drawbacks and to instead implement this feature as an option for the user to decide rather than forcing a new window.

Visual Cues for External Links [The Weblog Handbook, by Rebecca Blood]

I’ve noticed a few sites that visually differentiate between external and internal links. Rebecca Blood uses CSS to provide visual differences between external and internal links, for example. Some sites use a small inline icon before or after an external link as a visual cue. Matterform Media’s QBullets and Nate’s micro icons via are available for these and other purposes.

Why are some sites providing these visual cues? I personally think a subtle visual cue that a link leads to another website can be helpful. Sometimes the content will provide sufficient cues that a link goes to another site, but that’s not always the case. A site ought to still function just fine without the visual cue, much like the CSS hover attribute, while also enhancing the user experience to some degree. [Eric Meyer on CSS]

Looking around at various approaches to adding an inline image to external links, some use a CSS class with the anchor element for each external link, something like Eric Meyer’s fine example at Bringing Hyperlinks to Life. Eric’s example is especially helpful for avoiding some quirky IE bugs, too.

Available for Movable Type users are helpful plugins and template modules that automate this process, including Brad Choate’s Off-site/on-site hyperlink differentiator, Adam Kalsey’s External Links in new windows, and Mark Pilgrim’s Automatically inserting images before offsite links.

For Blosxom users, Todd Larason has provided some macro plugins and explanations at his post, Classing External Links.

What if you don’t use Movable Type or Blosxom, though? Adding a CSS class to each external link could be impractical to implement for an existing weblog using a weblog program that doesn’t provide global search/replace. Or maybe you’d prefer not to add a class attribute anyway.

New CSS3 selectors offer a possible solution. Stuart Langridge’s External link icons the CSS way provides a CSS3 selectors approach. William Cox’s Mini Icons article and comments to follow provide a CSS3 selectors approach with helpful browser-support information, too. According to the comments there, it seems that the CSS3 selectors approach will work with Safari and Camino (Mac OS X) and Mozilla 1.3 (PC). If you’re OK with your external link images only showing up in those browsers and not others, this may be a workable solution for you.


Friday Feast archives

06:56 pm, pdt20 June, 2003 Comments, Trackbacks (2) ·';}?>

Categories: Accessibility, Browsers, CSS, Design, Development, Friday Feast, Movable Type, Weblogs

*/ ?>