One never ending debate on the web is on whether external links should open in new windows. Some say Yes! they should open in new windows because we need to keep the users on our site as long as possible.
Usually these are the sales/marketing people. The other group says No! They shouldn’t open in new windows, because they’re extremely annoying and we should always let the user decide
. These are the programmers, the group I’m in.
There’s also a third player in the debate, the World Wide Web Consortium. According to the XHTML Strict specifications, the usage of the target attribute has been banned. This happens because the XHTML Strict standard focuses entirely on the content of the document while sending all the presentation data to the stylesheet. The target attribute is a presentational one, because it specifies how the data from the hypertext reference should be presented to the user (in a new window, in a frame and so on). The XHTML Strict standard is meant to be used with all kinds of user agents – not just browsers – even with those that don’t support data presentation in the traditional way, in a browser’s window. This category of user agents includes, but is not limited to, screen readers for visually impaired persons, text-based browser such as links, web crawlers and so on. How could a text-based browser open a link in a new window? It doesn’t even have the “new window” concept.
Javascript to the rescue
If you want a well formatted XHTML document with target="_blank" links, go for the Transitional doctype. If you’re stubborn and want to use the Strict doctype, simply mark all external links with a special class, let’s say “outgoing”. If a link has this class than it should open in a new window. A good idea is to use this class in your CSS file and mark all external links with an easy to spot icon, just like Wikipedia does. It’s very user friendly. After all the links in the document are marked this way, simply use one of the javascript snippets below – depending on which framework you use – to make them open in a new window.
First the prototype version…
Event.observe(
window,
'load',
function() {
$$( 'outgoing' ).each(
function( item ) {
item.target = '_blank';
}
);
},
true
);
…and now the jQuery version…
$( function() {
$( '.outgoing' ).each(
function() {
this.target = '_blank';
}
);
}
);
Isn’t this just cheating the standard? Well…ummm…kind of. But it keeps everybody happy. Because if the target attribute is not supported by the user agent – not a GUI browser – it will still receive the well formatted XHTML document and will be able to parse it and use the information within without breaking a sweat. And if the user agent does support the target attribute – usually this means that it’s a GUI based web browser – then all the links will pop up in new, extremely annoying, windows and the folks in the sales department will be very, very happy.
Here’s another way (jQuery) if you have rel=”external” instead of an outgoing class:
$("a[rel*='external']").attr('target','_blank');I love jQuery
I usually use classes because they allow me to add some visual hints that the link will open in a new window via css.
But your approach with jQuery is really cool, guess I could use it with a class name, like such:
I’m more of a prototype guy
If you’re attaching the external behaviour to links with JS, it would make sense to attach the styling through JS as well. After all, if the browser doesn’t interpret JS then the link you’ve marked as external through CSS is just misleading : ). But yeah, I do the same as Dever.
Also, with the “canonical craze”:http://www.mattcutts.com/blog/canonical-link-tag/, using rel just makes more sense.
I think external links should not open in new windows. If I want to see a certain link in a new window, I’ll decide if I’ll open it. I really find it annoying when a new window opens up without my permission.
Thanks for this! On my website I’ll usually open up affiliate links in a new window, which leaves them on my site for a little longer….at least in my mind!