Article

Home » Design and Layout » Design Practice » Practical Web Design - Pop-Ups: Malign or Maligned?

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

Page: 1 2

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!