re: New-Window Links in a Standards-Compliant World

[mmj]

Regarding the article by "New-Window Links in a Standards-Compliant World" by Kevin Yank:
http://www.sitepoint.com/article/1041

This is a technical article that does achieve what it says it achieves, but I think it raises an important issue (in my opinion) about usability.

While this code works and can achieve what it sets out to while being standards compliant, I believe that whether or not a link opens in a new window should be a decision that is left to me, the viewer.

All browsers provide a way of opening a link in a new window. Some browsers provide a way of opening a link in a new tab.

Everybody has their own style of surfing the web. Some people prefer to do their surfing in one window, while others like to use many windows and switch between them. Some (in Netscape, Mozilla or Opera) use tabbed browsing, and some use a combination of tabs and multiple windows.

If a person's browsing style involves opening links in new windows or tabs, he or she already knows how to do that using a shift-click, a middle mouse button, or a ctrl-click (depending on the browser).

I don't think that websites should force this decision upon the viewer, just as I don't think a website should force the viewer to see a webpage at a certain font size. While fixed font size will validate according to XHTML and CSS specifications, it does remove some control over the page from the viewer, and this is why we are now designing pages with variable font sizes (using CSS keywords or relative sizes). I believe we should give viewers the same flexibility when it comes to whether links open in a new window.

In terms of usability, I am annoyed when I click a link with my left mouse button and it opens up a new window. I am especially annoyed at this when the link appears to be a regular link - it is the same colour as other links, it has an underline or hover effect and it does not have any text to indicate that it will open in a new window. On the other hand, when I hold down shift and click a link (in IE) and it opens in a new window, I am not annoyed. I expected it to open in a new window.

Ideally, in terms of usability, I think that no links should be configured to open in a new window, by default, without the viewer's consent or knowledge.

What do you think?

[Kevin Yank]

The code in the article is actually a generation ahead of that used by the new sitepoint.com, in that it will not hijack your right mouse button clicks. Updating the code in use on sitepoint.com is high on our list of fixes for the site; however, Alex is taking a few days off bug fixing to put together snazzy new designs for our newsletters that match the new site.

As for respecting the user's preference when it comes to new-window links, I totally agree! Being able to enable and disable new-window links is one of the top features planned for the first update to the new SitePoint, which will focus on implementing user preferences with a unified login for the main site and the forums.

A sequel to this article explaining how to implement that preference (with a cookie to store it, of course) is definitely in order!

[Daz]

Unless I misunderstood this article, its saying from now on we should use javascript to open new windows, what about browsers with js disabled??! That's crazy if you ask me, no method of navigation should be reliant on javascript surely, or at least you should avoid it if at all possible.

[Kevin Yank]

Originally Posted by Daz

Unless I misunderstood this article, its saying from now on we should use javascript to open new windows, what about browsers with js disabled??! That's crazy if you ask me, no method of navigation should be reliant on javascript surely, or at least you should avoid it if at all possible.

The article does propose that JavaScript should be used to open new windows, BUT the method in the article was carefully designed so that the links will behave as plain old hyperlinks (opening in the same window) when JavaScript is disabled.

You're correct, no navigation method should rely on JavaScript, but it's OK for you to enhance your navigation with JavaScript.

[KillAllDash9]

Originally Posted by Daz

Unless I misunderstood this article, its saying from now on we should use javascript to open new windows, what about browsers with js disabled??! That's crazy if you ask me, no method of navigation should be reliant on javascript surely, or at least you should avoid it if at all possible.

Well, the idea is that if you don't have javascript the link will still work--it just opens in the same window.

[KillAllDash9]

Didn't mean to gang up on you, Daz.

[ThomasAesir]

Originally Posted by mmj

In terms of usability, I am annoyed when I click a link with my left mouse button and it opens up a new window.

I would agree that internal links shouldn't open in a new window but I think that external links should. In terms usability it's a good indicator, to the user, that they are opening a new Website. Although I can see the argument for getting rid of the target attribute and in this sense the code goes against the spirit of XHTML.

[redux]

in terms of accessibility, it's actually a bad idea to open new windows (as users lose focus unexpectedly). and in terms of usability, no site should rely on the fact that something is opened in a new window either (e.g. the smiles popup on this forum, which needs to be a popup as otherwise the smile code won't end up in your text edit area).

