Alternatives to Frames For Navigation

One of the most common reasons that webmasters cling to the use of HTML frames is to impliment a standard navigation system or menu on their site. That is, they use frames to allow them to use a single HTML file for navigation across their entire website. The attraction is obvious. Using this approach means you only have to maintain one page/file in order to update your entire website. But there are some serious drawbacks to using HTML frames. First of all, its unfriendly to users because they cannot bookmark individual pages on your site. When using frames, every page has the same URL - that of the parent frameset page. Second, search engines have difficulty indexing frame-based websites - especially if you do not properly impliment the <NOFRAMES> section of the frameset page. Even if you do include discrete links to individual pages in your site within the <NOFRAMES> section, you have to worry about users viewing pages that were designed to fit into your framed-page layout design. Clearly, you should carefully consider any alternative to frames you can use.

Presented here are some simple and effective alternatives to using frames. The overall approach relies on CSS level 1, which is widely supported by all browsers released since at least 1999, while still giving you the convenience of having your navigation menu stored in a single external file. The alternatives I came up with are:

Server Side Includes.

External JavaScript file.

<IFRAME>s.

Fortunately, the browser software used by about 95% of users is fully capable of supporting all three of these methods. The menu in the left-hand column of this page contains links to examples of all three methods. If you check the source for this page, take note of two things. First, the content of the menu on this page is simple HTML located at the bottom of the page. Second, that all of the CSS styles are contained in an external style sheet. This same external style sheet is used for all of the example pages. It is only the implimentation of the external menu content that differs. The result is that all of the implimentations appear at first glance to be nearly identical. It also means that you are limited to the two-column/menu-on-the-left layout I used here. I used it for convenience - that is, its dirt simple to impliment and expand. But there's nothing to prevent you from making a menu-on-top/content-underneath design or anything else you can construct with CSS.

Webmasters! Is Your Site Getting Enough Search Engine Traffic?

How well does your site rank in the major search engines? Studies show that over 80% of first-time visitors find websites through the popular search engines like Google, Yahoo! and MSN Search. If your site isn't designed right, it won't show up when users are looking for the products, services, and information you make available through your website. I offer a Free Search Engine Evaluation that will check your site's presence and performance on the major search engines. You'll see what you're doing right, what you're doing wrong, and what you could do better. See Rainbo Design's Search Engine Services and sign up to get your Free Evaluation today!

Server-Side Includes have the advantage of not relying on the user's browser for any support beyond CSS level 1. The underlying cgi software executed on the server is used to generate inline HTML to create the navigation links. The downside is that not all hosts support Server Side Includes and not all hosts allow users access to programming facilities, you may have to rename your HTML files with the extension ".shtml," and, of course, you have to be fluent in a programming language like Perl if you want to do more than simply insert the content of an external HTML file into your pages.

External JavaScript files offer a high-degree of cross-browser compatibility. The ability to use external JavaScripts has been around since 1996. The only limitations are that a few users do run with JavaScript support disabled (thanks to the proliferation of pop-up ads and privacy paranoia), you can run into cross-browser compatibility issues if your scripts attempt to impliment CSS or DHTML effects that require features not available in older browsers, and the code required to insert HTML into the menu is cumbersome to update or expand.

<IFRAME>s could be the best alternative to Server Side Includes. The <IFRAME> tag was a proprietary Microsoft invention that limited its widespread use until Netscape Navigator started to support it with the release of their v6.0 software in 2000. That means this tag is supported by roughly 90% of browsers in use today. With little effort, an <IFRAME> is like a little sub-window within your pages.

Even if you don't use the External JavaScript File method, you can still use JavaScript to add special effects to your navigation menu if you select the Server Side Includes or the <IFRAME> method. You can still do image rollovers, dynamic or cascading menus, and so on to the same extent (and with the same cross-browser limitations) you could by using frames.

How Does It Work?

The overall approach is to install two <DIV>s into your pages. The navigation menu content is stored in a <DIV> whose ID is "nfNavMenu" and your page content is stored in a second <DIV> whose ID is "content". These <DIV>s are styled with absolute positioning to control the overall layout. The sample code I provide displays a vanilla two-column layout with the navigation menu in the narrow left-hand column and the second column that occupies the balance of the page width contains the content of each page. From here, the implimentations differ only as to how the contents of the navigation menu are generated and displayed.

The Server Side Includes method and the <IFRAME>s method both rely on importing/inserting an external HTML file. So all you have to do is construct your navigation menu HTML file and add the appropriate support code to your other pages. When using the <IFRAME>s method, keep in mind that you have to construct a complete HTML file, with its own links for external stylesheets or JavaScripts.

The External JavaScript method is very similar, except that instead of constructing an external HTML file, you use an external JavaScript file to generate the HTML that displays your navigation menu. Again, all that's required is adding your links titles and URLs into the JavaScript and add the nfNavMenu support code into your web pages.

RainboRick's No-Frames Navigation System© is provided at no charge. If you use and enjoy this software, please place the following link on your site's main page, or on a page that is directly linked to your site's main page:

<a href="http://www.rainbodesign.com/pub/index.html">Rainbo Design's Scripts and Tools for Webmasters</a>

The button below will allow you to download a .zip archive containing all of the files in this package. Just install them in their own directory on your computer.

Quiet Count© · 404 Logger© · Image Shield© · RRAnimate© · PopZoom© · SMTP_FormMail · Referer.zip© · No-Frames Navigation System© · Spider Tracks© · SearchLog© · CSS Positioning · Automatic Frame Page Loader/Re-loader ·