Planning your Website

This tutorial is now available in E-Book format. Find out more...

OK, so lets get started. Before we do anything, lets make a list of all the things that we'll need to look at and consider in order to build our site. Just like any other major undertaking, there are two basic steps, the plan and the execution. If we concentrate on developing a thorough plan, the execution will be effortless.

Before we Start

First and foremost, you'll need to define exactly why you want to build a website. I.e., what are you trying to accomplish? Are you building this site in order to create a web presence for your business, or will this website be your business? Is your site going to be an entertainment based website? Are you building your site in order to satisfy your own interest in web design and the internet? Whatever the reasons, you will need to (at least in your own mind) know exactly what they are. This will be extremely important in terms of evaluating your success and determining if your site meets your goals.

Organize the Contents

Second, before you ever touch a PC, you should design your site's layout. So many people jump right into the "doing" without ever thinking about what they are doing. A good way to start is simply by taking a pencil and pad of paper, and roughing out the hierarchical structure of your website. Start with a box for your home page on top, in the row below it, draw a box for every primary topic page, and in the row below that, a box for every subsidiary topic page. When you're done, you'll have something that looks like this:

Let's say, for example,  your site is about Pet Care.  Your home page would introduce your site, and develop your site's theme and purpose.   One way of laying out the site would be to set up the Primary Topic pages by type of pet, e.g., the first primary topic could be Dog Care, the second could be Cat Care, etc.  Each of the subsidiary topic pages could then provide categories of information for each pet type, e.g., under the Dog Care primary topic you could have Dog Breeding, Dog Health Tips, Dog Products, Dog diseases and their symptoms, etc. The number of subsidiary pages would of course depend on how deeply you wanted to elaborate on the main topic.  Some of your subsidiary pages may end up having their own set of subsidiary pages.  For example, the Dog diseases subsidiary page could have a page for each disease.  The important thing to keep in mind is that we want to maintain a hierarchical structure.  Doing this will help simplify some of the other aspects of website construction.  We'll get to those later.

Page Layout

Now that you have a first cut at the structure and layout of your site, you can start doing a rough design of your pages. This is where the fun begins because no single page can be designed in a vacuum. Each page must take into consideration the content of the rest of the pages on your site and the relationships between it and the remaining pages. I feel this is one of the most important considerations in designing your site. Shown below is one of my favorite page layouts. 

My primary reason for recommending this layout is because its basic design makes it relatively easy to set up and maintain.  And, it provides a format that accommodates all the attributes that make for a well designed and effective website. If however, you prefer a different layout, that is perfectly fine. 

Maintenance Considerations

Especially for novice designers, an often overlooked aspect of initial site design is ongoing maintenance.  It's only natural to focus on creating and launching your site, without giving any consideration to the ease with which subsequent revisions will be made.  However, by giving this area a little thought in the early stages, you'll be saving yourself time and headaches down the road.  

The important areas to consider are those that repeat from page to page.  This will typically be your navigation links, header info and footer info.  Unless you're using an HTML editor that allows you to define these areas once, and then supports global revision and automatic inclusion of these areas into each page of your site, you'll want to define an underlying structure that will allow for this same functionality.  

FrontPage accommodates this via themes.  If you're not using FrontPage, a good alternative is Perl scripts that are invoked via Server Side Includes (SSI).  Don't let Perl/SSI intimidate you. Writing simple Perl scripts that display HTML and then invoking them via SSI is a relatively simple and easy to learn concept.  Most of your script will be the exact same HTML that would reside on your page and you'll only need a couple of lines of Perl code.  The hardest part will be making sure that your hosting services supports SSI processing.  If you'd like additional info on setting up SSI's, just with the subject line "SSI Info" and I will send you a short overview and a sample Perl script.

Congratulations...

You have created a basic structure for your website.  You know what your site is about, you know how it's going to be laid out, and you know what the basic design of each page will be.  But don't start filling in the pages yet.  First, let's spend some time talking about the homepage, its purpose, and how to make it effective. 

Go to Homepage Effectiveness