getting back to device independence, some browsers are not able to spawn new windows (i'm thinking small browsers for PDAs etc).
but yes, the main point was made that these links will also work with js disabled.

i agree wholeheartedly with mmj in that the ultimate choice lies with the user.

[redux]

Originally Posted by ThomasAesir

I would agree that internal links shouldn't open in a new window but I think that external links should. In terms usability it's a good indicator, to the user, that they are opening a new Website. Although I can see the argument for getting rid of the target attribute and in this sense the code goes against the spirit of XHTML.

the usual solution to the "external links" problem is to give a user some indication that the link he/she is about to click is indeed an external one that will take them away from the current site...be it via a little icon (with relevant alt text, of course) or in a more elaborate TITLE attribute.

[mmj]

Originally Posted by Kevin Yank

The code in the article is actually a generation ahead of that used by the new sitepoint.com,

Yep, I noticed and it is clever Javascript. I was going to mention SitePoint.com in my above post but I decided against it because that's not really what I wanted to focus on. I look forward to seeing it though.

I actually went over to Jakob Neilsen's site to see if he said anything about this that I could quote, or even just have a look at to see if I agreed. I couldn't find anything, though I didn't spend too much time searching. I found something about letting users control font size, but nothing about target= or opening links in a new window.

If we do choose to use links that automatically open in a new window, how should we indicate this? A dotted or dashed underline is one method that Kevin mentioned, although I don't really see this used in many places at the moment. Some sites I've seen do use a dotted underline to indicate that the link will spawn a popup (like the flash demo on the Editize site for instance).

Originally Posted by ThomasAesir

I would agree that internal links shouldn't open in a new window but I think that external links should. In terms usability it's a good indicator, to the user, that they are opening a new Website.

This is a possibility, of course. However, given that it is not used on the majority of websites, when it does happen it's not expected. If it were used on most websites, and I were expecting it, it wouldn't be so bad. As I mentioned above, I think at the moment we still need something to indicate that the link will open a new window so that it doesn't come as a surprise.

The dotted line or icon, or something else could become a defacto standard for indicating what links are going to open in a new window. I'm sort of still of the idealistic view however that if I want to open something in a new window, I can do this myself at any time, if you see what I mean.

[beetle]

I'm going to avoid talking about the purpose and the why/why-not of opening links in new windows, but rather just focus on the tech.

On this page I've got a couple window.open driven links that use a class on the anchor tag to give some indication that these links are a bit different than normal. Not exactly sure how well it works, but I like it.

Hmm, kev, any particular reason you wanted to use document.getElementsByTagName('a') vs. the document.links collection? I probably would have coded the function this way..

function externalLinks()
{ 
	if ( !document.links ) return;
	for ( var anchor, i = 0; ( anchor = document.links[i] ); i++)
		if ( anchor.getAttribute("href" ) && anchor.getAttribute("rel" ) == "external" )
			anchor.target = "_blank"; 
}

I think a particularly neat way to handle this would be to use a DHTML behavior (for IE) and an XML Binding (for Moz/Gecko) embedded into the style. That would be a happy marriage between styling these "unique" links while at the same time adding the 'new window' functionality with that very same style, plus you'd avoid the hassle/overhead of running an initialization script at loading on every page. Of course, doing that you'd probably get validation warnings or errors in your CSS

[redux]

from the article:

A number of other standards-compliant new-window link scripts out there propose using window.open() to load the document in a new window. While this approach generally works well on the surface, its downfall is that most browsers do not correctly report the referring URL in the request for the new page, which can be a serious issue, especially in inter-site links.

well, the solution to using window.open AND getting around the referring URL problem is to have an intermediate step server-side...a redirector page. window.open pops up a new window (or not, depending on the browser's javascript capabilities and the user's preferences) with the redirector script, which gets the external url as a GET variable. the script's sole purpouse then is to simply redirect to this URL. additionally, this page could also be used to track exit pages (and to get around the same referrer problem, the originating page with the external link could be added as additional variable as well). convoluted, yes, but perhaps a bit more in line with the idea behind removing the target attribute in the first place (although, as discussed above, i think the ultimate decision about whether or not to open a new window should lie with the user).

[Kevin Yank]

Originally Posted by redux

well, the solution to using window.open AND getting around the referring URL problem is to have an intermediate step server-side...a redirector page. window.open pops up a new window (or not, depending on the browser's javascript capabilities and the user's preferences) with the redirector script, which gets the external url as a GET variable. the script's sole purpouse then is to simply redirect to this URL.

I tested this solution; unfortunately, many browsers don't pass the redirector page as the referrer when using an HTTP redirect. A JavaScript redirect (by having the redirect page load a hidden form and then submit it to the target URL) does the trick, but passing query string parameters becomes a royal pain in the butt. Additionally, even when the redirect does work, it passes the URL of the redirect page as the referrer -- not the page with the link in it. This defeats half the purpose of passing the referrer in the first place.

additionally, this page could also be used to track exit pages (and to get around the same referrer problem, the originating page with the external link could be added as additional variable as well).

Tracking exit links by redirecting external links through a redirect script is a nice idea, but is a separate discussion -- it can be done just as easily without using window.open to create the new window.

convoluted, yes, but perhaps a bit more in line with the idea behind removing the target attribute in the first place

I still believe what I said in the article, that the target attribute's (justified, in my opinion) removal from the HTML specification does not mean it will/should also be removed from the DOM specification. There are many things you can do with the DOM that you cannot do with HTML, and if setting links to open in a new window is one of those, I don't see a problem with that.

(although, as discussed above, i think the ultimate decision about whether or not to open a new window should lie with the user).

I totally agree here, and I can see I'm going to have to publish a followup article demonstrating how this preference can be set and stored as a user preference for your site.

[Romain]

Originally Posted by redux

the usual solution to the "external links" problem is to give a user some indication that the link he/she is about to click is indeed an external one that will take them away from the current site...be it via a little icon (with relevant alt text, of course)

Well, I tought that in term of accessibility and to inform the user it would indeed be a good idea to add an icon to this script.

Interestingly enough, the code given by Kevin Yank has a malfunction that you can turn into an advantage.

As quoted on the original article :

Only <a> tags with an href attribute qualify as hyperlinks. Our code must therefore check that anchor has an href attribute as well as a rel attribute that is set to external.

if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")

But in fact, the script is only really checking for the "external" attribute and once it finds it, it's emulating a target="_blank".

So, to demonstrate my point and to take advantage of this (mal?)functionning script simply follow the two following steps :

1- add any kind of definition to your CSS resembling to this (I've created a tiny .gif --> <-- for the purpose of this demonstration, feel free to create a better looking one, that shouldn't be hard) :

a.external
{
	background-image: url(http://www.romain.info/gif/ecran.gif);
	background-repeat: no-repeat;
	background-position: right center;
	padding-right: 14px;
}

2- replace in your links every "rel" by "class" to reflect the desired change :

<a href="#" class="external" title="...">

Now you'll have links (like demonstrated on my web site ) opening in a new window, a nice icon to inform the internauts that those links will open a new window, and more importantly, all this will still be valid HTML/XML/CSS...

Critics are welcome (unless you want to correct my english syntax, pardon my french but english is only my third language), and improvements are encouraged. I'd be really interested in a new icon. I really suck big time when it comes to drawing.

[beetle]

That's exactly how I indicate popup links on my site (HTML Authoring section). AS you can see, I have a slightly different icon.

BTW, not that I think you intend anyting malicious, but your icon looks alot like their logo

[Romain]

I didn't know they had this icon, and I presume unless I copy the colors they're using (and I like orange a lot...) I won't have any problems.
I like the idea beneath your logo design. It's intend might be much obvious than mine to the end user...

[Romain]

I was terribly wrong :

Originally Posted by Romain

But in fact, the script is only really checking for the "external" attribute and once it finds it, it's emulating a target="_blank".

Actually it's not, probably my cache wasn't emptied when I tried, so it was using a javascript version that I had modified...

To make it REALLY work you need to adjust slightly the javascript. Instead of this :

anchor.getAttribute("rel") == "external")

you should write this :

anchor.getAttribute("class") == "external")

