your thoughts on styling external links differently?

[Raphaelle]

Hello,

I'm currently working on a new skin for our company's website. We've got a blog, a portfolio section, some static pages - the usual.

We're using Wordpress and someone suggested we use a plugin that enables to visually differenciate external links from internal ones.

I'm not sure what I think about this. My argument against the plugin would be that users (particularly our web-savvy audience) know how to use their back button or open in a new tab, plus it's usually understandable from the context of an article whether it's an internal or external link. Why add some visual noise then?

I must highlight that I'm not talking about styling links that open in a new window (we don't do that at all) - I'm only talking about links that will take you to a different website within the same window.

What do you guys think?

If any of you think it's relevant to make a distinction, what do you think it should be? Different colour? An icon?

Thanks in advance

[xhtmlcoder]

Generally it is not needed but if it is a large article it could be used as a visual aid. However, usually that type of thing is done with the title attribute and possibly icons basically saying they; "Link to an external site".

The main obstacle will be getting the user used to how you define them after that it may be beneficial in some cases - for repeat visitors.

[Raphaelle]

Hello xhtmlcoder,

So basically you don't think it's super useful either. I can't think of any website that does this sort of thing.

I still think it's just unnecessary visual noise, apart from maybe some specific case such as a very long article with both types of links (internal and external), but it doesn't apply to our case. Besides, we're talking about applying this differenciation to the whole site.

still not convinced

cheers

[AlexDawson]

