When (and how) to use frames
Frames, if understood and used correctly, are a valuable feature of HTML.
Last modified: 10/6/98
This page explains some good uses for frames, with examples. It also describes how not to use them.

Related material
Frames have been controversial since they were introduced. To decide when and how to use frames, you must understand the technical details of how they work, and the arguments that have been made against their use:
•   How frames work: Frames in HTML use the <FRAMESET>, <FRAME>, and <NOFRAMES> tags, and the TARGET attribute of the <A> tag.
•   How to implement frames: Tools and techniques for creating pages with frames.
•   Aren't frames bad?: Many complaints about frames do not apply to INTRAnets today.
•   What others say about frames: A sampling of online opinions.

Material on this page:
•   When to use frames: Page identification, navigation, tours, and more.
•   Design ideas on how to use frames: Make them bookmarkable, only one scrollbar, "You are here", how not to use them, exceptions.

Several samples are provided here, including the main example of common uses of frames, the same design using tables, an example of using named anchors, an example of multiple images, and an example of a container page for comments.
  
When to use frames

From a design viewpoint, there are at least two valid uses of frames:
•   Integrated into the page design of a single page, to provide separate areas for material such as navigation
•   As the mechanism for associating material from a specific author (such as comments) with other pages that normally stand on their own
  
When to use frames: Integrated into page design

Frames can be used to produce good page designs when they are an integral part of page layouts. Frames can be used to hold different regions of the page and give them definite areas. This is much like the way HTML tables are used to divide the screen into areas to hold navigation, main text, references, and more. The difference is that frames allow the designer to maintain some material on the screen while other material scrolls. With tables, everything scrolls together and material that should always be visible is frequently off the screen, either above or below or to the left or to the right.

Example of common uses of frames:
•   With frames: The example implemented using frames
•   Without frames: The same visual design, implemented using tables

What goes in a frame?

Material that might work better in a frame than scrolling with the main text include:

Page Identification or Context Information

Information that lets readers know their context, including title, summary, or a special image, works well in frames. Otherwise, scrolling the page hides that information. This is similar to a book where the book title, chapter title, and section title are repeated on headers or footers on every page, not just the first page. Book designers have learned that readers need to know where they are.

(These illustrations come mainly from samples on this site. Click on the image to go to the sample.)

Main Site Navigation

List of links to Home, HR, Site Map, etc.

Commonly used links, such as links to a home page and major sections, should stay accessible using a frame. We have received many requests to add more of this of navigation to the Good Documents site. Common links can include buttons such as the "mailto" link shown in the example (another frequent request from readers).

Document Navigation

You Are Here map example

Also useful is a complete, compact map of the entire document, such as is used in the "Use maps" technique map demonstration. Maps should be "You Are Here" maps (that indicate the page you are currently viewing) whenever possible. They should be clickable, so that clicking on the representation of a page will follow a link to the page.

Local Navigation

Sibling button-bar

Links to related pages, such as Next/Previous in a list, or sibling button-bars, work very well in frames. Again, "You Are Here" indication is a real plus.

Navigating Through a Long, Linear Scrolling Page

Frame anchors example

A common use for frames is to have one frame that contains a long page and another frame with a list of links to named anchors inside of the other frame. Clicking on a link causes the browser to scroll the long page to the appropriate place. This is done by using <A> tags with HREF attributes pointing to anchors with NAME attributes and with a TARGET attribute pointing to the frame containing the long page, as in this sample. This is one of the accepted uses of frames with links that do not use TARGET="_top".

Sidebars

Example of See Also sidebar

Sidebars hold material related to the main text. One type of sidebar material that works well in frames are lists of related links.

Summary and other related information often work better in the same frame as the scrolling text than in a separate frame. The reason for this is that the sidebars can get quite long and that can force the frame to require scrollbars (as sometimes happened on the old version of this web site with smaller computer screens, which could be annoying -- the summaries were moved to the top of the main page area in the redesign for that reason). As we point out in the design ideas section, it is often best if only the main text area needs a scrollbar. If the summary or comment is short, or if it is appropriate to have it display even while scrolling the main text area, not just when the page is first displayed, then it may be acceptable for it to be in a frame.

Images

Image-in-frame example (not linked)

Another type of content appropriate for non-scrolling frames are images that give a sense of place or identify the page or are the subject of the page. Examples are news articles, biographies, or product descriptions, and the photos that go with them. (We have no sample for this use.)

Multiple Illustrations Associated with Multiple Links on a Page

Multiple image sample

A variation on having an image as the content of a frame is using multiple images that go with references in the text. This style is dependent on the design of the page, but for certain images and text this can eliminate the jumping back and forth from thumbnails to full images. This style of document could be used for a wide variety of purposes, such as showing details of a procedure or other sequence, or in a catalog showing different styles of a product. It is especially useful when the text referring to the image is long so that any in-line image would scroll off.