Now it will work. Both opening in a new window, and with an icon (without the infamous target="_blank").

[LeMonqui]

Originally Posted by Romain

Well, I tought that in term of accessibility and to inform the user it would indeed be a good idea to add an icon to this script.

This is a brilliant solution!

Reading the article, it struck me that the class attribute was designed to differentiate tags of the same name from each other, e.g. internal links and external links. Using the rel attribute to do this seems like a work-around for a problem that doesn't exist.

However, I must agree with mmj:

[QUOTE ="mmj"]Ideally, in terms of usability, I think that no links should be configured to open in a new window, by default, without the viewer's consent or knowledge. [/QUOTE]

There are certain situations where its preferable to open new windows. For example, when clicking on picture thumbnails, one reasonably expects a new window to open, but those are rare.

Forcing users to stay on your site when they have clearly indicated that they wish to leave doesn't seem like a good thing. Its almost adversarial. If your content is that compelling, I will shift-click your external links and surf in parallel. Furthermore, if you didn't want users to leave your site, why did you put a link there?

On this code:

function externalLinks()
{ 
	if ( !document.links ) return;
	for ( var anchor, i = 0; ( anchor = document.links[i] ); i++)
		if ( anchor.getAttribute("href" ) && anchor.getAttribute("rel" ) == "external" )
			anchor.target = "_blank"; 
}

