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

[AlexDawson]

That’s one step too far IMO, buttons should be reserved for functional links (such as the submission of data), not as a cross-linking method, it’s unsemantic to use an input button in place of an anchor reference for stylistic reasons. Plus visitors might be scared clicking a button will signify something more than just “go here”.

[eagleseyedesign]

I think all internal links should be buttons (or at least styled like buttons) unless of course their inline links in an article. External links should always be just text links.

[Chroniclemaster1]

@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.

still not convinced

cheers

This has always seemed to me like it was thought up as a really misguided SEO-type thing. Like your visitor really cares about staying on your website vs. following the information they need so you give them this little warning that says “Wait! You’re about to leave the one you love! Stay!!” rolling eyes Seriously, who among your visitors is that thoughtful of your webpage’s feelings.

@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.

OK, I stand corrected!!

[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.

[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.

[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

[Stevie_D]

@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’].

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!

[GalenGidman]

@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 like it when sites style their external links… and here is a site that does:

http://htmldog.com/

[Raphaelle]

@bluedreamer

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.

[Stevie_D]

@joebert

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…

[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.

[optl]

@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…

@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.

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

[bluedreamer]

@Raphaelle

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.

@Raphaelle

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?

@Raphaelle

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?

@Raphaelle

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!

[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.

[optl]

@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’].

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…

[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.

[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

[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]

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.