Planning for your Website
Developing a successful Website takes lots of planning. The initial concept must be developed. The content needs to be collected, categorized, edited and structured. An overall theme or style is determined and then the actual graphic, html and application construction occurs with a variety of results. Plans must be made for testing, redesign and functional errors (bugs) and how to handle all of this in order to meet a deadline.

Whether you’ve worked on a small personal site or a large corporate venture you’ve experienced some level of Website development planning. The more planning that occurs often results in a better Website.

However, there is one aspect of the planning process that often gets overlooked: Planning for Maintenance. Too often very little thought is given to how a Website is to be most effectively maintained. Whether it’s layout modifications or content updates this is generally the last thing on the minds of anyone developing a Website. Yet, this is quite often what separates the good Websites from the bad and not-so-good sites.

One misconception among the larger sites is that a Content Management System has eliminated the need for this sort of planning. The thought is that since the content is being managed by a CMS then that application will handle all of the necessary maintenance issues. While this may be true to some extent it doesn’t hold true totally because poorly planned sites create problems that the CMS can’t fix or that often result in more work for the CMS or actual errors in the system.

On a smaller site maintenance planning is critical. If it takes 2-3 hours to make some site-wide modifications then those modifications are likely to be delayed or neglected due to normal time constraints. Who has the time to waste on a 2-3 hour task that isn’t “critical” to the site operation? Quite often the answer is no one.

Real World Example
Let’s look at a real world example at how some proper planning would have greatly improved a very large Website (some elements have been changed for effect):

Company A has a 5000-8000 page Website. After some time it’s realized that element B on the Website is rendering incorrectly in Browser C. Browser C makes up 30% of the site traffic so this is a concern to Company A. The call goes out to make the modification but the developers realize that element B is embedded into the HTML of every page in the Website. Uh-oh.

The problem becomes very clear, very quickly. A non-content element of the site needs changing but is unique to every page so basically every page must be edited to correct the error. This is poor planning. Most people know that static elements should never be embedded but this still does not mean it doesn’t happen. Also, even some dynamic content can remain outside of the embedded site if planned for properly. Many hours were spent correcting the error for Company A.

How to Plan for Maintenance
There are many ways to plan for site maintenance. Some of the most basic and common sense methods are detailed below. The more advanced types of site maintenance are for another article.

1. Server Side Includes:
These are simple, easy and fun to set up. Basically an SSI is some code that sits in a file separate from the actual page that uses it and is used when that page is served. For example, if I put <?php include ('site.html'); ?> inside of a .php page then that page will call up the site.html file and insert that code wherever the above SSI is inserted.

One great use for SSI is creating headers and footers for pages. While a complete header/footer is not always the best fit for a site, often some variations of this will help streamline site maintenance.

How to do it?
To create an SSI you need to check with your server first. Some servers don’t support SSI and some do with specific requirements. For example, many servers require the page pulling in the SSI to be named .shtml or .shtm instead of the traditional .html

If you are using PHP, ASP or ColdFusion then just keep the normal file naming conventions. To include SSI use something like this:
Server Side Includes
<!--#include virtual=’site.html’-->
ASP
<!--#include file=’site.html’-->
PHP
<?php include ('site.html'); ?>
ColdFusion
<cfinclude template=’site.html’>

The code on the “site.html” file should be the actual code needed and not contain the body, head and title tags.

2. Use CSS and use it wisely.
Few sites still use the font tag but if some still do then they should stop immediately. Using a font tag with a CSS class is less bad but it’s still not good. The best way to use CSS for those familiar with table layout is to just use them for all of the presentation aspects of the site. Don’t use <table background=”black”> but instead use <table class=”storytablebackground”>. For those not committed to table layout then using styles to layout a site has many advantages. WIRED has converted it’s entire site to CSS and is able to make substantial site-wide modifications in under five minutes. Amazing. For more info on CSS read Cascading Style Sheets: Separating Content from Presentation or visit Meyer Web.

3. JavaScript includes.
Don’t fill the head of the page up with lines and lines of JavaScript. Instead use a js include to pull that code in from a separate file. This is the same as an SSI but it’s JavaScript instead of HTML. To include a .js file simply code the JavaScript and save it as a javascript.js file. Name it javascript or whatever. Do NOT put the <Script> tag on this page though. It’s not necessary.

Next, insert this code <SCRIPT SRC="js.js"></SCRIPT> into the Head of your page. That’s all there is to it. Now when something goes wrong with the script all is fixed quickly by modifying one file instead of many.

4. Site Root Relative Links
SRRL is an often overlooked feature of planning for maintenance. It’s not always a good idea to use these for smaller sites that may not get a lot of file movements but for a large site that has files moving from directory to directory it’s absolutely necessary. Many hours of updating can be saved by using SRRL.

SRRL looks like this <a href="/root directory/directory/filename.html"> where Document relative looks like this <a href="../../directory/filename.html">. Sometimes absolute links <a href=”http://www.yoursite.com/file.html”> must be used instead of either and in this case there is little that can be done when massive changes need to be made.

5. Comment Tags
These little JavaScript tags can be a life saver. They are constructed like this <!-- here is any text desired --> and will not display any of the content between the <!-- --> tags. This “invisible” text is great to insert notations and tips about the code and where elements go and more importantly why they go there. Looking back on a site 6 months later can be a much easier process with clearly worded comment tags.

Application
These are just a few of the ways that a site can properly be planned for quick maintenance. The trick is to identify which elements can benefit from what time saving method. Naming conventions is also a great way to save time down the road. Instead of naming files and images random numbers assign a date (11_09_02) along with a short description of the item (dog.jpg). This will help immensely when looking for specific items in the future.

Dated folders are great too for larger sites with frequently updated material. Basically begin thinking about how the site will be maintained and think proactively and much time will be saved as the site begins to need regular maintenance.

///