Its unnecessary to check for anchor.getAttribute("href" ). All items in document.links have this attribute.

Generally speaking, its a good habit to write code that's self-documenting. Purposely obfuscating your code, while cool and clever, is a nightmare to maintain and debug.

[bo diddly]

Hi, i had a quick look at your site nad the way you have done your links. they are very nice but one question is - on mouse over the icon drops ever so slightly, is this intended ?

[beetle]

Not entirely - I never messed with it to make that go away, but now that you bring it up I'm sure I know how...

[Webnauts]

I thought might be interested in the W3C Mailing List Archives, concerning this topic:

http://lists.w3.org/Archives/Public/...thread.html#99

[Webnauts]

As above discussed, there are several accessibility and usability issues, concerning the opening of new windows....

Here are some interesting sources:

Karen Jessett: "Don't make links open in a new window"
http://www.jessett.com/web_sites/usa...on.shtml#links


Dive into Accessibility: "Not opening new windows"
http://diveintoaccessibility.org/day...w_windows.html

In general, from my point of view, the argumentations against opening new windows are enough not to do them!!!

Everyone must have the right to access and use the Web!

[Webnauts]

Originally Posted by mmj

Yep, I noticed [img]images/smilies/smile.gif[/img] and it is clever Javascript. I was going to mention SitePoint.com in my above post but I decided against it because that's not really what I wanted to focus on. I look forward to seeing it though.

I actually went over to Jakob Neilsen's site to see if he said anything about this that I could quote, or even just have a look at to see if I agreed. I couldn't find anything, though I didn't spend too much time searching. I found something about letting users control font size, but nothing about target= or opening links in a new window.

If we do choose to use links that automatically open in a new window, how should we indicate this? A dotted or dashed underline is one method that Kevin mentioned, although I don't really see this used in many places at the moment. Some sites I've seen do use a dotted underline to indicate that the link will spawn a popup (like the flash demo on the Editize site for instance).



This is a possibility, of course. However, given that it is not used on the majority of websites, when it does happen it's not expected. If it were used on most websites, and I were expecting it, it wouldn't be so bad. As I mentioned above, I think at the moment we still need something to indicate that the link will open a new window so that it doesn't come as a surprise.

The dotted line or icon, or something else could become a defacto standard for indicating what links are going to open in a new window. I'm sort of still of the idealistic view however that if I want to open something in a new window, I can do this myself at any time, if you see what I mean.

I do not agree that Jakob Nielsen said nothing about this:

See: http://www.useit.com/alertbox/990530.html

[samsm]

Interesting thread. I am interested in the claims of discrimination against blind users...

Radical changes of focus in a GUI environment are extremely disorienting to blind users who are navigating by screen reader, and thus can be considered discrimination against the visually impaired.

Are screen readers really this poor at...
1. ...controlling the screen environment?
2. ...figuring out the significance of changes and intelligently providing the user with understandable info and options about what is happening?

If a screen reader could competently do either of those, the point about discrimination against blind users would be quite the overstatement.

My misunderstanding is possibly a function of my ignorance regarding screen readers. For example, I would expect that instead of doing a text recognition thing off a browser, a browser for people with sight problems would simply look directly at the html. If the browser is looking directly at the html, and the target causes problem, then why not simply ignore the target?

Honest questions, I really don't know.

[Webnauts]

Are pop-up windows relevant to this topic?