Don't open new windows (revised tutorial)

[Webnauts]

Actually you should not force links to open in a new window or popups (such as with the "target" attribute or with JavaScript).

As you might know, JavaScript is not supported by all browsers and some users disable it. When JavaScript is used, it should not be relied upon.
In such cases you will disable your visitor to access your content.

You should avoid as far as possible implementing JavaScript, to avoid running risks on complications on the end users machines, or while goverment and other employees are required to disable this feature, for security or other reasons. Also there is a number of users who are very concerned about security issues and disable this feature too.

The issue here is not only concerning users disabling JavaScript in their browsers. How many do so? 8%?

What about cell phone users? How about sight impaired users? For the ones who when changing the current window or popping up new windows can be very disoriented, while they cannot see that this has happened. And how much percent are they?

The usability Jakob Nielsen say's about this:

JavaScript in Links.

Links are the Web's basic building blocks, and users' ability to understand them and to use various browser features correctly is key to enhancing their online skills.

Links that don't behave as expected undermine users' understanding of their own system. A link should be a simple hypertext reference that replaces the current page with new content. Users hate unwarranted pop-up windows. When they want the destination to appear in a new page, they can use their browser's "open in new window" command -- assuming, of course, that the link is not a piece of code that interferes with the browser’s standard behavior.

Users deserve to control their own destiny. Computers that behave consistently empower people by letting them use their own tools and wield them accurately.

Source: http://www.useit.com/alertbox/20021223.html


Another fact is, that if you markup with XHTML Strict, the "target=_blank" is not supported!

If you absolutely must open a link in a new window, explicitly warn the user with a clear indication that the page will open in a different window. Provide a title attribute on the anchor tag with a description indicating that the link opens a new window; for example:

<a href="http://www.eypd2003.org" target="_blank" title="Link opens in new window.">European Year of People with Disabilities 2003 (new window)</a>

