Why you should avoid frames in your website design

04 November 2011

Web designers are occasionally confronted with clients who have antiquated conceptions of what makes a website good. The most frustrating of these is the use of frames. Frames were cool in the early days of the internet, before CSS made styling web pages so much simpler. Frames essentially tell the browser to create a divide between two parts of the page, and to load a separate page into each panel.

You can do various things with frames, such as keep one part of the page static while the other part can be scrolled (useful for navigation), but all of these functions can now be handled much better by using CSS and Ajax. Here are a few reasons why you shouldn’t be using frames in your website design. After we look at these, we’ll look at a simple solution for using CSS to handle what frames used to take care of.

1) search engines struggle with frames

Frames require a relationship between the various panels on your site, which can be interpreted by web browsers but not very easily by search engines. Google simply ignores content in frames when indexing a page, so you immediately hurt your search ranking.

2) Frames can break a page if the user does something unexpected

Many user actions will cause a frame-based layout to break. Clicking the back button, refreshing a single frame, or arriving on a framed page without the context of the other frames, can all cause one or more frames on the page to display a 404 page.

3) Bookmarking framed pages becomes problematic

If a user tries to bookmark a page, the browser might not handle this in the way the user expects. They will think they’ve bookmarked your page, only to call up the bookmark later and arrive at a single frame, displayed in their browser as if it were a whole page.

4) Frames can cause printing problems

Although many browsers provide options for printing pages in a frameset, this doesn’t mean that users will know which option to select. More often than not, printing a frameset will result in only a small element of the page being printed.

5) Frames increase server load and margin for error

If you have three frames on a page, that means you have three times as many http requests as a single page separated using CSS and HTML. If you have three pages, it also means you are three times more likely to have an error in the code of one of your pages, and it makes troubleshooting these errors more difficult.

These are only some of the reasons why frames should be avoided wherever possible. I could list a dozen more, but the point is that the only reason you should need to not use frames is because there is an easier, and better-looking way to do this using CSS.

CSS-Based Solution

The following solution is an example provided by TechRepublic, but it is the type of code you will find on most modern websites.

The above code simply defines two areas on your page, and when you create HTML