Standards, BEST PRACTICE, accessibility, usability, XML
A web site should never force new windows on users. If it is necessary as exception to the rule, target="_blank" is the method to use. JavaScript's window.open does not send information about the referrer in IE.
Many web designers find it natural that some links open web pages in a new window. External links is the most obvious case. It is even considered to be great usability, because it is an intuitive way to mark that the user is leaving one web site for another one.
It also seems natural that some internal links open as new window. The new window can even be reduced to a bare frame without the menu line and the address line of the browser. A word list, a help function, a form asking the user for some input, user-friendly version of a page, tip a friend by email, etc.
It is often said that new windows are bad for beginners and good for advanced users, and that we have a schism between common sense accepting new windows as a matter of fact, and experts of usability regarding new windows with contempt. It is too simple analysis.
It is about something else. Who should open the windows? Is it the user, or is it the author of a web page. There are four solid arguments against forcing new windows on the user.
The first argument goes that new windows are great but it’s up to the user to decide when to open new windows. It is important to understand what a new window is. A new window is a new instance of my browser on my computer.
The constant flow of new windows opening here, there, everywhere, has it’s price. It forces many users into a relative passive role of consumption like sitting in an armchair in front of television. Today most users could not even dream of opening a new window by themselves.
Let us take the most popular browser, Internet Explorer, as example. If I want for a link to open in a new window, I just have to press the Shift key when clicking or activating the link using the mouse or the keyboard. I can also use the right mouse button and select new window.
If a web page opens in the same window, and the user decides that it ought to have opened in a new window, the user just have to press Ctrl+N, and a new window opens. It is often the best method because the history of the old window is transferred to the new window.
It is important to note that no expert of usability is against new windows. It is a question about who should rule the Internet. What model do we want for the World Wide Web? Should the model be a relatively passive user of consumption manipulated most of the time. Or do we want a more ambitious model putting the user in control most of the time?
When a new window is forced on the user it breaks the history. It is a new beginning in the new window. That is why it is the experience of most users that Alt+LeftArrow and Alt+RightArrow, i.e. back and forward in the history of browsers like Internet Explorer, Mozilla and Opera, almost never works as expected.
Forced new windows have made a strong contribution to the fact that more intelligent ways of navigating the Internet is today unknown to most users. It’s a pity. The history is smart because it makes fast navigation between cached web pages possible.
The history is also lost in most browsers, when the user opens a new window by choice, using the right mouse button or by pressing the Shift key in Internet Explorer. Other browsers have similar methods. But the history is transferred to the new window, if the user presses Ctrl+N after the page has fist loaded in the same windows.
A forced new window has seldom the dimensions or the position on the screen the user like. The new window is typically too small. Most web pages require a maximized or an almost maximized window to work properly. Small windows tilt the layout and make horizontal scrolling necessary.
Forced new window requires that the user consciously or unconsciously waste her time figuring out how the new window relates to the old and what it means for the ongoing navigation. The user has to waste her time resizing, positioning, maximizing and closing the new window.
All this could have been avoided if the user could have just continued in the same window. The user should only spend her time dealing with new windows, when the user thinks it’s a good idea in a given situation and actively decides to open one.
In extreme cases new windows are used for advertisement often opening automatically and in the background. Such advertisement is first thrown into the face of the user, when she closes all the other windows forced upon her blocking up the computer making further navigation impossible.
Some web pages even use "pop-up"-windows as a way to hi-jack the user’s attention. The windows open again and again, when you try to close them down. The more you click to close, the more windows open up. Pop-up windows used for advertisement and hi-jacking, practices similar to spam and computer virus, make many people mad. It’s so destructive both to experienced and inexperienced users that such practices have called many people to active opposition.
Some users have even downloaded and installed software made to prevent pop-up windows the user has not asked for, and such software are now integrated in almost all browsers. Software preventing pop-up windows can be setup to work in several ways. New windows can be blocked completely but hopefully only very few users will choose this option. The software can also be set up to protect the user against automatic pop-up windows, but accepting new windows when clicking a link.
A great web site with it’s own look and feel and a good information architecture don't need for external links to open in new windows in order to warn the user that she is now leaving one web site for another one. If you cannot keep external and internal links in separate groups, the external links could be marked with tool tips and with some sort of marking beside the link text. We have no problems zapping on television in one window.
Fancy use of new windows for layout purposes, striped for menu line, address line, etc., is violating all rules of thumb for sound and solid web design. Some users with disabilities can not use such instances of the browser stripped for everything but the frame.
Such "client-side" web design is gambling not knowing exactly how different browsers render the pages or if they support JavaScript at all. It’s Bad Practices that should always be avoided, if it is possible to use a more reliable technology "server-side". Use of new windows for design always makes the pages less flexible and less useful for some users.
Instead of new windows for internal design, you should, when possible, open and close a new area in the same window. You should integrate the window in the page, reducing it to an area that opens and closes. Today we have many options using JavaScript and W3C DOM, if it has to be done "client-side".
Today it is common but bad practice to force new windows on users. Even if we are opposed to new windows, there are situations where we cannot change the ways a website has been working for a long time. It can also be difficult to convince other designers that new windows are bad. If for some reason it is necessary to force new windows on users, we should try to do it in the least harmful way.
New windows made with JavaScript have only one advantage: you can force windows on users with dimensions and positioning of your choosing. But new windows made with JavaScript are problematic. JavaScripts look like they are working. But very often they don’t in some situations causing dramatic error messages on the user's screen.
Let us take a very common JavaScript as example. It is very popular to make a new window by replacing the ordinary URL in the HREF attribute with a JavaScript function like this one:
<a href="Javascript:MyFunction()">My link text</a>
"My function()" calls a JavaScript using the "window.open" method. If the user tries to open such a link in a new window, not knowing that a new window will open, either by clicking on the link with the right mouse button and selecting "new window", or by using the short-cut key Shift, the JavaScript returns terrible error messages in all leading browsers or the user’s screen turns black.
A second problem with the above JavaScript is that users with browsers not supporting JavaScript, par example a great text browser like Lynx, are not able to use the link. It can be acceptable to use JavaScript for less important functionality and not to give users with browsers not supporting JavaScript a substitute. But it is very bad practice to exclude user groups, even the most marginal, from core functionality of a web site. At least if the only reason is that you don’t know how to code correct JavaScript.
If JavaScript should be used as an exception to the rule to open a new window, it could be done as shown in the following example (the name of the window, position and dimensions are just an example):
<a href="http://www.smackthemouse.com/contents" onclick="(this.href, 'contents', 'left=10, top=10, height=400, width=800, menubar=1, location=1, toolbar=1, scrollbars=1, status=1, resizable=1'); return false;" target="_blank">Contents</a>
Notice that the above code contains both a normal link using href="http://www.smackthemouse.com/contents", the URL to the table of contents of SmackTheMouse, and a JavaScript using "this.href", pointing to that URL.
It means that the link works as a normal link opening a new window using the target="_blank" attribute. If the browser understands JavaScript, the JavaScript takes control overriding the link’s normal behavior. That is what the code "return false" is for. The JavaScript opens it’s own window as defined by the JavaScript.
It is important to carefully specify al the things that should be turned on in the new window, that is in the new instance of the user's browser. All users should be able to continue surfing. We don’t want to let any user down.
Even when code to open a new window with JavaScript is made the proper way, JavaScript has a drawback making it problematic for serious coders. Links opening new windows made with JavaScript does not send information about the referrer. That is: JavaScript used in Internet Explorer does not, but JavaScript used in browsers like Firefox and Opera does. IE also sends referrer information if target="_blank" is used for opening a new window.
A normal link sending a request to a web server asking to send a new page to the user's browser, identify itself by domain name (i.e. www.smackthemouse.com) and page name (i.e. /mypage.html). The referrer is the address to the web page containing a link requesting a new web page. The referrer is not included in the HTTP-header to the web server, if the link load the page in a new window using JavaScript in IE.
Information about the referrer is a prerequisite for advanced statistics and traffic analysis, that can be used to make the information architecture of a web site better. This could benefit the user. If some of a web site's pages open in new windows using JavaScript, it is not easy to include these pages in advanced statistics and traffic analysis.
The referrer is also important for external links. It can be very useful for the other web site to see from where a user is coming. What web sites link to my web site from what pages? If a link for what ever reason is wrong, causing error messages when the user hoped to arrive at my web site, I can notify the other web site about the bad link and even point to it’s exact location.
Originally new windows were not an option in HTML. They were made possible, when the browser Netscape around 1995 introduced FRAMES, a technique to load several documents into frames in one web page. The same techniques made it also possible to open new windows without using FRAMES. You just have to put the attribute TARGET into the anchor tag with the value "_blank".
New window made with target="_blank" has two advantages compared to new window made with JavaScript. Firstly the new window opens exactly as the last not maximized window in the user’s browser. This window will often be, as the user wants it. It has the size and the position the user used last time. But often this it not the case, when we think about it, because the user could have maximized the last window if it was not usable.
Using JavaScript all users get the same window, defined by position and size in the code. This window can be a far cry from what the user want, if the user surfs in a reduced window or with very high or low resolution of the screen. The other benefit of using target="_blank" is, as already mentioned, that this method send information about the referrer in the HTTP-header like an ordinary link opening in the same window.
Web sites made with FRAMES were for a short while regarded as smart and became very popular, supported by all the major browsers. W3C, the organization that develops many of the standards for the internet, was much against it’s will forced to accept FRAMES but at arms length.
FRAMES, fortunately no longer that popular because of many problems with usability and accessibility, are destructive to the fundamental principles of the net, using the document as it’s basic unit and with an ambition of being for all. W3C made up three DTDs (document type definition) for HTML 4, and later to XHTML: "Transitional", "Frames" and "Strict".
"Transitional" and "Frames" are the soft specifications, where strict separation of mark-up (HTML/XHTML) and presentation (CSS) is not required. Mark-up considered deprecated is still allowed. The strict DTD is the forward looking where mark-up and presentation is separated, and where deprecated mark-up is not allowed.
In the strict DTD’s of HTML and XHTML FRAMES are not allowed. The mark-up making FRAMES possible don’t exist in these DTDs. The same goes for the TARGET attribute, considered a part of the FRAMES paradigm. When W3C made XHTML 1.1, wanting to make it more suitable for working as a true XML-application, the DTDs for "Transitional" and "Frames" were dropped. XHTML 1.1 only exist in it’s strict version, making the use of the word "strict" no longer relevant.
If you want to use the strict DTDs for HTML 4 or for XHTML 1.0, or the DTD for XHTML 1.1, you cannot use the attribute "target" for opening new windows. The attribute TARGET does not exist in these DTDs.
It has never been possible to open new windows with CSS. It means, that you cannot open new windows with mark-up code alone, if you at the same time want this code to validate against the most demanding DTDs.
Considering how common new windows are, programmers have found ways to make their pages validate even if they use target=”_blank”. [1]
The idea is to use another attribute in the DTD, an attribute where author defined values are allowed. The most logical attribute to use instead of "target" is "rel", that is "relation". The REL attribute is not much used today, not many browsers support any of the values mentioned in the DTD. These values, e.g. "start", "contents", "previous" and "next" are just mentioned in the DTD as examples. You are allowed to define your own values.
If we are to behave well, we can make up some meaningful values expressing relations. It could be rel="external", meaning page at another website. For our own website we could make up values like rel="subpage" or rel="note". These values indicate that the new page is subordinate to the page requesting it.
All we now need is to use the anchor object of JavaScript and "W3C DOM" to substitute rel="external" with target="_blank" in all the relevant links, etc., after the page has arrived in the user’s browser.
This method of substitution is accepted by W3C's validator. The validator only compares the mark-up with the DTD. Since the document does not contain the "target" attribute the document validates. The "rel" attribute is found in the DTD.
If we need a new window, and at the same time want our document to validate, the substitution method is great. Validation of mark-up never takes JavaScript into account. Validation don’t care if you open new windows with JavaScript’s method window.open. Validation don’t care how mark-up and CSS is manipulated with JavaScript after the document has loaded in the user’s browser.
Here is an example of a JavaScript using the substitution method, replacing rel="external" with target="_blank":
function linksExternal()
{
if (document.getElementsByTagName)
{
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++)
{
var anchor = anchors[i];
if (anchor.getAttribute("rel") == "external")
{
anchor.target = "_blank";
}
}
}
}
Notice that the above JavaScript only works in modern browsers supporting the W3C DOM object getElementsByTagName. If the object is not supported, or if the browser does not support JavaScript, no use is made of rel="external", and the links open in the same window.
Forcing new windows on users has gone out of hand, harming most users more than it benefits a few. Let us try to reverse this mess. It does not mean that we should fight new windows whenever we see them. There could even be situations were they do some good.
All the external links at Smackthemouse.com open in the same window as the website's own pages. It is actually nice not having to resize and position windows, maximize and close them. It is lovely to be able to navigate using the fast cached history in the browser. I am not just talking about the back button, Backspace and Alt+LeftArrow. I am talking about Ctrl+H.
New-Window Links in a Standards-Compliant World, Kevin Yank, 2003.
Copyright © Jesper Tverskov, 2003
Last updated 2006-08-30
[+] Appendix
Article: Don't force new windows on users
Author: Jesper Tverskov
Published: 2003-08-31
When the article was first published, I stated that JavaScript does not send information about the referrer. A reader has reminded me that this is not exactly how it is. Nothing is wrong with JavaScript, the problem is Internet Explorer.
In other browsers like Opera and Firefox, referrer information is send with the request when JavaScript is used. But IE does not sendt referrer information when JavaScript is used. Not even IE7 Beta. I have tested it.
I have changed the wording of the article accordingly.