Mark Pilgrim explains how to make the Movable Type publishing system automatically display off-site links in a different style than in-site links. Is this something news sites should be doing? Would users benefit from a knowing which links take them to other sites? Rebecca Blood has done this for a while now, but I don't think it's particularly helpful on a blog, where most links are external anyway. And using three, maybe four, different link colors (in-site link, off-site link, visited link, link hover) on the same page could get confusing quickly. My opinion: This is technological overkill.
UPDATE, 2:45 PM ET: Steve Outing suggests this could be a good way of distinguishing between paid and free content. I still think things would get confusing quickly if sites started throwing around three different link colors; unless there were a Web-wide standard for these colors (which is unlikely), users would have to relearn the color scheme for each site that used it. Not to mention color-blind users and users of alternate browsers wouldn't be able to make the distinction. A good solution: Use images to distinguish paid content, as Economist.com does.
Comments
Posted by Dan Knight on August 23, 2002, at 5:56 p.m.:
We've addresses this in one of our weekly columns (The 'Book Review) by putting external links in bold and leaving local links plain. No issues with yet another link color.
Posted by Wohleber on August 23, 2002, at 6:03 p.m.:
I always thought that there should be an easier way of distinguishing between on-site and off-site links, and a better way generally of anticipating what sort of info awaits at the other end of the link--a two-sentence glossary entry or an in depth article? A primary source, a neutral factual overview or an opinion piece?
This is generally only a problem with inline links on sites that embrace the fetish of non-linearity and make every third word a link to something else. It's not so much true on sites that segregate links into lists at the end of stories or in sidebars. Blogs freely use inline links, but they've also developed conventions that make it pretty obvious from context what sort of link it is.
So maybe the solution is not some UI widget but better writing.
Posted by Adrian Holovaty on August 23, 2002, at 7:10 p.m.:
Bolding is a neat way to bypass the color confusion. It might have an unwanted side-effect, though -- since Web users tend to scan pages, frequent use of bold text can be kind of jarring (just like frequent inline links). Dan, can you post the URL to a sample book review column as an example?
The TITLE attribute for link tags does an OK job of explaining what kind of content lurks behind a link. Of course, the catch is that whoever posts content has to use that attribute. :-) I try to do it on all links that aren't dead obvious, but it can be a hassle doing it for every single link. There's got to be a better way. I agree -- a solution might be to reword your content.
Posted by Dan Knight on August 24, 2002, at 4:44 a.m.:
Here's this week's 'Book Review.
Posted by Adrian on August 26, 2002, at 2 a.m.:
Thanks for pointing that out! I think the way you've got it set up works well. It definitely helps that you explicitly explain the bold/no-bold links at the top of the page.
Posted by Steve Yelvington on August 26, 2002, at 8:59 p.m.:
This is actually a fairly old and well-recognized problem. In the original Interchange UI work, the solution was to pair linking phrases with icons showing the data type of the linked-to item. See http://www.styla.com/port_detail_ichange.html for examples. When we all moved to the Web, the Star Tribune continued to use the icons. Much of the high-end design work we're currently doing at Morris Digital Works (we're redesigning several client newspaper sites) includes icons as part of the linking conventions. Not all links will use icons, of course -- inline links and navbars do not -- but when related items are packaged below a summary paragraph, it makes perfect sense.
Posted by Adrian on August 27, 2002, at 6:23 a.m.:
I remember seeing those types of content-associated icons in the early days of AOL and Compuserve. (Er, maybe they still do it; I haven't used those services in years.) As you note, though, this doesn't tackle the problem of inline URLs, which is the main issue here.
One solution could be to use CSS. Eric Meyer's new book ("Eric Meyer on CSS") describes a solution in which images are placed adjacent to inline links via the a:before pseudoclass.
(Coincidentally, I just noticed his articles page uses Dan Knight's technique of bolding outside links.)
Posted by Dunstan on March 8, 2003, at 3:15 p.m.:
I also use the title attribute to sort this out. Anything external has "Go to www.domainname.com" (regardless of the actual url, this helps keep it short) and anything internal has a more descriptive title, eg. "View the privacy policy".
I don't know how many people apart from me look at the title pop-ups though :o/
Posted by Rich Persaud on March 17, 2003, at 12:16 p.m.:
I'm developing a commercial UI proxy + open-source JS library for user-side link control. The clickless link traversal widget currently differentiates local and offsite links, TITLE text and links with very short descriptions. An early conceptual demo is available for IE/Moz. To be clear, this is a client-side proxy installed by the user, who can freely modify widget behavior. There is ongoing work in the accessibility arena to standardize multimodal interfaces.
Comments have been turned off for this page.