Page layout templates
Your site will be made up of different layout templates each with a different page structure. Your home page will have a different page structure to a content page or a page which sells your goods online.
You may be tempted to be creative and unique with your page structure, but remember that your site is usually only part of a visitor’s internet session. The more standard you make your web page structure the more usable it will be. To make your web site stand out it is better to make your graphics creative and unique rather than your structure!
Most sites are made up of the following sections:
Site identifier
Every page of your website must remind users that they are at your site. This is particularly important for the home page. The user who has just arrived at your site needs to quickly get his bearings and know that this is the correct site with the correct content. The site identifier is often placed in a banner at the top of the page. Pay attention to the height of this area; if it is too tall, your content will be too low on the screen.
Navigation bar
The primary navigation bar is the main way visitors will access pages in your site. For more information on structuring your site see “Planning your website”. So your navigation structure should be determined by the information hierarchy of the site. Hopefully, you have organized your information logically before trying to lay it out visually.
Once you know what your navigation structure is, you can find the best place for it. The choice is basically between top and side navigation bars—or possibly both.
Advantages of a top navigation bar:
- Can be easily seen
- Leaves the full screen width for content
- Can tie in with the site identifier
Advantages of a side navigation bar:
- Supports as many navigation items as needed
- Allows for longer item descriptions
- Can integrate several layers of navigation as visitors delve deeper into the site
Larger sites often need to use both the top and side for navigation.
Main content
The main content area — the page title, headings, text, and images—is what your visitors actually come to see. Be sure to give this area the thought that it deserves, rather than assembling the other areas and giving the leftover space to your content.
Two content concerns are readability and flexibility. Readability is best when any given content column is between 100 and 600 pixels wide. Basically, visitors are uncomfortable reading extremely short or extremely long line lengths. So, a main content area of 350 to 600 pixels total allows for flexible template options such as one-, two-, or even three-column layouts.
Secondary content
On a home page this area can often be used to highlight a specific area of the site or you want to draw attention to a recent announcements or news article. On interior pages it can be used to draw attention to related links or related downloads. This is often called information clustering. Secondary content area can also be used for advertising.
Additional Information
Information about the page content includes an accessibility statement, copyright statement, site credit, security or privacy links. This information, while necessary, will not be important to most of your visitors. A small footer is usually the best place for it.