Brainstorms and Raves

Notes on Web Design, Development, Standards, Typography, Music, and More

Fri

20

JUN

2003

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 web-graphics.com 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.

More

Friday Feast archives

top


Visit iStockPhoto - Royalty-free stock images. Click Upload Earn, Click Download Create 

I Wrote a Book

Deliver First Class Web Sites: 101 Essential Checklists  Via amazon.com: Deliver First Class Web Sites: 101 Essential Checklists, by Shirley Kaiser. SitePoint Books (July 2006). 

Available now via: SitePoint Books, Amazon.com, Amazon.ca (Canada), Amazon.co.uk (UK), Amazon.fr (France), Amazon.de (Germany), Amazon.co.jp (Japan), Tower Books U.S. and elsewhere! You'll also help support this site and its owner if you purchase via any of these links.

Learn more at SKDesigns - Deliver First Class Web Sites and via SitePoint Books.

Recommended Books

Cover - Deliver First Class Web Sites: 101 Essential Checklists, by Shirley Kaiser. SitePoint Books (July 2006).

Cover: The CSS Anthology: 101 Essential Tips, Tricks & Hacks, Practical Solutions to Common Problems, by Rachel Andrew 

Hand-picked best book recommendations for Web site design, CSS, graphics, Photoshop, color, accessibility, more

In association with
 In Association with Amazon.com 
http://brainstormsandraves.com/archives/2003/06/20/friday_feast_49_css_approaches_to_external_links/
Page last modified 14 July, 2007 - 10:20pm PDT Page load time: 0.010296 seconds.