Frames in Action

The World Wide Web has been around since 1991, but graphic browsers for the Web have only been around since 1993--all in all, a fairly short amount of time. It's hard to believe that it has not been around longer considering the Web's important role today in business, education, and entertainment, not to mention its growing significance for individual users. Frames, although used widely today, were not introduced until late 1995. Like all of the previous innovations in the world of the Web--including color, graphics, and sound--the technology of frames has raised quite an enthusiastic debate. Are they useful or are they not? Guess which side I'm on.

Pros and Cons

Frames are not necessary for every Web page. Indeed, some pages are simple enough that frames would only be disorienting. On top of that, some browsers are not capable of displaying frame documents, and you run the risk of alienating potential users if you don't design a non-frames version of your Web page. This either makes additional work for you, or creates the possibility of nasty e-mails from would-be visitors to your site who cannot or don't like to use frames.

That said, frame technology is one of the most useful innovation yet devised for the Web.

The Advantages

Yes, graphics are great. So are backgrounds, tables, forms, and all that. But consider that the promise of the World Wide Web is that it will not just be a new way to present content, but be an evolutionary jump in the way information is processed and evaluated. Frame technology is the next logical step in Web evolution. It allows information from varied sources to be layered together in a single window.

Additionally, at a practical level, frame technology encourages all of the following:

Being a relatively new addition to the Web, people are still learning how, where, and why to use frames. Mistakes and poor choices are bound to happen at this stage. The nay-sayers point to poor implementations of frames and condemn them, declaring "Look at that site; it's obvious that frames don't work!" A few years from now, however, I predict people will be looking back and asking how the Web ever worked without frames.

The Drawbacks

Although still a fairly recent development in a very young medium, the technology of Frames has touched off heated and often bitter debates among its opponents and proponents. Let's see what the argument is about.

Opponents of frames technology point to its shortcomings:

Though not strictly a drawback, it is true that many of the things you can do with frames can be done with the table HTML tags. One example of this is the sidebar. A background graphic can be used to create a narrow strip of color down one side of the screen, effectivly splitting the screen in two (kind of like frames). A table can then be used to put content into the side bar and content into the main area of the screen. Compare Figure 9-1a, which shows a sidebar created with HTML table tags, and Figure 9-1b showing a sidebar created with frames. Although they look similar (and appear identical if we set the FRAMEBORDER to 0 as shown in Figure 9-1c), scrolling down the page will cause the nonframes sidebar to move up and we lose our navigation buttons. The framed version, on the other hand, allows us to move the main content of the page up and down, while the navigation buttons stay stationary.

IMHO: Much of the resistance to the use of frames in Web pages comes from the fact that frames require a shift away from the static and linear acquisition of knowledge, with which most people (accustomed to reading printed materials) are comfortable. Frame technology allows a more dynamic and multisequential model.

When Not to Use Frames

There is a saying among graphic artists: "Better no color than poorly used color." That is, people would rather see a well-conceived black-and-white design than an ugly colored one. Even though color is usually more visually interesting, it can also be highly distracting and may actually hinder the design if used ineptly. Just so with frames. Certainly a framed document can display information more dynamically than a single Web page. But if the framed document isn't done well, it may confuse rather than help the user.

Frames cannot do everything, and it is often the case that people use frames simply because they can. For instance, frames are a poor substitute for creating newspaper-style columns. A table, or the newly introduced column command, would be better suited for this objective. Don't force the use of frames for functions better performed with other techniques.

So what are frames good for?

A Brief Interlude: Understanding the Role of Frames (and Silverware)

You're in the kitchen doing the dishes. You've just finished putting away the salad bowls, the plates, and all of those Pilsner glasses you got for your birthday. You look back at the dishwasher and there it is: a big pile of silverware.

What do you do with it?

Well, if you're single, you might grab the whole pile and dump it unceremoniously into a drawer. But then the next time you want to find a spoon in a hurry, you'll have to sort through the tangle of silverware. Or, worse yet, say you're cooking a romantic dinner for two and you ask that special someone to get some silverware out of the drawer! The better solution is to use that silverware tray you so cleverly bought when you moved into your current domicile, the one with a different compartment for each type of silverware.

You could have just set aside a different drawer for each type of utensil, but then you'd have to open each drawer to figure out if you have a complete set of silverware. And even if that didn't bug you, who can ever remember what's in which drawer? You'd end up opening every drawer before you found that desert fork. (OK, maybe that's a bit of a stretch, but you see where I'm going.)The one utensil you need will probably be in the last drawer you opened. Besides, who even has that many drawers?

Instead, with your handy-dandy tray, you have a different section for each category of utensil. One for the little spoons, one for the big spoons, and others for the desert forks, the regular forks, and the knives. There is even a space for miscellaneous stuff like the butter knife and gravy ladle. All nice and neat and easy to get at.

If you only had one type of utensil, say forks, you wouldn't need a tray; you could just heap 'em all into the drawer and grab one when you needed it. And if you only had one source of information on the Web, you'd only need one window. It's much more likely that you'll want to get more than one source onto the page, together with other information.

That is where frames enter the equation.

When to Use Frames

What is the point of reading on the Web? Sure, hyperlinks are cool and there is a lot of stuff out there to read, but is there any actual advantage to reading articles on the screen? Why not just print it out? Paper is transportable, more randomly accessible, and much easier on the eyes.

Yes, there is an advantage to reading on the screen--nowadays, anyway. The Talmudic tradition aside (as mentioned in chapter 2), paper cannot dynamically display information from a myriad of sources, from around the world simultaneously. With frames, however, the Web can.

