internal vs. external links

do you style them differently?

[Finder]

As a user I find it annoying to click on an external link that I assumed was an in-site link. On my site I have a news section with blurbs that tend to be a mix of internal and external links.

I could swear I saw a site once that colored the links differently. Does anyone do this? If so, has it been to your advantage?

[Marcia]

Finder, the only way to do different types of links on a site, as you've described, is with CSS, assigning different classes to links that are internal or external to a site.

[Nick_W]

Yes, something like:

[pre]
.external {
 color: #0000FF;
}
.internal {
 color: #CC0000;
}[/pre]

Would do the trick...

Nick

[mford]

Yes, CSS is how to do different colour links however I'm not sure I would use them to disguish between external / internal pages, I'm not convinced it's intuitive enough. Are you sure there isn't a different layout you could use instead?

Btw, are you opening external sites in a new window? - unless you have lots of external links, I would recommend it so the visitor stays on your site.

[chris_f]

Another good trick is to have a big red astericks next to external links which, on click, moves to the bottom of the page and says something like 'Links displaying an astericks are external links from this site. This means you will no longer be on our site and we can take no responsibility for the content.....'

Chris

[andreasfriedrich]

I style them differently and add a title attribute to the a element. It reads something like this: "External link: title of external page - URI of external page".

Andreas

[currybet]

"Btw, are you opening external sites in a new window? - unless you have lots of external links, I would recommend it so the visitor stays on your site."

this is a big no-no if you are having any consideration for people with accessibility issues, its really confusing.

i would suggest a combination of CSS to colour the links differently, and use title="blah.com is not responsible for the content of this external site" in the anchor tag. it will appear as a tooltip when people hover on the link.

[richmc]

a nice thing i've seen on some sites is to have a tiny gif icon next to the text link indicating the link will open a new browser window.

perhaps something similar could be provided to indicate external links, with a legend somewhere prominent on the home page to indicate this?

[Finder]

I suppose I should have clarified since I mostly lurk in this forum: my site already uses css. :)

My quandry is to whether or not styling links differently is intuitive enough for the user. I wouldn't open them in a new window as I find that annoying as a user. I'm also not fond of the idea of using an image since that will disturb the reading flow of the news blurbs.

Styling links differently might create a learning curve for the site, i.e. people who frequent the site would eventually figure out the difference between the two kinds of links. But then, it might confuse new users (or less savvy ones).

As you can tell, I am still undecided. :)

[DrDoc]

A good idea is to let the full URL to the external page be part of the link. That way the visitor easily understands that it goes to a different site.

Also, you want to avoid opening pages in new windows, like currybet said. However, if it is critical that they are opened in a new window (such as if the user is logged on to your site and would be logged out if clicking back) you should clearly state, in TEXT, that the links will open in a new window. That way you can still help those that have accessibility problems.

WCAG 1.0:
10.1 Until user agents allow users to turn off spawned windows, do not cause pop-ups or other windows to appear and do not change the current window without informing the user.

Finally, it is illegal to open an external site within the frameset on your page.

[daamsie]

Hmm.. I find this interesting regarding opening different sites in new windows... As a surfer I actually prefer that links are opened in new windows.. particularly when I'm browsing through a directory - this way I can go back to the directory and click on another one if I want to, rather than have to go back ten pages.. As a result I have made links a new window on my site also. Should I put a warning in my links directory like DrDoc suggested?

Drdoc, where do you have the information on opening sites in framesets being 'illegal'? I find this strange, considering Hotmail is an example of a site that does this (which annoys me greatly). Of course, they do say that the site displayed is external, but nevertheless, it seems to stuff up my login for some reason and I've had to implement frame-killer code to get rid of it!

[Bentler]

I think styling internal and external links differently is a bad idea if for no other reason than new visitors may mistake some links as already visited. As I understand, it's best to do what everyone else does and make all links look consistent.

I think it's important to let visitors know they're leaving the site, though, and will no longer be covered under our privacy policy, that we have no control over the external content, etc. for legal reasons. I identify external links with words (external link) on one site and an icon on another, and I think the words are easier to understand.

[dalguard]

I often do it as part of the text of the link. e.g. More information on MySite vs. More information on OtherSite.

[currybet]

daamsie, one of the issues with forcing pages to open in a new window is that you have taken away the users choice. i nearly always open links in a new window, but i can do that by using the right mouse button, or using the tabbed interface on opera. but it doesn't mean i always have.

there is a really good explanation of some of the accessibility & usability issues at:
[diveintoaccessibility.org...]

[Finder]

I identify external links with words (external link)

This might work as long as it doesn't interrupt the flow of the news item. I do try to make them obvious in the anchor text, e.g., "More information can be found at the publisher's website."

I am definitely going to style them differently but, as Bentler commented, I'll have to be careful with any use of color.

Thanks for your suggestions everyone. :)

[saoi_jp]

I agree with the others who say do not open new windows, unless absolutely necessary. I've got two reasons.

The first is from the perspective of a user. I always right-click, open in new window, if I want to stay on the original page. I can do that myself. (Which by the way is why I do not stay on sites that disable right-click.) Novice users may be clueless about controlling where the page opens (especially Mac users, since it's not intuitive to click and hold, which is like right-click), but you could teach them.

The second reason: if someone has already clicked your link to the new window, and then clicks another of your links, the new page will open in the same window as the first one. It won't be ovious at all. I've tried ways around this, and one way is to add extra text onto the target, such as

target="_blank3"

but I haven't tested it extensively, and gut instinct says that this will fail in a number of browsers.

Edited to separate paragraphs

[bill]

I didn't see this mentioned yet, but another thing to consider is that target is depreciated in XHTML Strict. The suggested way to open a new window in XHTML Strict is scripting. If the W3C is depreciating this in future standards it might be considered bad form to open new windows this way down the road.

[bobince]

The value of 'target' that *always* opens a new window is '_blank'. Anything else, like '_blank3' will do the annoying replace-contents-of-another-window thing you mention.

Personally I don't care much for links that automatically open a new window, I prefer to leave it up to the user. But sometimes clients demand it, unfortunately.

A nice trick to style external links is to add a little (eg. 8x8px) 'external site' icon in the top-right, for example like this:

:link.external {
padding-right: 8px;
background: url(/img/external.gif) top right no-repeat;
}

If you don't fancy adding any markup to external links, you can automate it with a JavaScript loaded at the end of the document, for example:

for (var i= document.links.length; i-->0) {
el= document.links[i];
if (el.host!=location.host) {
el.className= 'external';
} }

You can even abuse this to add targeting to documents that validate as [X]HTML strict, if that bothers you:

for (var i= document.links.length; i-->0) {
el= document.links[i];
if (el.host!=location.host) {
el.className= 'external';
el.target= '_blank';
} }