You can examine a sample of this type of document.
  
When to use frames: Associating pages and additional material

Frames are well suited for associating material from a specific author (such as comments) with other pages that normally stand on their own. They let the author show an actual, live "picture" of material elsewhere on the Intranet or Internet together with comments or navigation. A term for this type of mixed page could be a "container page".

This use of frames is the HTML equivalent of the following in the paper world: Photocopying an article and attaching a note, or photocopying a series of different pages and stapling them together to make a new grouping.

Some specifics:

Commenting on other pages

Sample of commenting

Frames can be used to add your commentary to other pages and thread them into the link structure of your document. In the example here, we have a page on the right from the Internet talking about frames (Jakob Nielsen's article) and a few of our comments on the left. Even though the article is long, you can keep the comments in view as you scroll. Another example would be a trip report with framed pages that contain pages from the web sites of the companies visited along with comments.

Another, different, example is Tim Bray's annotated XML spec (http://www.xml.com/axml/testaxml.htm). The main body has links to "footnotes" that are targeted to another frame. See also the Independent Counsel's Report sample for another use of frames for footnotes.

Tours

Example of a tour stop

Tours are a special variant of commenting where you have linear paths through nonlinear (i.e., linked, web) documents or sites. For example, a human resources Intranet web site could have a tour of the pages of interest to new employees and another tour for employees with new dependents. Each "stop" on a tour would have explanatory material telling what is special about the page being shown, how it relates to other pages, where you can go from there, etc.

Tours are used on the Good Documents web site to explain the characteristics of sample documents in the Samples section. For example, there is a tour of "Status report with presentation" sample.

These "container pages" can all be viewed as individual pages. Each is a separate frameset and is bookmarkable.

Design  ideas on how to (and not to) use frames

Do:
•   Make Pages Bookmarkable: Pages that are constructed of frames should be made bookmarkable whenever possible, except in special situations such as those discussed below. This means using separate framesets and always using TARGET="_top" in links.
•   Few scrollbars: Try to design the pages so that they look like they aren't framed to the untrained eye; the scrollbar should fit right in. This often means keeping the amount of material in all but one frame small enough to keep from displaying scrollbars. A reasonable design goal would be to have no more than one frame with scrollbars.
•   "You Are Here" in navigation areas: Groups of links (text or images) that include the current page should indicate which page is currently being viewed. Being able to navigate directly to the other choices by clicking on the representation in the group is an important added plus. The examples cited here show a variety of methods for doing this.

Don't:
•   Don't use "shell navigation": Do not use one frameset file to hold a whole site or document. Avoid using the TARGET attribute without the "_top" value so that your document seems to be one URL.
•   Don't unknowingly use techniques that aren't bookmarkable: When in doubt, check.
•   Don't forget "You Are Here" indication: It is best to give readers a sense of where they are in a larger whole. Just using the name of where you are may not be enough: You may need to list the other possibilities and highlight the one chosen, such as through text or image button bars.
•   Don't have big areas that the reader doesn't want that don't scroll: The use of banners, logos, and advertisements that take up large amounts of space should be minimized. Space used for design purposes, such as to keep text columns narrow enough for easy reading, may be OK; check your readers' reactions.
•   Don't have too many scrollbars: They waste space, look bad, and are confusing. They are a last resort when the reader's screen is smaller than you planned.
•   Don't make things complicated or distracting: Keep animated GIFs and checkerboards of cute scrolling frames out of your document unless you want to give the reader something with which to waste their time. Some examples on the Frame Haters' sites are like games with several scrolling areas waiting for you to scroll down and find out what's there. Avoid this look.

Exceptions to the "make all pages bookmarkable" rule:

There are times when you really want all links to go to the same starting configuration, when the linked group of pages really is viewed as one entity. There are times when you want to force people to use one URL for the group. In those cases using a single frameset file and <A> tags with TARGET not equal to "_top" is OK, and perhaps the best way to implement.

Examples where making internal pages unbookmarkable is OK include:
•   Documents whose internal links constantly change so bookmarks will break, such as a "What's Special Today" document with descriptions of the special deals that change daily.
•   Documents where the first page has special, perhaps changing information that must be read before reading further, such as legal notices on "forward-looking statements" from public companies or instructions where updates are done frequently and readers must be aware of changes.
•   Uses of frames where the combined pages really are like one page, including left-hand frames with links that target "#" NAME anchors in the scrolling body text, as shown in our anchors sample, or pages with multiple illustrations, as shown in our photo sample.

In all these situations, good quick navigation from the first page to interior pages is important. Use lists of links or maps to facilitate this.

For information on how to implement all of these suggestions, see "How to implement frames".

This technique was written by Dan Bricklin with the help of the material cited, as well as input from Merryl J. Gross, Keith Instone, Julianne Chatelain, Molly Yen, Micah Zimring, and Lena Shukel. Comments should go to comments@gooddocuments.com.