In the course of managing a website, you will probably find that, on occasion, you may have to change certain elements on your website that are common to all pages of that site. For example, you may want to change the navigational side bar, logo, banner or the like. Such changes, as all webmasters can attest, are a tedious and time consuming affair if the site has many pages.
To minimize the amount of editing that they have to do when changing these common elements, webmasters have traditionally employed a variety of tricks. This article discusses a few of the methods widely used as well as the strengths and weaknesses of each method.
Incidentally, if you are contemplating a redesign of your website, you may also want to read my article 6 Things to Note Before Changing Your Site Design, which discusses other issues that are important to watch out for when redesigning a website.
In the earlier days of the Internet, the use of frames to hold things like the navigation menu as well as (sometimes) the top header and banner for a website was favoured by new webmasters. They are not commonly used nowadays, however, in modern websites (probably for the reasons given below).
At first glance, frames seem to be a good solution to the problem of common elements being replicated across your site. You only have to put those elements in a specific file, and load it in your frameset across all the pages of your site. Your pages automatically have a common set of elements, and anytime you wish, you can simply edit that single file to change the elements, and all your pages will have the changes.
The downside of frames is that it presents multiple usability, accessibility, linking and search engine issues.
As mentioned in my satirical Seven Easy Ways to Annoy Visitors to Your Website, frames almost always annoy visitors, since they force them to work within the small confines of the frame (no matter how big you make it), and prevent them from taking advantage of their large monitor to speed up their reading. It also stops them from successfully bookmarking specific pages.
In addition, they cause problems for people who rely on screen readers (eg, the blind), since frames are pretty much a visual effect that places separate web pages into a single browser window.
Frames also frustrate others linking to specific pages on your site. Most people blogging or talking about a particular page on your site will just copy the existing link from their browser address bar, which, if your site uses frames, usually means the web address (URL) of your main page. The end result is that the specific pages on your site that hold the specific keywords that you want indexed by the search engines may not have that high an authority in the engines' eyes since they will lack many links pointing to it. (If you're not familiar with the importance of links pointing to your website, please see the article How to Improve Your Search Engine Ranking on Google.)
In general, if you can avoid it, I strongly recommend that you avoid using frames as a method of solving your multi-page updating problem. You'll be replacing a minor problem with a major one.
Those whose sites are hosted on an Apache server (probably the majority of websites on the Internet) also have the option of using Server Side Includes, or SSI. Like all the above methods, this entails your putting the common elements into one or more files, which you then include in all your pages. If you need to modify any of those elements, all you need to do is to change that file, and all your pages will show the modifications you make.
The good thing about using SSI is that what you do is transparent to both your visitors and the search engines. To them, it will be as though the elements you placed in the included files are located in every single one of your web page. As a result, you don't really have to worry about the method in itself posing a problem to either your users or the search engines.
Unfortunately, there may be a downside to using SSI for you (the web designer). You will not be able to see those common elements when you design your site locally on your computer. Neither will you be able to see your page as your visitor sees it when you test your local copy (on your own computer) with your browser. To see the changes, you will need to upload the pages and the SSI files to your site and load it with a browser like any other visitor.
This may or may not be acceptable to you, depending on the extent of the changes you're making. If it's a minor change (like correcting a typo), it's probably not a big deal. If, however, you're making major changes, you will probably want to make sure the changes work correctly before you put it "live" on your site. And since your SSI file affects every page that includes it, any change (broken or not) to that file instantly affects your entire site.
I realise that commercial web editors like Dreamweaver automatically load the SSI from a website and display it in the editing window so that you can see what your web page will look like in the editor as you edit. This only solves the problem if you're changing the content of the main page, and not the SSI file itself. Changes to the SSI file can still only be tested when you actually upload it to your site.
For the purpose of this article, when I mention a "template system", I'm actually talking about Dreamweaver's template facilities, where if you make a change in the template, Dreamweaver will automatically modify all the pages on your site that use that particular template.
Not all editors use the term "template" in the same way: for many, a template is just a blank file with your basic page layout that you use as the basis of other pages. (In fact, that's the normal meaning in English too.) In Dreamweaver, a template is not just a basic page layout for your site. It is also a special file that Dreamweaver monitors. When you create a web page based on that template, it will inherit the common design. When you change the design in the template, Dreamweaver systematically goes through all the pages derived from that template, and updates them for you.
Like all the other options, there is a downside as well. Dreamweaver is a commercial product and is thus not free.
When a site has relatively few pages, using a search and replace utility to update common elements of a website is probably adequate. As it grows in terms of number of pages, unless you are a regular expression guru who can form complex search and replace regex patterns off the top of your head, updating your site soon becomes cumbersome and error-prone. In such a case, you may want to consider some of the methods described in this article. As noted above, however, each method has its own set of problems, so you should go in with your eyes open.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.
It will appear on your page as: