Page layout templates

Your site could be made up of different layout templates each with a different page structure. Your home page may have a different page structure to a content page or a page which sells your goods online.

You may want us 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 or drop down menus.

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