Web Site Planning: Avoid Beginner Mistakes - Structure

[VelMurugan]

Plan Your Web Site 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 Removed 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.

[ganeshbala]

Horizontal and Vertical Web Site Navigation Menu/Bar - Which one to use?

A web site navigation bar/menu is a very important aspect of a web site. It actually decides the page design and layout. I follow a few basics principles in deciding whether to use a horizontal navigation bar or a vertical web site navigation menu system.

    * If the number of main links on the web site is less than 10 and they fit horizontally on a screen resolution of 800x600 pixels, I use a horizontal menu. Since the navigation menu is horizontal, and is followed by the main textual and graphical contents of the web page, it gives me a chance to place graphics and other web page design elements on either side.

    * If the number of main links on the web site and more than 15, then I put all these in a vertical navigation bar on the left side.

    * The contents (text or graphics) of the web site also dictate which navigation system I use. If most pages have a lot of content, then prefer to go in for a left-side vertical navigation menu system.

    * If the site has to employ dynamic JavaScript drop down menus, I prefer to use horizontal web site navigation because here the dynamic menu actually drops down rather than be displayed on the side of a vertical web site navigation menu.

    * Vertical web site navigation menus are also easy to update. If a site has 10 main links in a left-side vertical navigation system and the client decides (after about 6 months) that they want to add 5 more, we can simply expand the vertical menu without disrupting the design template. However, in case of a horizontal menu system, it would change the design template because the 10+5 = 15 links would surely flow to 2 lines creating two rows of links.


-----------------------------------------
Source : webdevelopersnotes

[ganeshbala]

The importance of sitemaps

Make it easy for your visitors. Provide them with all kinds of navigational help. If visitors are able to find information on your site quickly, they will surely come back. Sitemaps are a extended form of navigational aid wherein you display the web site structure with links to major sections and sub-sections.

Sitemaps need not be just a series of links in a tabular form. You can also provide details for each section and sub-section through descriptive text.

I've come across various kinds of sitemaps. Some developers display a sitemap in the form of a large image-map while some offer a plain HTML version, but the worse kind are those that do not have links. As you would guess, it's no use making a sitemap without links. So remember, to provide correct links and keep the sitemap well updated.