Scott Granneman

Contact | Site Map | Search
HomeWritingPresentationsTeachingWeb DevTech InfoUseful LinksPersonal

Web Site Probably-Not's: Frames

Ah, frames. Anyone who has used the Web for any length of time has experienced frames. Basically, frames are used for one or both of these reasons:

  1. To keep content on-screen at all times, like a logo or footer or navigation.
  2. To present two or more Web pages within one window at the same time, like a navigation windows and a content window.

Here's an example of a frames-driven Web site: the BJC Health site.

framesBJC.gif: BJC web site, with frames

BJC uses frames in both of the ways I mentioned above. First, the BJC HealthCare logo is in a frame in the upper left corner, and it never leaves the screen. Second, the navigation is in its own frame on the left side of the screen, while the content is in the right-most frame.

The thinking behind all of these frames is well-intentioned, as they are designed to benefit both the organization and the Web site user. The constant presence of the logo, the thinking goes, serves to reinforce our brand across the Web site, keeping us continually in the user's mind, and thus benefiting BJC; while the navigation's continuity on the left side of the screen helps the visitor more easily navigate around the site without getting lost, thus benefiting the user.

Both of these assumptions are wrong.

Let's look at the logo issue first. Visitors to the site will not forget that they are at the BJC site. They do not need a logo in front of them at all times to know where they are. On top of that, remember: users do not come to a Web site to be branded; instead, they come to accomplish tasks. Simply place the logo at the top of the page, without a frame. Your visitors will see the logo when the page first loads, and while they are viewing content at the top of the page. When they scroll down, they are not going to immediately forget where they are. Keeping that space always available for the logo takes up valuable screen real estate that could be used for other purposes.

As for navigation, the same principle holds true. If your navigation is logically presented, it's OK for a site visitor to scroll down and no longer have that navigation right in front of his eyes. Look at Amazon.com, for instance, which is one of the most-visited sites on the Internet. The navigation is at the top of the screen, and pages tend to be very long and detailed. Yet visitors have no problem scrolling down to read, and then going back to the top to navigate elsewhere on the site.

Frames are not just unnecessary, however. They actually prove counterproductive by making a Web site harder to use instead of easier. Problems occur in three main areas:

  1. Navigation
  2. Bookmarking
  3. Printing

Navigation is harder because of the way frames are designed. Basically, a Web page using frames is not really one page: it's several. To create a Web page with frames, you first create a frameset, and that frameset defines where the frames will go, how big they will be, and what names they will have. So, for the BJC site, a frameset has been defined that looks something like this:

framesBJCframeset.gif: BJC frameset

Frame 1 is named 'toplogo' and is actually a Web page that contains the BJC logo; frame 2 is named 'toc' (for Table of Contents) and is actually a Web page that contains the site navigation, and frame 3 is named 'main' and is actually a Web page that contains the page content of the Web site. All three frames sit inside another Web page, called the frameset, which is actually the Web page located at http://www.bjc.org. Notice as you click on the links in the navigation frame (#2) that the content in frame #3 changes, but the URL, or Web address, never does. In essence, you are always at http://www.bjc.org. You are changing pages, but not really, because you never leave http://www.bjc.org, unlike most other Web sites, where you might start at http://www.widgets.com/ and then proceed to http://www.widgets.com/contact.html and then finish up at http://www.widgets.com/products.html. But with frames, it's like what the Eagles sang in 'Hotel California': 'You can check out any time you like, but you can never leave.'

Since you never leave the frameset while you're visiting the Web pages inside a framed site, your Back button on your Web browser starts to act weird. Normally, you hit the back button, and you go back to the previous page. Inside a frameset, you go back to the previous frame. As a result, people can get confused when they're trying to back out of a frame site, and instead of leaving the site, they just flip through pages within the site. Confused site visitors are never a good thing.

Bookmarking is another problem, although modern Web browsers (Internet Explorer 5 and up, and Mozilla 1 and up, and Netscape 6 and up) have mostly fixed the problem ... but not always. Again, it all goes back to the way frames are created. Normally, when you bookmark a Web page so that you can easily return to it later, you actually bookmark the exact location of the Web page: http://www.widgets.com/products.html, for instance. But with frames, remember that you never leave the frameset, so it doesn't matter how deep you've gone into a frames-based site, you're still always at http://www.bjc.org. So when you bookmark a page that it took twenty clicks of the mouse to get to, you're still just bookmarking the home page, located at http://www.bjc.org! Needless to say, this can be tremendously frustrating for your site visitors. As I said, most modern browsers have this fixed by working around it to try to remember the actual framed pages that you were at when you created the bookmark, but this is still at best a poor workaround, and it doesn't always operate correctly. Better just to avoid the issue entirely by avoiding frames.

Printing is an enormous problem with it comes to frames. Try this experiment: go to http://www.bjc.org, click on a link in the navigation frame, and then try to print. If you're using Internet Explorer, the following dialog box will open up:

framesPrinting.gif: Printing frames

Notice that little section labeled 'Print frames'? Most people never even see it, even though they might have seen this dialog box hundreds of times. And therein lies the problem.

All modern Web browsers give users a choice when they try to print a framed Web page. Do you want to print everything just like you see it in your Web browser's window ('As laid out on screen'), do you want to print the last frame you clicked in ('Only the selected frame'), or do you want to print out each frame on a separate page ('All frames individually')? Notice the default: print the last frame you clicked in, or 'the selected frame.'

So what happens when a user comes to the BJC site? They navigate to a page they would like to print, so they click Print. Without reading the dialog box, they click OK. And what gets printed out? The navigation frame! Why? Because it's the selected frame, since it was the last frame they clicked in. So what happens next? They hit Print again, and again the navigation frame comes out of the printer. At this point, many people are going to give up, and remain unhappy that they could not print your site.

There are other problems with frames -- they make Web development far more complicated, and search engines have a terrible time with them, for instance -- but I think I've made my point clear. Frames are an outmoded and problematic solution that should be avoided at all costs.

Further information about frames

The seminal article critiquing frames remains Jakob Nielsen's 'Why Frames Suck (Most of the Time),' available at http://www.useit.com/alertbox/9612.html. It was written in 1996, but most of what he says still holds true.

'Why are frames so evil?' at http://www.html-faq.com/htmlframes/?FramesAreEvil brings a number of excellent points regarding the problematic nature of frames. It makes an excellent companion piece to Nielsen's commentary. 'Some Caveats with Using Frames' is quite similar and just as informative, and can be found at http://www.evolt.org/article/Some_Caveats_with_Using_Frames/22/293/index.html.

If you know your Cascading Style Sheets (CSS), then you know that you can use CSS to replicate the static nature of a frame by implementing position:fixed. Unfortunately, this is broken in Internet Explorer. A workaround is provided at http://devnull.tagsoup.com/fixed/, titled 'position:fixed fixed for IE/win,' or search Google for the phrase 'position:fixed' to find other solutions.

Finally, http://dorward.me.uk/www/frames/ is a Web page dedicated to 'Frames - The Problems And Solutions.' It provides links to discussions and solutions that offer solutions that work better than frames, based both on CSS and other technologies.