Tuesday, July 16, 2024

Web Site Maintainability

Web Design Tutorials

As you design and developer your website, you become very familiar with the structure you use, the layout of the various pages, and the manner in which they are all tied together. Then, as time goes by, you add a little more here, a little more there, and sooner or later your small website has grown into something huge. The trouble is, after a while your memory of those early details fades; you forget what this section was for, what that page should be linked to, why these elements are here instead of there – now, when you make a small change, you run the risk of all sorts of things falling apart! You have entered the “Website Maintenance Nightmare” zone! Please do not let this happen to you or your website!

There are three golden rules to help avoid this nightmare: consistency, structure, and annotation.

Rules for Consistent Web Design

First, be consistent! If you use one method and style throughout your site, you will have only one method and style to remember (or to relearn!) This does not mean that everything has to look the same; Instead, it means that you should apply consistent styles and use a consistent method throughout. For example, instead of applying font styles to each piece of text on your pages, you would be more certain of consistency by applying a style sheet – or CSS – to all your pages and keeping your styles in it. If you do not know how to do that and are just starting out, do not worry for now – just remember it is something you are going to want to do.

Learn more about cascading style sheets and web development.

Tips for Website Structure

The structure of a site is usually determined by the nature of its content. The trick here is to create a folder (directory) structure that matches the content structure. For example, if you are creating a photo album and have different page sets for each year, keep the sets in folders named for each year. Remember to use consistent names such as:

/1999/family and /2000/family

and you will be able to match your site navigation to your folder structure. It is also a good idea to ensure that you do not crowd out a directory. Keeping certain files separated is helpful. For example, if you use Server Side Includes (SSI) to help with consistency keep all your “include” files in a folder named ssi – be sure to include the path in references to them! I also like to keep images in a folder of their own, along with the pages that reference them. For example, the folder /John contains pages about John, and the folder /John/Pics contains the images used in those pages. Jane’s pages and pictures would be in /Jane and /Jane/Pics.

Read more about HTML and web development.

What is Website Annotation?

Annotation is simply the use of comments. Don’t get caught in the trap of thinking that comments only explain your methods to strangers for them to copy. The “stranger” who will learn from the comments is most likely going to be you, a little while after you wrote the comments when you have forgotten why and how you accomplished something but now need to change it. Trust me, you will thank yourself for leaving notes for yourself! This holds especially true for programming in such languages as JavaScript, PHP and Perl. Things have a tendency to wind up with names that seem brilliantly enlightening when
written, and virtually meaningless a few months later!

If some of these notions do not make much sense to you at this point, do not be concerned. Try to keep the concepts in mind though: consistency, structure, and annotation – you will be your own best friend if you do!

Having read all of this series through to this point, you have completed the Non-Technical Introduction and are now ready to start coding!  We hope that you now feel more comfortable with the notion of developing a website and that the concepts are no longer alien to you. The next step is to start on our Primers. I wish you the best of luck and hope that you enjoy your website development experiences and
find it to be a satisfying venture.

Read: Intro to JavaScript Template Engines

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles