Alternatives to Frames - One File Navigation

One of the most common reasons that webmasters cling to the use of HTML frames in their website design is to incorporate 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 serious drawbacks to using HTML frames. First of all, it's unfriendly to users because they cannot bookmark individual pages on your site. When using frames, every page appears to have the same URL - that of the parent frameset page. Second, search engines have difficulty presenting frame-based pages in the search results because they have to worry about users clicking on links to pages that were designed to fit into a layout design. Third, when you use frames, you have to make sure to properly set the TARGET attribute on all links so that the pages load into their proper position within the . I've traditionally recommended that you should strongly consider an alternative to frames in your website design. But truly, you should simply avoid using frames. Full stop.

Presented here are some simple and effective alternatives to using frames to produce a single-file navigation system. They provide the same functionality without the drawbacks of frames. You can download all of my example code by using the button at the bottom of this page.

The HTML layout I use here to demonstrate ways to replace frames relies only on CSS level 1, which is widely supported by all browsers released since at least 1999. The layout is merely for demonstration here and is not required to give you the convenience of having your navigation menu stored in a single external file. The alternatives I use as examples are:

1. Server Side Includes
2. External JavaScript file
3.