Consider the Web without frames. Hypertext, despite its kinetic-sounding name, is still basically a sequential medium. You go from page to page, one page at a time.

It is possible to display more than a page at a time if the user wishes to take the trouble of opening a new Web browser window with the additional information. However, the author of a document must be content for the user to go through the document linearly. This path through a Web site might branch as the user jumps from document to document, but only one source of information is available at a given time.

The promise of hypertext, however, is the ability to put information together from a variety of sources, based on the needs of both the author and the user. And currently, the foremost way to dynamically display multiple Web sources in one viewing area is with frames. The displayed information can take many forms, and each frame can provide a myriad of different uses. However, as mentioned earlier, frames can complicate and obscure this information if the structure and operation of each frame is not given proper thought.

There are a few questions you need to ask yourself to determine whether your site needs frames:

Do you need to be able to display information asynchronously? That is, do you have information from a variety of sources that you want to be seen in concert but not necessarily in any particular order? For instance, although you might read this book cover to cover, it's more likely that you will access parts of the book without necessarily looking at every part that came before.

Do you need to display information from more than one source? This is especially important to bear in mind if you will be displaying information from another Web site over which you don't have direct control. Or you may want to keep the user at your Web site while he or she is exploring links around the Web.

Will it help the organization, usability, and/or design of your site to keep elements such as a header, table of contents, and navigation buttons in fixed locations?

Can you save download time by keeping permanent features in a fixed location? Remember that, although graphics are cached in the client's hard drive for subsequent use, it still takes some time to load from the cache.

Will you be constantly updating certain parts of the page? If so, placing those evolving parts isolated in a single file can save you time (and possible headaches). This arrangement will let you change just one file and avoid upsetting the rest of the code.

Do you expect your Web audience to be receptive to using frames? As mentioned earlier, some users simply do not like frames and the way they work. Hopefully, this barrier will disappear as frames become more prevalent and people become more comfortable with their use.

Do you have a really cool layout idea that can only be done with frames?

If you answered yes to any of these questions or if the reasoning described here seems logical to you, then frames is probably the way to go.

A Place for Every Frame, and Every Frame in Its Place

Whenever you use frames in a document, keep these two important guidelines in mind:

Always have a specific use for every frame you create.

Keep the use of each frame consistent.

Reflect back to our silverware metaphor (see the earlier sidebar). Your silverware tray has a compartment for each utensil type. Why? Because otherwise you might as well just dump everything into the drawer. The tray is there to help you organize. And what happens when you start putting the spoons in with the forks? You can't find anything, right? You spend the rest of your life searching for that one spoon and end up starving to death for lack of an eating utensil.

Well, starvation may be stretching the point a little, but it's true that you don't want your users to have to rummage around trying to find what they're looking for. However, if the intent of the frames in your web page is not clear or if you mix up their usage, the people using your Web site will probably get confused and discouraged, lose interest, and go elsewhere. (So you might starve after all if you're out of a job.)

Say, for instance, you create a framed document with two vertical frames (Figure 9-2). The left frame (Frame A) has a table of contents. When you click on a link there, the linked information gets displayed in the right frame (Frame B). The user comes to expect this to happen: Click on something in Frame A, and the corresponding link appears in Frame B.

What happens, though, if you have links in Frame B? The new information will replace whatever is currently in Frame B. But let's say you want to keep the information in Frame B where it is and display the new information that it links to as well. You could target the new information to appear in Frame A, but then the table of contents disappears. Your frames no longer have a consistent function, your user no longer has a table of contents to navigate with, and confusion results. What do you do?

One answer is to have the links in Frame B open up a new window, or you might create a third frame for links Frame B. The point is, once you've established the purpose for a particular frame, don't go changing that unless you've got a good reason.

TIP: Try "shrinking frames." The more frames you put in a window, the more crowded your window becomes. But some frames won't need to have information in them at all times, or they may not need to be completely visible. Instead of defining these frames at the full size they may eventually have, you can set them to be very narrow (20 to-30 pixels) initially, and place a label in them letting the user know what they will be used for (illustrations, commentary, and the like) Like the right frame in Figure 9.3a. Then the user can expand the frame size as needed to fit their individual screen and at the appropriate time (Figure 9.3b and c).

Planning Your Site

Planning a Web document that uses frames takes a little more thought than designing a single Web window. The good news is that once you have the document planned out, new pages are easier to add and can be carried over to subsequent pages with little or no redesign. How? No repetitive code. If you want to add a new page, you don't also have to include all of the navigation, titles, and other stuff. It's already in the other frames. I just takes a little planning. This investment of time in the initial preparation of your frames will pay off big time. By considering exactly how the frames will work together, you avoid confusion when the page is being accessed on the Web.

While planning your site, determining how many frames you need, and what they will contain, consider the following questions,

How much information do you want the user to be able to see on the page at a given time? Beware of showing too much information. Just as in printed material, a crowded page can overload the viewer.

Do you want your navigation buttons always visible. If so, what different kinds of navigation buttons do you have? For instance, you might need to have some buttons that provide navigation for the entire site, and some that navigate just within a particular area of the site. Obviously, these two sets of buttons don't have to be in the same frame.

Do you need to have certain auxiliary information always visible, such as a title or a copyright notice?

Will you want the user to be able to follow links outside of the content you are providing? If so, do you need to create an additional frame for that content, replace your content with the exterior content, or allow the user to leave your site altogether.

While planning out the frames you will need and what will go into them, you will also need to consider how your links will be targeted and how the frames will change. This is important to consider early on, because it will have substantial impact on your layout and structure.