Site Upgrades - A digital enema!

By Michael Bloch
Posted Friday, October 1, 2004

It was time - the design with it's origins in 1996 was looking very jaded. Some sections of the site were like dark, forgotten alleys... infrequently visited - cold and foreboding. It was time for a full web site upgrade!

If you have experienced or are experiencing this scenario now; you'll know the feeling. So much to do! Which way to go? What technology to use? Do we change the color scheme? What do we keep and what do we trash?

For those of us who developed our sites some time ago, we have learnt a lot along the way. So much has changed, especially in coding. While we develop sites for others that utilise some wonderful technology, our own sites suffer. A bit like the auto mechanic's car.

The size of the challenge faced in a total site revamp is usually in direct proportion to the size of the site. This is especially so if you have utilised the old, inline styles (non CSS) and template scenario. Maintaining these sites is also a pain. Every change you make to general layout needs to repeated on every page. We had approximately 200 pages at the time. The major update has been four months in the making, begging and borrowing time where we could.

We wanted to avoid having to spend so much time on maintenance and more time on developing content in the future. Regardless of what the marketing sharks tell you, content is still king!

We decided on incorporating the following structural elements. I hope this information may assist those who are contemplating their next site upgrade:

CSS (Cascading Style Sheets)

Originally introduced as a standard in 1996, but took several years to really catch on. It can be introduced to your site gradually without affecting non-CSS pages in the web. We slowly began introducing it around 4 months ago after months of urging from a colleague. Thanks Div!

In essence, a cascading style sheet is one or a few files that all other pages in the web refer to for instructions in layout, font formatting etc.

What this means is that you can basically change the look of your site by altering a few files instead of a few hundred! A big time saver!

For an excellent beginners tutorial complete with exercises regarding the development and implementation of Cascading Style Sheets:

Thomas Brunt's Out Front
(http://www.outfront.net/articles/css1.htm)

TIPS: If you want to maintain compatibility for Internet Explorer and Netscape versions 4 and above, I strongly suggest sticking with CSS1 (CSS2 was released a few years ago). A number of elements in CSS2 will create some crazy effects on older browsers. Even when utilising CSS1, check for compatibility of elements here:

W3 Schools
(http://www.w3schools.com/css/default.asp)

You may also wish to set your home page background and link attributes and colors manually within the actual page (Page properties in FrontPage). Then refer your content template's Page properties back to the home page:

This helps with compatibility issues in the more obscure types of browsers. For a more detailed discussion on cross browser compatibility see:

(http://www.tamingthebeast.net/articles/crossbrowsercompatibility.htm)

Server Side Include Pages

An excellent browser and search engine friendly alternative to frames. You create your pages, such as the top, right, left and bottom navigation bars as separate files. In your template page, you then call up those files with the SSI (Server Side Include) coding in the appropriate position. Use tables to control formatting.

Example SSI Coding

For "normal" SSI

(you may need to rename your SSI pages .shtml - consult your hosting service)

FrontPage enabled SSI

(no renaming of file extension necessary)

PHP SSI Coding
<?php
include ("../nav/navbar.htm");
?>

(your server will need to be configured for php and file extension will need to be renamed .php or .php3)

This function makes updating menu systems and other repetitive elements a great deal more efficient. If you want to take advantage of this function, you'll need to check whether your hosting service supports SSI.

TIPS: FrontPage Users! If you are publishing to a FP extension enable server, using server side includes couldn't be any easier. Develop your navigational, header and footer elements as separate files. Then create your template page. To make the navigational elements appear, simply go to "Insert" on the menu bar, select "Include Page" and then select the appropriate file.

For more details on SSI:

Big Nose Bird
(http://www.bignosebird.com/ssi.shtml)

Details on SSI when using PHP coding

Dev Shed
(http://www.devshed.com/Server_Side/PHP/Introduction/page2.html)

Are you still considering using frames for your new site? You may want to read this.....

(http://tamingthebeast.net/articles/framesnoframes.htm)

SSI and CSS elements incorporated into your web site revamp can turn site wide minor update time from many hours to just a few minutes! The pain in initially redeveloping your site will be well worth it...

Once you decide upon the technology you will use, then other aspects of planning, construction and implementation (without interruption to services) await you. Stay tuned in the coming weeks for articles on these topics.

Go forth and plan to redevelop! ;0)

About the Author
Michael Bloch
michael@tamingthebeast.net
(http://www.tamingthebeast.net/)
Tutorials, web content and tools, software and community.
Web Marketing, eCommerce & Development solutions