|
|
Articles - Site Upgrades - A digital enema!
|
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
utilize 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
utilized 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.
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 further information about using CSS, read our Cascading
Style Sheets tutorial.
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
at
W3 Schools.
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:
<body stylesrc="../index.htm">
This helps with compatibility issues in the more obscure types of browsers.
View a more detailed discussion on cross browser compatibility.
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
<!--#include file="navbar.htm" -->
(you may need to rename your SSI pages .shtml - consult your hosting service)
FrontPage enabled SSI
<!--webbot bot="Include" U-Include="../nav/navbar.htm" TAG="BODY" -->
(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.
Are you still considering using frames for your new site? You may want to
think again after reading our article on
frame-based sites.
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.
What if I'm moving servers?
If you're planning on moving to a new hosting service as
part of your upgrade; this opens up a whole new can of worms. You'll want to
plan this very carefully in order to eliminate downtime and maintain your
current search engine rankings. Read our guide to moving
servers.
Go forth and plan to redevelop! ;0)
Michael Bloch
Taming the Beast
http://www.tamingthebeast.net
Tutorials, web content, tools and software.
Web Marketing, Internet Development & Ecommerce Resources
____________________________
Copyright information.... This article is free for reproduction but must be
reproduced in its entirety along with live links & this copyright statement must be included.
Visit http://www.tamingthebeast.net
for free Internet marketing and web development articles, tutorials and
tools! Subscribe for free to our popular ecommerce/web design ezine!
Click here to view article index
|