I think it's uses are limited only because people don't represent external links uniquely by default (therefore it's not a recognisable convention). What I would say is, a few websites I visit identify external links with an icon besides the link text (to the left) and this may present a more ideal solution. If the links are the same color, their easier to recognise and differentiate from styled text on the page, but with icons you can highlight links that have unique attributes (to the target) such as external site, if a popup (god forbid) is required and when you link to unique file-types like PDF or DOC (having their applications icon besides it).

[Raphaelle]

Thanks for your input Alex. Would you mind sharing a few links to websites that use such an icon? It's interesting that they position it before the link itself.

[AlexDawson]

This was the tutorial that got my interest in using such icons: http://www.psyked.co.uk/css/auto-matic-link-icons.htm

PS: All Wikipedia articles make use of them, if you go down to the references section, you'll notice an icon to the right signifying an external resource.

[Raphaelle]

I should have thought of Wikipedia!

I think these icons are indeed relevant sometimes, like on these examples. But not on any standard website.

Cheers

[masm50]

@AlexDawson - thanks for the link.

I'd been thinking about adding something similar to one of my sites for a while, that would make the process a whole lot easier.

[optl]

I think icons next to external links is used often enough on the net that users are used to it by now and may be useful.

I would suggest using a css selector that puts a background image next to links beginning with http:

Something like this would work great:

a[href ^= "http:"] {
padding-left:25px;
background:url(yourimage.gif) no-repeat top left;
}

In older browsers like IE6 the links won't show this and will just display normally.

[AlexDawson]

optl, apart from the fact 99.9% of all website links are to http (making icons redundant), better to target the file type using a[href$='.pdf'].

[Raphaelle]

OK, it's interesting that you guys think it's a good idea.

FYI the Wordpress plugin is called external links

At first I didn't like it because to me, the default icon they use looks like the "opens in a new window" icon. Wikipedia uses the same icon. Am I wrong about this?

Btw, I think that using icons for download links is one (very useful) thing, but signifying that one's gonna leave a website is to me, a very different issue.

[optl]

optl, apart from the fact 99.9% of all website links are to http (making icons redundant), better to target the file type using a[href$='.pdf'].

I only use http://.... to link to external websites. To link to files within my website I refer to them using a relative/absolute paths which uses less code and keeps my links shorter and more readable.

Also I'm not sure what you are talking about with the .pdf selector. He's just talking about external links I thought, didn't read anything about pdfs...

[bluedreamer]

Interesting question!

My first question would be to ask what problem you are having by not marking external links differently?

If there is a problem that needs to be addressed then it can be, otherwise there is no problem in the first place

[Raphaelle]

Hi bluedreamer,

You're right to put it this way. To me, within the context of my company website, I think there is no problem with not stying these external links differently.
It's not like we write loads of posts every day with lots and lots of content and a long list of external references. It's just not the case.

For Wikipedia I can see how this works down the bottom of each page, for references, but we're far from Wikipedia's model.

Besides, our audience is web-savvy, so I suppose they know how to use their back button. Plus it should be understandable from context that a link might take you elsewhere.

As a user, it's never bothered me NOT being told I'm going to leave the site. It would annoy me if the page was opening in a new window, but that's so 5 years ago anyways.
For the user, isn't it the same to be directed to an external site or to a page within the same site? Either way you're gonna have to press the back button to go back to the original page.

[AlexDawson]

I would say in the case of external sites it's not so much an issue as you can hover over a link and it's address appears in the status bar. But if you link to a PDF file or file type which isn't native to the browser I would say the importance level of differentiating the links so people know what the resulting behaviour will be (opening a new application) is imperative. While the need for such a function could be debated, I would say it's a usability enhancement.

[optl]

I only use http://.... to link to external websites. To link to files within my website I refer to them using a relative/absolute paths which uses less code and keeps my links shorter and more readable.

Also I'm not sure what you are talking about with the .pdf selector. He's just talking about external links I thought, didn't read anything about pdfs...

I would say in the case of external sites it's not so much an issue as you can hover over a link and it's address appears in the status bar. But if you link to a PDF file or file type which isn't native to the browser I would say the importance level of differentiating the links so people know what the resulting behaviour will be (opening a new application) is imperative. While the need for such a function could be debated, I would say it's a usability enhancement.

You never addressed my point about using http:// for links within your site.....

[bluedreamer]

For Wikipedia I can see how this works down the bottom of each page, for references, but we're far from Wikipedia's model.

You might be far from their model but that approach does clearly define what what for the visitor.

Besides, our audience is web-savvy, so I suppose they know how to use their back button. Plus it should be understandable from context that a link might take you elsewhere.

For web savvy people isn't identifying external links teaching people to suck eggs?

As a user, it's never bothered me NOT being told I'm going to leave the site. It would annoy me if the page was opening in a new window, but that's so 5 years ago anyways.

Me neither, though external links on the BBC news site sometimes get passed through a "We are not responsible for external content" page - that's just plain annoying! I know it's an external link so why tell me something i already know?

For the user, isn't it the same to be directed to an external site or to a page within the same site? Either way you're gonna have to press the back button to go back to the original page.

Absolutely!

I'm getting the feeling that this plugin has be written just because they could, I can't see any benefit whatsoever!

[Raphaelle]

I'm getting the feeling that this plugin has be written just because they could, I can't see any benefit whatsoever!

Totally agree with you!

Might be slightly unrelated but I just came across http://www.html5rocks.com/ in which the "Presentation" navigation item takes you not only to a different website, but it opens in a new window. That pisses me off.

My conclusion so far is that differenciating external links from internal ones can be a bit useful in some contexts such as the Wikipedia site, but for "regular" websites it probably doesn't add any useful info, it's just unnecessary visual noise to me.

I do think context is very important here. I used to think "consistency" was the single most important thing in interface design, now I think "context" is just as important.

[joebert]

I treat all links the same when I browse anywhere. The only distinction I appreciate is that between links I have and haven't visited already. Distinction for external links doesn't really do anything for me.

I make extensive use of Operas "Open in new Background Tab" and "Open in new Tab" context menu options.

[Stevie D]

optl, apart from the fact 99.9% of all website links are to http (making icons redundant), better to target the file type using a[href$='.pdf'].

Assuming you use relative links within your site, targetting http links will only hit external links - it takes the link destination from the source code, not the parsed actual destination.

To add my voice - using CSS selectors to add an icon might be worthwhile. I wouldn't bother with different link colours because it's unlikely that more than three people in the whole world would realise why some links were one colour and some were another. Given the number of people who don't twig that about :link and :visited, it's one of those ideas that sounds great in theory, but the actual benefits are minimal and the scope for confusion is much bigger!

[Stevie D]

I make extensive use of Operas "Open in new Background Tab" and "Open in new Tab" context menu options.

Same here - and equally, I make extensive use of its "Open" context menu option when some oik of a webmaster has decided that I ought to want to open the links in a new window...

[FaridHadi]

I'd say most websites don't need it and adding different colors for different types of links would just be a horrible idea, but using an icon to indicate different kinds of links could be a usability enhancement on a web site/application that actually needs it. (I can't think of one at the moment but I'm sure it could be useful.)

Raphaelle, in your case I can't see why you would need to bother with something like this.

Hope my input helps

[felgall]

I do distinguish between internal and external links on my site but in a fairly simple way - they are both the same colour but internal links do not have the underline that the external links have. That makes the links close enough in appearance for those who don't care whether a link is internal or external while providing a visual clue for those who do.

[GalenGidman]

Hello xhtmlcoder,

So basically you don't think it's super useful either. I can't think of any website that does this sort of thing.

I like it when sites style their external links... and here is a site that does:

http://htmldog.com/

[Stomme poes]

I personally appreciate seeing with a small icon that a link goes off-site. I'm much more likely to right-click and open in a new tab when it's external, and navigate normally on internal links.