This age-old debate is centered on an important principle of Web design: Use a consistent layout! A consistent layout makes it easy for Visitors to
find their way around your Site and creates a sense of place. To help provide this consistency, most designers divide the available Browser space into specific logical areas. For
example, each RidgeStar page contains a "Table of Contents" on the left side of the page (the yellow bars containing the main topics) and a
"Content area" on the right side of the page (a white background containing the text for the current topic).
The most common approaches to creating these divisions are Tables and Frames. Each approach has advantages and disadvantages that must be carefully
considered prior to building the Site. To illustrate this, let's review how they work:
TABLEs
Creating a Web Page using Tables requires a single HTML page (TABLE.HTML), as shown in the following simple example:
TABLE.HTML |
---|
<table><tr>
<td>Table of Contents</td>
<td>Content area</td>
</tr></table> |
Advantages
- Tables are accessible to the widest variety of browsers
- Tables are easily indexed and referenced by Search Engines.
- Pages using tables are easily added to browser "Favorites"
- Tables usually provide good results when printed
Disadvantages
- If a user chooses to scroll down on a page, the whole page will move.
- If you include any links that are external to your Site, the user will leave your Site
FRAMEs
Frames are much more complicated: The same page setup that we created in the Tables example would require a FRAMESET page (FRAMES.HTML) that contains
two FRAME files, one for the Table of Contents, and one for the Content (TOC.HTML and CONTENTS.HTML):
FRAMES.HTML |
---|
<frameset cols="140,*">
<frame src="TOC.HTML">
<frame src="CONTENTS.HTML">
</frameset>
|
This FRAMES.HTML page would then point to two other pages within the defined FRAMEs:
TOC.HTML |
---|
<p>Table of Contents
|
|
CONTENTS.HTML |
---|
<p>Content area
|
|
Advantages
- Frames allow areas within a Web page to remain independent of one another. For example, if the Table of Contents is contained in one Frame, and
the text is contained in another, only the text frame will move if a user scrolls down to read the next paragraph - the table of contents will remain stationary.
- If you provide links that are external to your site, only the frame that contains the link will display the external Web page - the user will remain "rooted"
in your Site.
Disadvantages
- Search Engines often have a hard time indexing Frame pages.
- If Visitors add a Frames page to their Favorites folder, only the FRAMESET page may be referenced - basically, they'll receive a very strange looking page if
they visit your site from the link in their Favorites folder.
- Frames force Visitors to scroll and move about between different areas (remember that simple sites are usually the most effective and easiest to use).
- Scroll bars can be visually unappealing.
- Printing results can be unpredictable.
What's best for your Site?
We recommend using Tables throughout your Site until the majority of Browsers in use throughout the Internet contain proper support for HTML5 and DIV construction. Tables (and HTML5+DIV) are easier to index, provide a clean, modern look, and are easier for users to navigate and link to.
However, the decision depends on your Site's requirements - the following table may help you to decide the best approach:
# | Characteristic | Best |
1. |
I need one area in the window to remain stationary while the other scrolls | FRAMEs |
2. |
I want my logo to remain in the window if the visitor clicks on a link that is external to my Site. | FRAMEs |
3. |
My Site needs to support a wide range of Browser versions. | TABLEs |
4. |
I want to make it easy for Search engines to point people to the pages on my site. | TABLEs |
5. |
I want my Site visitors to be able to link directly to any page or function in my Site. | TABLEs |
6. |
It is important that the Web pages print accurately | TABLEs |
In order to maintain consistency within your Site, you should choose one of these approaches, and stick with it throughout your Site. Consistency of implementation IS important.