Do you revere or revile frames? You wouldn’t think that the addition of a single tag to the HTML definition could cause so much controversy. And yet there’s little agreement over the usefulness of this now relatively well-established construct.
The implementation of frames in HTML had a rocky start, largely because the browsers of the day handled frames differently if at all. A movement arose in the the design community to abolish the use of frames in Web design altogether. As both the Web design community and Web browsers matured, frames became better understood by all parties, and it is now possible to design captivating, efficient pages built on frames. The Altoids Web site is a good example of the potential of frames.
A Brief History of Frames
The <frame> tag was first available with the release of Netscape 2. Suddenly, Web designers had a way to create persistent navigational elements to go along with changing content, and just as suddenly a two-class browsing society was created — the frames-enabled and the frameless.
While some designers rushed to frame their pages, others bemoaned the limitations that using frames created, chief among them the fact that the browser Back button no longer worked as users expected. Even today, when nearly all browsers support the <frame> tag and the Back button is smart enough to recognize framed content, many people still hate frames.
In his design manifesto, Designing Web Usability, Web usability guru Jakob Nielsen says, “My main recommendation with respect to frames is: Frames: just say no.” But he does go on in the next sentence to admit, “People who really know what they are doing can sometimes use frames to good effect.”
This is like warning designers not to use animated GIFs unless they really know what they are doing. Frames are a useful construct for dividing the information on a page into separate documents. This allows for content to change without the context changing. Indeed, many compelling sites use frames to separate the navigation and content.
Nice Altoids!
I’m sure you’re familiar with Altoids, “The Curiously Strong Mint.” Even if you haven’t tried the mints packaged in the pocket-sized tin, you’ve probably seen the humorous ad campaign for “The Original Celebrated Curiously Strong Peppermints.” Humor, packaging, and the product itself are the three elements that have given Altoids such great brand recognition.
The question is this: How do you add depth to these immediately recognizable elements to create a great Web site? Answer: Use the tin.
The Altoids Web site is funny, presents all its content within a tin-shaped frame, and even sells mints. Actually, the frame, although it at first looks like it might be an HTML table, is a complex arrangement of nested frames. Here’s how it works:
The mint green background of this site is an arrangement of four empty border frames around the top, bottom, left, and right of three content frames. Content is divided into top and bottom navigation frames with a frame for the virtual tin sandwiched in between.
The frame fun is concentrated on this middle tin frame. You can see that the face of the tin is divided into 12 squares, which represent 12 content links. Limiting a site to a specific number of hierarchical divisions seems like a big mistake. But through clever frame manipulation, the designers have expanded beyond this artificial limitation.
Several of the squares, each of which is a frame, contain documents with JavaScripts that change the content after a given amount of time. You can see this effect immediately by clicking the Flip the Lid link in the bottom navigation bar. The Nice Factoids frame in the upper left corner becomes the Peppermint Lounge frame, and so on. In fact, there are 18 content frames when all the changes are counted.
This system works, because important frames, such as Souvenir Shoppe (the e-commerce link) and Outside the Box (a gallery of Altoids humorous print ads), never change. Only the purely frivolous, brand-building links are swapped in and out.
You might have jumped to the conclusion that this centered frame is simply divided into 12 equal subframes. Not so. This is a deep nest of frames that provides remarkable flexibility for displaying content. The main tin frame is divided into two side-by-side frames. Each of these is then divided into three horizontal frames, which are each divided in half vertically.
The purpose of this is to allow content to fill one, two, three, four, six, or all twelve frames. So when you click on the Free Money link, instead of filling the single frame, the content fills two frames. Clicking the Surreal Sites link fills four frames with content. This kind of rearrangement works only because the frames for these varying display sizes are already defined.
They Appear to be Dividing!
You can see that the number of frame permutations available for different kinds of information is quite large, and Altoids has done its best to fill every corner of this tin with suitably silly content. While this may be a site that only the seriously mint-addicted would visit regularly, it does a wonderful job of perpetuating the Altoids mystique. What is this curiously strong stuff? You’ll have to flip the lid to find out.
From an architectural standpoint, the use of frames to build a multi-faceted virtual tin top is not only clever, but used with such inventiveness and consistency that this is a very strong little site. Would frames detractors excuse this site on the grounds that its designers “knew what they were doing?”
Granted, some designers have and do misuse frames. But to denigrate frames simply because the construct is often misused it to deny ourselves a valuable tool. It’s high time we all recognize that frames are a powerful construct for presenting certain kinds of content — specifically, content that requires a relationship to other elements of a page even as the content itself changes.
Read more by Clay Andres.
This article was last modified on January 8, 2023
This article was first published on October 18, 2000
Commenting is easier and faster when you're logged in!
