Where Should I Put Common Elements of My Web Pages?

SSI vs Frames vs JavaScript vs Templates


Where Should I Put Common Elements of My Web Pages? SSI vs Frames vs JavaScript vs Templates

by Christopher Heng, thesitewizard.com

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.

Pros and Cons of Using Frames to House Your Navigation Menu

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.

Pros and Cons of Using JavaScript

Another method is to create all your navigation menu buttons and whatnot using JavaScript. Place the JavaScript into a separate file which you include in every page using a statement like the following.

<script src="navigation-menu.js" language="JavaScript" type="text/javascript"></script>

My free Drop Down Navigation Menu Wizard does this if you choose the "Pure JavaScript" version. With this method, when you need to add or change one of the elements in the menu (or some other common element), you will only need to edit the JavaScript file. All the pages on your site will automatically reflect your changes.

The disadvantage of this method is that your site becomes reliant on your users enabling JavaScript. Although this is not a serious problem nowadays, since just about every site on the Internet (including sites like Gmail) require JavaScript to be enabled, it is still something that you should be aware of. Visitors who disable JavaScript in their browser will not be able to see anything generated by the JavaScript.

More importantly, search engines by and large do not index things created using JavaScript (although Google tries to with simple JavaScripts). If your navigation menu on your site is generated purely by JavaScript, and you have no other internal links on your site (other than those created by the JavaScript), search engines may not be able to find the other pages on your website. This was precisely the problem encountered by one of thesitewizard.com's visitors, as described in my article Appearance, Usability and Search Engine Visibility in Web Design.

Pros and Cons of Using Server Side Includes

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.

Pros and Cons of Using a Web Editor's Template System

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.

The good thing about using this is that you are not dependent on your visitors having JavaScript enabled, or your web server allowing SSI, or a technology like frames that causes innumerable problems everywhere. Since the editor does all the tedious work of updating your pages for you, you are also relieved of the necessity of going through every page by hand to update it.

Like all the other options, there is a downside as well. Dreamweaver is a commercial product and is thus not free.

Dealing with Common Elements on Your Website Efficiently

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.

Copyright © 2008-2013 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

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.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Pages

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

Where Should I Put Common Elements of My Web Pages? SSI vs Frames vs JavaScript vs Templates





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.