Article
Practical Web Design - Frames and Frame Usage Explained
Now, there are some situations where frames represent a reasonable solution. One is the presentation of a long document divided into chapters or blocks. A simple, workable solution is to build a frameset with two columns, where the left side offers navigational links, while the right side displays the actual chapters of content. Clicking on a link in the left-hand frame causes a particular chapter to display in the right-hand frame. This avoids having a horribly long document that may take too much time to display, and displays the content in manageable chunks. Is using a frameset the only solution to such content? Of course not, but it is one feasible method.
A frameset used with an outsourced shopping cart is another useful possibility. If you use separate frames for your banner or logo, navigation, and content, and incorporate the shopping cart in the content page, even if the outsourced shopping cart doesn't use your logo or navigational material, your site still works well and has the proper look and feel.
The point is, frames are considered bugbears of Web design not because they are useless, but because they've been so horribly misused in the past (and the present, and will probably be well into the future). Remember, the basic idea behind a frame is to keep some information permanently visible while viewing other information that is subject to change. When this works well, it allows the viewer to keep, say, a navigational window, a table of contents, an advertisement, or a title bar (or a combination of these elements) in place while they access different areas of the site. For commercial sites, this can be useful for keeping your company's logo or navigation, or an advertisement in front of the viewer at all times. For non-commercial sites, this is probably most useful for keeping navigational or other information always handy, as opposed to placing a menu on each page (the choice of most designers, by the way).
At its worst, you can get locked into "frame hell," where badly designed or deliberately constrictive framesets lock you into a site with no way out. Back buttons don't work like they ought to, navigating through the site itself is nightmarish, the frames replicate themselves one inside another, and even typing a brand new URL in the address bar opens the new site inside the old frame. Now that's annoying.
If you're going to use a frameset, make sure your content lends itself to framed display. Is there another way to display it? And think about your audience. While even though almost everyone now uses frames-capable browsers, some people don't like frames and run like scalded cats when a frames site appears on their screen. For these people, frames are like Kryptonite to Superman. You won't get far arguing with them; your best bet is to give them a <noframes> alternative, or just design your site without frames from the outset.
Let's say you want to build a site using frames, for whatever reason. Okay, how do you do it?
Note: I usually advocate trying the code out as we go along in your own HTML code editor. You should do this here, too, but you're going to have to construct several HTML files to serve as the frame source files, otherwise you won't see anything. Probably the easiest way to do this is to create a few simple HTML files with no <body> content and different <body> bgcolor attributes, just so something will show up.
To use the example code below, try constructing the following pages: your index.html page, which will be your frameset page, and six content pages:
- leftside.html,
- mainpage.html,
- rightside.html,
- title.html,
- navigation.html, and
- moreinfo.html.
None of these pages needs any text or graphical content unless you really want to put some content in them. Just give them different background colors so they will differentiate themselves on your screen.
Basic Frame Construction
First off, you have to use the proper frames DOCTYPE. For HTML 4 documents, it's:
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 FRAMESET//EN" "http://www.w3c.org/TR/html4/frameset.dtd">
This is a variant of the HTML 4 Transitional doctype.
For XHTML 1.0 documents, the doctype is:
<DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 FRAMESET//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Remember, since earlier versions of HTML don't officially support frames, if for some reason you haven't disembarked from the Wayback Machine and are still writing pages to be viewed in HTML 3.2 or earlier, you don't need a specific doctype to write framed pages. Most modern browsers will support the frames and their content anyway, but don't expect 100% compliance by any means.