If you do so, keep in mind that targeting a link to open in a new window violates the W3C/WAI Web Content Accessibility Guidelines [1], and (if you're in the United States or other country with comparable anti-discrimination legislation) is quite possibly illegal under federal civil rights law.

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.

- Opening a link in a new window also breaks the back' button on the browser, preventing back-tracking in navigation;

- It also bypasses the tabbed navigation in Galeon and Mozilla, irritating users of that feature;

- If your user wants to open the link in a new window, he or she can do so quite easily with most browsers; there is no need to force the issue;

- It's about leaving the user the freedom to navigate in the way that works best for him or her;

- It's not unusual for a designer never to have thought about such issues; that's why we have the WCAG to point out to us things we might otherwise overlook. Or?


After all do you want to build an accessible pop-up window? Then add the code below within the head tags of your HTML document. (Script source: http://www.accessify.com)

<script type="text/javascript"> 
 var newWindow = null; 
  
 function closeWin(){ 
 if (newWindow != null){ 
 if(!newWindow.closed) 
 newWindow.close(); 
 } 
 } 
  
 function popUpWin(url, type, strWidth, strHeight){ 
  
 closeWin(); 
  
 if (type == "fullScreen"){ 
  
 strWidth = screen.availWidth - 10; 
 strHeight = screen.availHeight - 160; 
 } 
  
 var tools=""; 
 if (type == "standard" || type == "fullScreen") tools = "resizable,toolbar=yes,location=yes,scrollbars=yes,menubar=yes,width="+strWidth+",height="+strHeight+",top=0,left=0"; 
if (type == "console") tools = "resizable,toolbar=no,location=no,scrollbars=no,width="+strWidth+",height="+strHeight+",left=0,top=0"; 
 newWindow = window.open(url, 'newWin', tools); 
 newWindow.focus(); 
 } 
 </script>

Then add your link in the body of your document as below:

<a href="http://www.w3.org/WAI/" onclick="popUpWin(this.href,'standard',640,480);return false;" onkeypress="popUpWin(this.href,'standard',640,480);return false;" title="Link open's in a new window">Web Accessibility Initiative (WAI)</a>

Example see here: http://www.webnauts.net/popup.html - Test it disabling JavaScript to see how it works!


Further reading:

Not opening new windows: http://diveintoaccessibility.org/day...w_windows.html
Use interim solutions: http://www.w3.org/TR/WCAG10/#gl-interim-accessibility <http://www.w3.org/TR/WCAG10/
Opening a link in a new window: http://lists.w3.org/Archives/Public/...2Apr/0100.html

---
Notice: This article is written by John S. Britsios, founder and owner of the Webnauts Net and may be reproduced in a website, e-zine, CD-ROM, book, magazine, etc. so long as his name is included in full, including a link back to this website.

[Fruit & Veg]

http://www.sitepoint.com/article/sta...ompliant-world - there's also this method.

[AutisticCuckoo]

Originally Posted by Webnauts

Another fact is, that if you markup with XHTML Strict, the "target=_blank" is not supported!

That also applies for HTML 4.0 Strict and HTML 4.01 Strict.

Actually, it's still supported by browsers. It's just not valid.

[Phil_Friel]

Originally Posted by AutisticCuckoo

That also applies for HTML 4.0 Strict and HTML 4.01 Strict.

Actually, it's still supported by browsers. It's just not valid.

Tommy,

For a relative newbie such as myself, what would you recommend using (under a strict doctype) instead of "target=_blank"?

I started out on html back when learning tables for designing was the accepted norm, as was using "target=_blank" and many other now deprecated habits. I learned just enough to be dangerous before I drifted away for a number of years, and, of course, learned all the worst habits. Recently returned to the fold, I find accepted practices totally different, and the toughest thing I'm finding is to unlearn old bad habits, especially in cases where they haven't been replaced by an equivalent or better practice.

As you say, part of the problem is that browsers still support deprecated habits, even if they are no longer valid, which puts a lot of temptation in our way to continue in our bad old habits, doesn't it? I'd really like to clear out all my old html bad habits altogether, and replace them with shiny new, valid css and html instead. I'm not remotely interested in learning javascript - as a non-pro/hobbyist designer, learning a non-SEO-friendly client-side scripting language which can be disabled by any user sounds very dodgy and doesn't interest me at all. If I feel the need to eventually go beyond html and css, I'll jump to a server-side language such as PHP. But learning css and strict html inside out is my primary target, so the old bad habits have to go first.

Maybe it would be nice if some of the more experienced members could start a sticky thread in the Just Starting Out section - a list of "good practice" recommendations, such as "Don't use this, it's deprecated - use this instead", keeping it to html and css, and (of course) staying away from javascript hacks.

Phil

[felgall]

Originally Posted by Phil_Friel

For a relative newbie such as myself, what would you recommend using (under a strict doctype) instead of "target=_blank"?

Phil

You let your visitors decide for themselves which pages they want to open where. Left clicking the link opens whichever way they have their browser defined to open links by default. They can right click and choose same window, new tab, or new window if they want something different from the default.

I set up my browser to open pages from the same site in the same window and from new sites in a new tab as the default because that is what I usually want to happen (any target attributes get ignored by the browser the way I have it set).

[AutisticCuckoo]

Originally Posted by Phil_Friel

For a relative newbie such as myself, what would you recommend using (under a strict doctype) instead of "target=_blank"?

As Stephen said, the best thing is usually to let the user have full control.

Having said that, there are (rare) cases where a pop-up is justified or even desirable. In those instances, I'd recommend unobtrusive JavaScript since opening a new window is a behaviour.

I'd mark up the pop-up link with a class:

<a href="..." class="popup">Pop-up</a>

And then have an external JavaScript that, on the document load event, traverses the DOM tree looking for links with the popup class. For each such link, it would add an event listener for the click event, which would attempt to open the link in a new window.

For users with modern browsers and JavaScript enabled, this will open the link in a new window. For others, the link will behave just like a normal link, and they can choose to open it in a separate window or tab if they like.

If the link must, for some reason, open in a pop-up, then I'd create the link, too, with JavaScript. That way, non-JS users wouldn't have to be annoyed by a non-functioning link.