Website Structure

Like most things, building a web site will be much easier if you plan ahead. To just start off building and adding without a plan usually means redeveloping your entire site as its outgrows its lack of structure. A little extra work in the beginning will save you a lot of work in the end. Follow this 3-step plan and you'll be off to a great start.

Step 1

Think about all the things you want your site to have and seperate them into specific content related categories. For example, if your site were to have Recipes, Kitchen Hints, Family Photos and Family Personal pages; the Recipes and Kitchen Hints would fall into one category and the Family items would fall into another category. From these categories you'll build a basic structure for your site. Jot down all the categories you plan to have.

Step 2

After jotting down your categories draw a simple diagram of the layout. It will help you organize your site's navigation structure. Using the sample site mentioned above, I've drawn an example site plan:

As you can see in the chart the Index Page has links to the jumpstation level pages, which are the Food Links and Family Links category pages. Think of jumpstations as topical sub-index pages into your specific content areas. The jumpstation level pages are linked back to the Index Page, to each other and downward to the individual content pages relative to that jumpstation. As you add new pages, you only need to add a link to the new page from it's respective jumpstation category. If you add an entirely new content section, you only need to create the jumpstation and tie it to the other jumpstations, keeping the boring work to a minimum.

In addition to the links from a jumpstation to its content pages, you can optionally link between the pages of a particular category, as indicated by the red lines on the bottom of the chart. I wouldn't put a link to every page in a certain category on every page within that category or you're defeating the purpose of the jumpstation. Just have a "next page" link if you do it, and when you add a new page of content you only need to update the last page in the chain with the "next page" link.

An important point to remember is that at the bottom of your navigation structure you DO NOT want only the "next" link in a chain of pages. If someone doesn't want to continue with a particular chain of pages they need an easy way to choose content from another area of your site or they'll go elsewhere. Besides, no one likes to be led around by the nose without other options.

Step 3

To make your site easy to develop and be consistent it helps to make a basic page template before starting. With a template you can just add the content and not have to continually code whole pages.

For this site my template has all the basic html commands a document needs, the basic two-column structure, and the SSI code to insert the top and bottom navigation systems and the right-hand column content that is common to every page. To make a new page I just fill in the stuff in this column and save it with a new name. When I want to change the navigation structure or right-hand column content, I only have to update one file for each to have that change reflected on my whole site.

Instructions for using SSI can be found in the members site. You may want to read about the benefits of becoming an Inner Circle member.

Your navigation structure can make or break your site. All my pages have the same structure as seen at the top or bottom of this page. Each page has the links to the Home page and all the jumpstations. You can go from one area of my site to a completely different area with one click from any page. Now that's navigating made easy! If you're welcoming contact from your visitors then include your contact link on each page.

That's it. Follow this plan and you'll have a site that's easy to grow and develop and your guests will enjoy the thought you've put into it.

Back | Web Design Tutorials Index

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]