Practical Web Design - Pop-Ups: Malign or Maligned?

You know 'em, and you probably hate 'em.

Pop-ups are those annoying little creatures that sneak in while we're innocently surfing. They either leap up in front of us, crying, "Look at me! Look at me!" while shoving advertisements for anything and everything in our face, or they lurk beneath our browser windows, waiting for us to close out our browser so they can rap on our virtual knuckles and get our attention.

They suck up precious bandwidth and system resources, they madden us to distraction, they force us to install pop-up killers to keep them at bay. Earthlink and America Online, among other ISPs, now offer pop-up blocking software to their customers. Some commercial sites, including SitePoint and iVillage, refuse to host pop-ups (though iVillage seems to have gone back on their promise). Some surfers keep scripting disabled for one reason or another; this renders pop-ups moot. The browser Mozilla provides an option to keep pop-ups from appearing. And the major freeware and shareware sites list pop-up killer programs as perennial favorites among their clients.

Indeed, the case against pop-up windows has been argued into redundancy (imagine the poor pop-up designer being chased across the moors by packs of slavering dogs, with a band of angry Web surfers brandishing torches and pitchforks not far behind).

But are pop-ups all bad? Can't the burgeoning Web designer do anything with pop-ups, besides vowing to avoid them?

The answer is a qualified "yes". Okay, an extremely qualified "yes". Of course we have to remember that pop-ups draw a quick and strong negative reaction initially, and therefore, they should be used sparingly, and always with a clear purpose. But the pop-up does have some uses, and is a handy addition to any designer's arsenal of capabilities. Let's see why.

The Basics of Pop-Ups

When you strip all the Web surfer's emotional baggage away from the idea of the pop-up window, it's a pretty simple device. A popup is "a window that suddenly appears (pops up) when you select an option with a mouse, or press a special function key," according to Webopedia.

Of course, when we're browsing, the pop-up ad doesn't follow this rule, as it's all too often coded to appear without any input from the user -- we get it without asking for it. Most pop-up windows are dynamically generated "subsidiary" Web pages that open dynamically (i.e. without any user input) and display either above or beneath the visited page.

This describes the average pop-up ad pretty well. But it isn't the only way that pop-ups can be used.

Here's the basic code for a simple, no-frills pop-up window that will appear automatically when the parent page is loaded, cribbed from Joe Burns' HTML Goodies site:

<SCRIPT LANGUAGE="javascript">
<!--
window.open ('page.html')
-->
</SCRIPT>

You have to create the page.html page, of course, but nothing could be easier than whipping out a little pop-up page and inserting that code snippet into your main page's code. However, most pop-ups don't have scrollbars, toolbars, and the like, so how can you build your pop-up windows without those features? After all, the idea is to make them simple -- read the info in the pop-up and move on. Joe shows us how:

<SCRIPT LANGUAGE="javascript">
<!--
window.open ('page.html', 'newwindow', config='height=100,
width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no,
location=no, directories=no, status=no')
-->
</SCRIPT>

Now, the pop-up window code is configured with a number of attributes that modify and control the window's appearance. The window.open command opens a new window, as in the last code snippet. newwindow is the name of the window, and is needed for JavaScript to behave properly. If you know JavaScript, then you know why. If you don't, then it's not worth worrying about, just add the command and move on.

The config command above configures the following: