Standard visual layout of web pages

Most web pages have a common "look and feel". A banner (corporate logo) and site-wide navigation bar are placed at the top of the page with section navigation links in the left column. The main content of the page is placed in the middle area. Additional reading or advertisements can be placed next to the main text in a right column and a footer area at the bottom of the page repeats the top-level links.

Basic layout of a web page
Typical layout for a standard web page

Although there is no definitive research proving that the above structure is the most effective, there are some practical reasons why this design has become so popular. The top banner creates an identity that the user might remember and so use again. The top navigation bar shows that there is more content available on the site that could be worth exploring. The main content is centrally placed so that the main heading and introductory text are within the users initial focus. The central column format means that the main text has a line length short enough to be easy to follow on the screen. The left-hand sub-content navigation bar is always visible, even if the user has a small screen, so other information relevant to the page content is easy to find. The right-hand column is less important and might be out of view so it can be safely ignored. The bottom navigation bar saves the user having to scroll back to the top of the page to continue using the site.

Note that you do not have to follow the above layout design in order to create an accessible web site. You may want to make your site "stand out from the crowd". This is perfectly acceptable, so long as you keep the design consistent throughout the site! Once the user has become used to your special design it is very confusing if a different layout suddenly appears.

Consistency of layout

Whichever style of layout you use, it is important to maintain a consitent style throughout the site. Your visitors want to find your information, not spend time learning how to manage new page layouts. Once a visitor becomes familiar with where the navigation buttons are they expect them to always be in the same place. This makes site navigation "intuitive".

Confusing layouts


Consistent layout

If you have different sections of your site that you want to distingush from each other this can be done by using colours or headings rather than changing the overall layout.