SSI: An Alternative to Frames

Aside from some previously discussed problems with web page frames, there are some other issues in the fact that they just plain impose a non-standard method of creating and browsing web pages. The use of HTML frames is essentially counterintuitive for both author and user alike.

To elaborate a little bit:

• On the author side, one is required to deal with the fact that each framed web page is constructed using not just one but several different HTML documents including a frameset document that you never actually see. Working with a gaggle of frameset and frame source documents to produce a single web page is tedious and is much more difficult to visualize than the standard one HTML document = one web page system.
• On the user side, one is required to deal with the fact that framed web pages simply function differently from standard web pages and hence some expectations may be diminished. Out here on the net, users are already forced to rapidly reconstruct their understanding of site navigation every time they hit a new website and even —within some poorly designed sites— every time they hit a new page. By throwing web page frames into the mix you may be further thwarting the user's ability to quickly establish a reliable set of expectations about how your website is supposed to work.

The allure of using HTML frames to make website management easier, however, may be enticing enough to overlook any shortcomings. This is especially true if you have a large website and the thought of going through 100+ pages just to add a new link to the site menu makes you a little weak at the knee.

But if the only reason you're using frames is to create a site menu that can be updated by editing just a single document then you might want to consider chucking out the frames idea altogether and using SSI instead.

How to Use SSI to Create a Site Menu

SSI or Server Side Includes can be used to automatically insert snippets of HTML code on all your web pages. This is useful for any section of your web page that tends to get repeated across many other pages. As well as a header or a footer, SSI is often used to insert a site menu which needs to be frequently updated every time a new page is added to the site.

Here's a crash course on using SSI to create a site menu on all your web pages:

1. Copy-and-paste all the HTML code required to create your site menu into a separate document. This document will contain just the code required to create the site menu and nothing else, e.g. the essential web page structure is not required.
2. Save this document as a file called menu.inc
3. In any web page in which you wish to display your site menu, replace the code that you copy-and-pasted in step 1 with this:
   
   
   <!--#include virtual="menu.inc"-->
   
   You can use this same code in as many web pages as you like. For demonstrational purposes, let's say you inserted this code into your site's home page which is called index.htm
4. Rename index.htm to index.shtml (SSI typically only works on files carrying the .shtml extension)
5. Find a web host that supports SSI (most web hosts do) and upload menu.inc and index.shtml to the same directory.
6. Load your home page (index.shtml) in your web browser to see your site menu automatically inserted.

Now whenever you want to modify the site menu for any and all web pages that have the includes code (step 3) and the .shtml extension, all you have to do is edit the menu.inc file and then upload it to your web space.

No muss, no fuss.