WWW FAQs: Should I use frames on my web site?


2007-12-12: Short answer: no! Frames are a terrible way to design a web site. Please do not use them. There are better alternatives to solve all of the problems "solved" by frames.
"What about iframes?"

The newer iframe element is slightly less awful, because it doesn't create problems for bookmarking pages. However, it is still a problem for search engine optimization and slows down the loading of your page. Use server side includes instead.

OK, now the long answer:

1. Frames keep people from bookmarking your pages properly. When users come to a site with a single top-level "frameset" page, they see only one URL in the address bar. So does their web browser. When you "bookmark" (add a favorite) for the page, you don't get the particular page you were looking at. You get the top-level home page of the site.

As a designer who wants people to navigate his or her web site in a particular way, you might think this is good. But since it is not what your user wants, your user will get angry and stop using your site at all. Remember: your users have a choice and they will not choose your site if it works badly. Making users happy is everything.

2. Google and other search engines have trouble indexing frames. If you don't understand why this matters, please read my article how do I promote my web site?

More than 90% of the traffic to the vast majority of web sites comes from search engines. If the search engines can't index your pages properly, no one finds your site and you get no business.

3. Frames screw up scrolling. A normal web page has one scroll bar and the mouse wheel automatically "knows" that's the window to scroll. A framed page has several scrollbars. The user must click in the "right" frame and so on. Ick.

4. Frames often look bad. Standard frame borders look tacky and unprofessional. Frames were briefly popular in the mid-nineties before professional web designers discovered all of these issues and stopped using them. You do not want your page to look like a bad leftover page from the mid-nineties. If you must use frames, please use CSS to improve their appearance.

Common Reasons For Using Frames, With Alternatives

Sometimes people use frames anyway. They do so for the following reasons:

1. To include navigation elements on every page. You can do this much better with server side includes for this purpose. Every decent web host supports them.

2. To prevent something from scrolling off the page. There are several options to fix this. The best is the CSS position: fixed style. Put your non-scrolling elements in a position: fixed div element, like this:


<!-- Use CSS to put it where you want it -->
<div style="position: fixed;
  top: 50px;
  left: 100px;">
Non-scrolling navigation links go here
</div>

This works in modern browsers like Internet Explorer 7, Firefox, Safari and Opera. Windows users are migrating to IE7, which is standard in Vista. Users of older versions of Internet Explorer will still see your navigation elements, but they will scroll. If you must have fixed elements in IE6, you can still do it with just a little more IE6-specific code. See Brett Merkey's excellent "Position: Fixed in IE6" demo for complete code (be sure to look at "view source").

Consider the possibility that it might not be the end of the world if your logo and links scrolled off the screen. The user has already seen them and is choosing to scroll to read more of your content. Fixed items can make a page look busy and unprofessional.

3. To allow continuous music playback between pages. The idea here is that the music player is in a frame that doesn't change, while the user navigates from page to page in another frame. This works, but only if you use frames in a way that ruins bookmarking (favorites) and damages search engine optimization. It's not worth it. Use a separate player window, or my autoresuming music player. See my article how do I keep the same song playing when the user moves between pages? for complete information about these solutions.

4. To embed other people's web sites in your web site. Just don't. This is legally shaky and you may find yourself on the receiving end of a nasty lawsuit, especially if there is any indication that you intentionally misrepresented the other site for your benefit or profit. Also, this is frustrating and confusing for the end user.

How To Make Frames Slightly Less Awful

If you simply must use frames— and you shouldn't, let's be perfectly clear about that— you can fix the bookmarking problem and restore the normal operation to the "forward" and "back" buttons... if you create a separate frameset page for every single page of content.

If you create a frameset page corresponding to every content page, and always specify target="_top" in every a (link) element and form element, sending the user to the corresponding frameset page for the new content page, then the user can bookmark the frameset page corresponding to each content page. The end result is a "sort of normal" browsing experience. But it still looks bad and has all of the other disadvantages cited above. So please, just don't do it.

The iframe element: somewhat less awful

Most of this article discusses the traditional frameset approach. There is another technique, the iframe element, which incorporates a second page directly into the body of the first. This element is slightly less awful because it doesn't prevent normal bookmarking or navigation of the main page. However, there is still the problem that it confuses search engines when they index your site. And the browser must make a separate "round trip" to your web server to fetch the content you are loading with iframe. Compare this to server side includes, which have no impact on the browser because the content is "folded in" to the HTML before the browser ever sees it. Finally, some older browsers don't support iframe at all, although the browsers used by the majority of people do support it.

In Conclusion: Don't Use Frames

Don't use frames. There are better solutions for nearly every situation.

Frames are occasionally handy in highly application-specific cases, such as web application servers built into routers and other situations where a normal web site browsing experience is not required. In virtually all other situations, they do much more harm than good. So take advantage of the alternative techniques mentioned in this article to build better pages without frames.

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!