MOTIVATION

Many designers (particularly Jakob Nielsen) say that "nothing is more evil than pop-up windows" [Niel99] because the popups are either implemented poorly, or are not needed at all.

Nevertheless, I need popup windows for all external links (and some internal links) so that the user could follow the original stream of content by just closing the external popup window. I also need to style the popup windows, depending on their classes of content. Most of thee internal content progresses within the main window.

DESIGN CONSTRAINTS

The design constraints for invoking popup windows include:

• the links must be accessible by any browser;
• the links must be search-engine friendly; and
• the links must be non-invasive.

HTML SOLUTION

A common way of invoking a popup window uses the standard HTML elements:

<a href="http://validator.w3.org/" target="_blank">W3C Validator</a>

This statement opens a new independent window, with all the attributes of the main window, however with no styling possible. The main advantage of this method is that the window opens even if JavaScript is disabled in the bowser. The two main problems are:

• Since the window is not named, it spawns multiple windows; and
• In the future, the tag "target" will be removed from HTML, and it is already not allowed in XHTML.

JavaScript SOLUTION

The second method to open a popup window uses inline JavaScript:

<a href="Javascript:window.open('http://validator.w3.org'); void(0)">W3C Validator</a>

This solution has three major problems:

• The solution does not work if JavaScript is disabled on the browser;
• It also spawns multiple windows because the window is not named; and
• Search engines cannot follow links to popup windows (as scripted elements are ignored).

HYBRID SOLUTION

<a href="http://validator.w3.org" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;">W3C Validator</a>

This solution opens the window even if JavaScript is disabled in the browser. The onclick/onkeypress redundancy is required by the WAI guidelines, but it makes tabbing in some browsers impossible.

The problems with this method include:

• The onclick/onkeypress redundancy is required by the WAI guidelines, but it makes tabbing in some browsers impossible.;
• Once again, it spawns multiple windows because the window is not named; and
• Many users have popup killers that close the newly opened window.

POPUPS THAT ARE STANDARDS COMPLIANT

<a class="ext" href="http://validator.w3.org/">W3C Validator</a>

This new approach to "doing windows" is to use the standard HTML anchoring, and add the desired behaviour and possibly styling through an attribute such as class, rel, or target, each treated as a marker. This method eliminates the need for the troublesome onclick/onkeypress inline event handlers.

For the full functionality to be in effect, JavaScript must be enabled in the browser. However, if it is not enabled, the popup window is invoked anyway.

The javascript used in our implementation is yabba.js from ¥åßßå (of the vintage "Yabba Dabba Do," and not from the other meanings of yabba). It has been used by Scott Kimler [Kiml07]. It searches for all the occurrences of the anchors with class attribute of "ext". The styling can be placed either in the class or in the JavaScript itself. I have placed the styling inside the JS.

LOCATION OF THE yabba.js

The yabba.js script must be placed just before the tag. This assures that the other date.js JavaScript used by the site is executed on-page-load first.

OTHER APPROACHES

Another important technique is described by Thierry Koblentz [Kobl07]. A similar technique is also described by Ian LLoyd [Lloy07].