Avoid frame-based layouts in favor of alternative designs

by Tony Patton | Aug 24, 2006 5:08:00 PM

Tags: Tony Patton, Web Development Zone Newsletter

Takeaway: Most Web developers view frames as relics and opt for newer technologies such as CSS or AJAX instead. Tony Patton outlines some of the issues with frames and lists benefits of alternative designs.

I recently met with a client to discuss a Web application for internal use. The meeting was going smoothly until he stated a preference for frames. That's right�he preferred frames for site layout. I couldn't remember the last time I actually coded an application with frames. His motives originated with replicating an existing VB application, so it was hard to argue the point. These days, frames are frowned upon, but I had a hard time remembering why. In this article, I explain why you should avoid frames and consider alternate technologies.

The concept

Frames were a cool concept when first introduced many years ago. I can remember coding sites with individual frames for banners, navigation, and site content. The concept is simple if you are unfamiliar with frames. Basically, HTML frames allow you to divide the browser window into individual spaces or frames.

The frame and frameset HTML elements are used to create frame-based layouts. The frame element defines individual spaces or frames. These frames are contained within the frameset element. The cols and rows attributes of the frameset element define the layout of the frames contained within it. The HTML in Listing A creates a sample frameset. The Web Development Zone archive is loaded in the left frame while the Download.com site is loaded in the right frame.

Weekly development tips in your inbox

Keep your developer skills sharp by signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday.

Automatically sign up today!

The scrolling attribute of each frame signals whether the user may scroll within the frame (yes) or not (no), and the noresize attribute says the frame may not be resized so its width is static. The noframes element provides what is displayed in browsers lacking support for frames. There are other options available; refer to an HTML resource for more information.

Loading two Web sites is not the most practical application. Frames have often been used to place a navigation pane on the left or top and content on the right or bottom. This is easily achieved by setting the frame's width (or height) and loading the necessary page(s). The frame concept is simple, but it is viewed with disdain by most Web developers.

Drawbacks

These days, frames are frowned upon by the Web development community. In fact, they are no longer supported in the XHTML 1.1 specification. It is replaced by XFrames. So this may provide one reason to avoid frames, but what about currently supported standards? The following list provides an overview of the reasons frames are not in widespread use:

Many Web developers are philosophical when frames are discussed. They say frames violate basic concepts of the Web because it is a large collection of individual pages that may or may not be linked.
While most browsers render frames as designed, it is not the case with nontraditional browsing platforms like cell phones, PDAs, and so forth. Frame-based layouts are confusing�if not useless�on these platforms.
Search engines have problems processing sites organized with frames. Some search engines, like Google, skip framed content altogether and simply index the noframes content.
Coding and design can be a problem when pages are designed for a predefined frame-based area. Problems may arise when these pages are viewed individually and layout is hideous.
The browsing experience for users can be irritating with framed sites. Bookmarking such sites often bookmarks the entire frameset and context is ignored, so users find it difficult to bookmark specific content. Another issue is printing, but most browsers allow users to choose to print the entire frameset or individual frames.
Frames cause various accessibility problems. The visual layout of frames is difficult to translate to nonvisual browsers. A good rule is to provide textual descriptions of all elements and include content for browsers that don't support frames. The online guidelines provide more details.

Alternative designs

The introduction of frames occurred in the pre-CSS days of the Web. Nowadays, CSS can be used to provide frame-esque designs. The first example can easily be re-created with CSS as Listing B demonstrates.

In this simple example, the background colors of each div are included for demonstration. You can create more robust layouts with CSS; the Yahoo! User Interface Library provides great examples. You may also use AJAX to improve data loading, which is often a reason for using frames (since frames may not have to be reloaded as frequently).

Another presentation option

Frames are relics in most Web developers' eyes. Once beloved, frames became pass� as technologies like CSS provided better options. I'd love to hear your opinion of frames. Please share your thoughts and experiences in the article discussion.

And, in case you were wondering, I was able to persuade the client to go with a design featuring CSS to handle page layout.