Chapter 7. Frames
Frames-based pages are not standard Web pages; they are meta-documents that split the browser window into sections, pulling standard HTML documents into each section, or frame. Frames-based sites have advantages, though they generally favor the designer, not the user. Site maintenance is easier because standard site elements—such as navigation—can be handled by just one document. Design consistency is easier to achieve with frames for the same reason: one or two files can manage the user interface for an entire Web site.
The shortcomings of frames surface when they are considered from a user’s perspective. In some respects, frames-based pages are easy to use. Site design is generally consistent, which makes it easier for users to learn a Web site. When site navigation is in its own frame, users can scroll though content without losing sight of navigation options. However, frames-based pages function differently than standard Web pages; essential browser functions—like printing, bookmarking, and browser-based navigation—do not behave according to expectations. Printing a frames-based page creates a printout of whichever frame currently has focus, which might happen to be the banner or navigation frame, not a content frame. A bookmark to a frames-based page links to the original meta-document, even if the user wants to return to a page several links deep in the content frame. And the ever-popular back button moves the user back in the frame rather than back in the page. These inherent usability concerns make frames a construct generally to be avoided.
When frames are used, nonvisual users and users who cannot access framed content encounter particular problems—though some of these can be addressed using proper HTML coding. Nonvisual users do not have access to the visual cues that differentiate frames. When information about each frame is provided in the frame title, nonvisual users can understand the functional purpose of each frame and navigate among them. Users without access to frames can still access site content if navigation links are provided in the NOFRAMES tag. Content within the NOFRAMES tag displays when frames are disabled or unavailable, so users without frames can use those links to gain access to site content.
7.1. Basic Principles
7.1.1. Avoid using frames
Frames should be avoided because of the usability problems they create. Frames-based pages behave differently from standard Web pages, affecting essential Web functions such as printing, bookmarking, and navigation. General usability suffers when functions do not behave as users expect.
For example, printing a frames-based page can produce unpleasant results. The browser prints the contents of the frame that has focus when the print function is invoked, which may not be the desired outcome if it’s the navigation or site banner frame.
In addition, functions that involve addressing, such as bookmarking, do not work well when frames are in use. The actual file at the URL location of a frames-based page is called a frameset, which contains references to one or more Web pages (Figure 7.1). When a user clicks a link and loads a new page in a frame within a frameset, the URL within that frame changes, but the frameset URL remains the same. If the user chooses to create a bookmark to the page in its current state, the bookmark captures the URL of the frameset’s original links rather than the current state the user is viewing.
FIGURE 7.1 Frame-based pages are composed of different Web pages loaded into separate frames. NextD uses frames to divide the page into three sections: the top frame for branding and site navigation (1), the left frame for section navigation (2), and the right frame for content (3).
Another usability concern is the unexpected behavior of the back button. When frames are used, going back moves the user back in the frame rather than back a page. This can cause confusion if the user thinks of the frameset as a page and expects the back button to go back to the previous page.
Add to these usability flaws concerns directly related to access, and frames become an even less attractive design solution. Since frames-based pages are a pairing of two or more pages, users need to be able to identify the function of each frame and to navigate between frames. Nonvisual users cannot access the visual cues that help visual users differentiate frames and identify their functions. If frames are not described in the frameset code, nonvisual users cannot easily determine the function of each frame, nor can they navigate between frames. In addition, users can opt not to view frames, or they can use a browser that does not support the display of frames. These users will not have access to site content unless access is provided via the fallback NOFRAMES tag.
In general, the accessibility concerns associated with frames can be addressed using proper markup. However, even if users can access the content in a frames-based Web site, they will encounter the usability flaws inherent to frames. For this reason, frames should be avoided as a tool for Web site design.
In a nutshell. Standard behaviors—such as printing, bookmarking, and returning to a previous page—behave differently with frames-based pages than with standard Web pages and therefore cause usability problems for all users. Avoid using frames.
7.2. Markup
7.2.1. Use frame titles to identify the function of each frame
For visual users, frames on the page are plain to see. Often, a page is split into three frames: a banner frame, a navigation frame, and a content frame. These frames are visually differentiated by their content: the banner is generally graphical, the navigation is generally a list of links, and the content is generally a block of text and images. In addition, the browser divides frames visually via borders and scroll bars. Thus, the purpose and function of each frame is apparent to visual users (see Figure 7.1, previous page).
Nonvisual users cannot orient themselves using visual cues. Fortunately, HTML provides a method to communicate the function of each frame to nonvisual users through the TITLE attribute of the FRAMESET tag. The frame title is used to describe the frame function: for example, title="banner", title="navigation", title="content". When the frame title is present, software can provide the information so nonvisual users know the current frame and its purpose. When frames are titled, users can jump directly to the desired frame. In general, TITLE helps nonvisual users navigate between frames without becoming disoriented.
In a nutshell. Nonvisual users may have difficultly navigating a frames-based page without some idea of the contents and function of each frame. Use frame titles—such as “Banner,” “Navigation,” and “Content”—to label each frame so nonvisual users can differentiate and navigate between frames.
7.2.2. Provide an alternative to frames
Some browsers do not support frames. Some users opt to disable frames in their browser preferences. When users without access to frames encounter a frames-based page, the content is unavailable. Fortunately, HTML offers a fallback option, the NOFRAMES tag, which allows designers to use frames while providing alternative access to site content. Content contained within the NOFRAMES tag displays when frames are not accessible (Figure 7.2 next page).
FIGURE 7.2 The Computer User High-Tech Dictionary uses a frames-based interface to provide access to content, but also provides equivalent access via a NOFRAMES version for users who do not access frames.
As mentioned above, frames are meta-documents made up of several HTML documents. The frames might call up the documents “banner.html”, “navbar.html”, and “content.html”, and display these three documents using the frameset document “index.html”. Users without access to frames cannot access the banner, navigation, or content because the frameset calls for these documents to be displayed simultaneously. However, using the NOFRAMES tag, we can add accessible content that will display when the page is viewed without frames.
The NOFRAMES tag accepts any HTML code, so theoretically we could duplicate all the framed content—banner, navigation, and content—within the NOFRAMES tag. However, this approach is impractical. It requires duplicate content, results in large files, and, after all, why design framed pages if we can present all the information without frames? The best use of the NOFRAMES tag is to provide access to the site content, and the best way to achieve this is to provide access to the site navigation. Including site navigation links in the NOFRAMES tag allows users to gain access to the content pages.
When content pages are accessed outside the context of frames, users may be disoriented or dead-ended if the pages do not contain identifying information or links to other pages in the site. This can occur when users access content pages via a NOFRAMES link, or when users gain access directly to a content page URL via a bookmark, or as the result of a search query. Content pages that are intended to be part of a frameset are often orphaned without the surrounding frames that identify the page origins and navigation options, leaving users with no idea where they are and nowhere to go. For this reason, always include a link to the home page on content pages that are part of a frameset so users who access these pages directly can orient themselves and access additional content.
In a nutshell. Some users opt not to use frames or to use a browser that does not support frames. Use the NOFRAMES tag to provide alternate access to framed content: for example, provide access to site navigation via the NOFRAMES tag.