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:

the height as 100,

the width as 400, and

all the other usual attributes of a browser window, including the toolbar, the menubar, the scrollars, the ability to resize, the location or address bar, the directories or bookmarks bar, and the status bar, not to appear.

You can change the attributes as you wish — change the height and width, allow scrollbars, toolbars, or whatever — simply by changing the attribute numbers, or a no to a yes as desired. As a rule of thumb, the pop-up window shouldn’t be anything more than an extra window that is viewed once and then closed, so the toolbars, menubars, and so forth usually aren’t needed.

If you really want to be stripped down, you can create a window that lacks even a title bar in IE 5 and beyond. But as that would take away the user’s ability to close the window by clicking the X, I recommend avoiding this option, (unless you want to frustrate your visitors, of course).

Joe gives us plenty of ways to expand this basic script, but since they aren’t necessary for functionality, I’ll let you explore them on your own. For instance, if you want to create pop-unders, see the link in the Bibliography to the HTML Goodies site that explains the code. I personally see no redeeming qualities in the pop-under. Use it, or any other pop-under coding, at your own risk, and if you alienate your visitors, don’t blame me, or SitePoint!

You can also visit About’s PopUp Window Maker to create your own code without having to get your hands dirty, or use a program that creates them for you. And there are plenty of other, more complicated scripts out there that do the job with more bells and whistles. I’ve listed a few of them below, and there are many more. It’s your call.

A Variety of Uses

One interesting use of the pop-up is the creation of a “slide show” that displays a series of graphics or blocks of text. Think PowerPoint, sort of, for a Web page. Want to make a vacation slide show? “Here’s where Aunt Gracie got soaked by Old Faithful, and this next one is when Pop got chased by bears.” Any sort of presentation, commercial or not, can be handled by using the slide show technique, as can a series of testimonials or a short course of instructions. Go to the appropriate page at Katsuey’s Design Works to find the free code, and a tutorial on how to use it.

The JavaScript Source gives us a wonderfully controllable little pop-up window that can appear either when clicked, or when moused over. While you could, if you wanted to, put an ad for Viagra or a Webcam in the window, you’d probably do better to use it for sidebar information of one sort or another.

Another useful function for pop-up windows is to provide additional information about a word, phrase, or graphic, as detailed in Chris Churchill’s December 2002 article, “Create Pop-Up Notes with DHTML.” Chris tells us how to create slick little “post-it notes” that pop up when clicked to define a term or acronym, provide a footnote or sidebar, or whatever else strikes your fancy. The caveat here is that the designer must employ (and have some understanding of) both JavaScript and CSS to use this particular technique. However, it’s a tremendously useful and underutilized effect.

Many, many commercial Websites use pop-up windows of one sort or another. Most use them for advertisements (“See beautiful Tasman Island!” “Enhance your Web design skills 300% in one easy treatment!”). Others use them to hit their visitors with time-sensitive announcements. And, believe it or not, pop-up advertisements actually work. According to a February 2003 study, pop-ups and pop-unders garner as much as a 6.5% click-through rate — impressive, considering how much people despise the things. Orbitz is even marketing “pop-throughs” which don’t require a click to transport the visitor to the desired site. I can’t imagine a use for these that doesn’t involve advertising and won’t irritate the jeepers out of a Web user, though.

However, commercial uses for pop-ups don’t have to be restricted to unwanted advertisements. For instance, a site that sells, say, rocking chairs might display pictures of each rocker the site markets, where each picture can be clicked to add that item to the buyer’s shopping cart. Items that are temporarily sold out or unavailable might have a pop-up window appear when clicked, to alert the user that this particular rocking chair isn’t available at this time. The user can simply close the window and continue shopping. The code is simple and easy to slide in and out of a page, so the Webmaster can add and remove pop-ups as the availability of items changes in almost no time.

Bravenet, the Website tools provider, displays a pop-up window when you sign up for their services. When you register and choose a user name, you can click on a “Name Check” box before proceeding. A pop-up appears, to inform you whether or not your chosen user name is available. This saves you the irritation of filling out the user form, submitting it, and having it rejected because your chosen user name is already taken.

These are only a couple of examples of commercially implemented pop-ups that are actually useful. I’d love to hear about more.

A Case Study: Robby’s Free Backgrounds

A few months back, I was fortunate enough to be contacted by Robby, a graphic designer in the southern United States. He owns and operates a site that provides free and low-cost graphics for anyone who stops by — Robby’s Free Backgrounds. Aside from the fact that he makes lovely graphics, one thing that immediately stuck me was his use of pop-up windows to display his creations. I’ve collected a lot of free graphics over time, and I can’t tell you how aggravating the process can be. But Robby has used the pop-up technique to make it simple and painless.

Each graphic is displayed in a thumbnail view; to see the graphic in its proper size, just click on the graphic and it displays in a pop-up window. If you like it, save it. If you don’t, just close the window and go on to the next graphic that attracts your attention. Nothing could be easier.

Like me, Robby isn’t a code warrior; he uses a free pop-up generator called Ace PopUp to create his code. “I don’t have to tell you that after you put together a Website …you’re constantly going in and changing things around,” he wrote me. “I kept changing my pop up windows because I wanted to make sure they got spidered by the search engines.”

Later in his note, he went on to give me more details of the process: “On my picture backgrounds (sunsets and scenic), I just target them in a new window, target="new" and then if I want a balloon tag which gives a description of the link, I just use title="description of link". This is more basic but very effective.

From my software links pages, I use another script that will center and size each page. Part of the script goes in the head section and the rest goes in the body where the links are located. To tell you the truth, I don’t think I got that one exactly right but it works the way I want, as I like a window you can size, and it will locate on the screen where you want it to, instead of running wild. The thing I like about this pop up script is that you know that the window is always going to be right in the center of the page.”

I’ve field-tested Robby’s code in a classroom of 13-year olds; they had no trouble using Robby’s pop-ups to quickly and easily choose the Web backgrounds they preferred. If they can use it that easily, your site visitors can too.

Conclusion

Steel can be used to make plowshares or swords. By the same token, pop-up windows can be used to make your visitors’ experience more rich and rewarding, or to aggravate and annoy them.

If you can break away from the idea that pop-up windows are nothing but venues for advertisements, then you can find a number of uses for them that will enhance and enrich your Website. A few are listed above. If you think of others, let me know!