Frames are Evil

Frames are a method of constructing a web page where the "page" displayed in the web browser is composed of multiple actual pages. The file that pulls these individual frames together and describes how they are laid out in the browser window is called a frameset. If you've been surfing the internet for any length of time, you've no doubt seen framed pages before.

Okay, I'll admit that, this page's title notwithstanding, frames are not inherently evil. Frames have a place and can be used effectively to, for example, display two pages side by side for comparison. What is evil is that frames, to the uninformed, appear to be seductively easy to implement.

The novice web designer often thinks that by only changing a portion of the page, they will save download time for the user, since only part of the page has to be downloaded. That's myth number one. Or perhaps he or she just thinks it looks "cool" to only change part of a page when a hyperlink is followed. What's cool, or trendy is not always what's best for the job.

So what's wrong with frames? Let's face it, the web is all about usability. W3C studies have shown that usability is the second most important property of a web site. From a usability stand point, there are a good many issues caused by frames. According to Steven Pemberton, CWI, Amsterdam and W3C Chair, W3C HTML and Forms Working Groups, "current frames are a disaster!" Here are my top ten frames problems.

The "Back" Button

If the designer changes more that one frame when a link is clicked, users who press their browser's Back button will not return to the previous page, but instead will only change the most recent frame replaced. This can be overcome by adding JavaScript to the page.

Bookmarking

Users cannot bookmark a specific collection of pages that make up the page displayed. If a user attempts to bookmark a page and later returns to that bookmarked page, they will no doubt be surprised to find that the default pages of the frameset are displayed instead of the pages they actually wanted to see. This can also be overcome with the use of JavaScript.

Recent versions of Internet Explorer on the Windows platform can bookmark a specific collection of pages in a frameset. Of course, given the number of people who have abandoned Internet Explorer, depending on your particular target demographic, that may still leave a lot of users out. There is also a limitation that even those IE users can only bookmark one set of pages a specific site. If they attempt to bookmark a second set of pages, it will overwrite the first.

Search Engines

Search engines find the html pages that make up the frameset and not the frameset itself, so pages get presented without the navigation and/or page header. This can also be overcome with JavaScript.

The "Refresh" Button

Users who press the Refresh, or Reload button may see an entirely different set of pages than the one they were viewing.

Printing

Users attempting to print the displayed page will normally print only the active frame, not the entire frameset. In other words, they may only print the navigation links instead of the page they see.

The PageUp and PageDown Keys

Much like the printing issue, keys pressed by the user, including the up and down arrow keys and the PageUp and PageDown keys are applied only to the active frame, which may not be the particular frame they wanted to scroll.

Referring Users to a Page

One of the most important traffic generators for most sites is user referrals. A user sees a site and mentions it, or e-mails a link to a friend. When following the URL, the friend may see a completely different set of pages than what they were supposedly referred to.

Popup Menus

You've all seen them, where you mouse over a button, or link and a menu is displayed. Those menus cannot cross frame boundaries. They must be displayed entirely within a single frame. Thus, either the navigation frame must be enlarged enough to contain the menu, or the code for the menu must exist in every page that uses it.

Scroll Bars

You can never be entirely sure of the user's browser window size and text size. Consequently, scroll bars tend to pop up when and where you least expect them. Either that, or a frame has scroll bars turned off and the user cannot access the full content because part of it is off screen and has no scroll bar.

Alignment

Trying to align the content of adjoining frames simply cannot be done in any reliable, cross-browser way.

Conclusions

Okay, I've mentioned ten different items. Note that three of the ten can be overcome by using JavaScript. Of course this JavaScript adds weight to the page. Images used on multiple pages are cached by the browser and won't need to be downloaded again. So, where you might think you're saving the user from downloading repetitive portions of pages, much of that repetitive content won't need to be downloaded in a “flat” or non-framed page. The only thing you save with the frameset is downloading a small amount of HTML code, but when using frames you replace this with the JavaScript needed to make the pages work reasonably well. Note that seven of the ten are simply faults that you, or more notably your users, must put up with.

There is another way you can overcome many of these issues. That is called a self-referencing frameset. A self-referencing frameset is where you use a server side script to write out the frameset. If you do a Google search, you should be able to find out how that works.

The end result is that frames do have a place on the web, but they are not a panacea to cure all ills. Don't lock yourself into a framed web design without knowing the obstacles and provide work arounds for those you can.

Good luck!