Website Layout

Website Layout Basics

Designing a website require that you are familiar with basic website layout and structure. A website is in effect a folder or directory containing files (web pages, images, scripts) and other folders. Website layout is about creating a structure for these folders and files and how they are linked together.

Although the actual layout of a website varies considerably depending on size and use they all follow some basic principles. Websites consist generally of three types of Web pages – the home page, Intermediate pages and content pages.

This Three tier design is shown in website layout below:

The home page is the starting page of the Website and acts as the site guide it is the page presented to site visitors who do not specify a web page.

For small to medium size Websites the layout the general design will generally be two tier ( no intermediate layer) with larger websites ( >25 pages) having the three tier layout ( shown above). The pages are linked together in any order however; some general design rules should be observed:

• All pages should link back to the home page.
• Any page should be a maximum of two clicks away i.e. 2 links.
• Try not to have more than 20 links per page.
• Web Page names should be descriptive and contain keywords- see Web page names.
• Links to Internal pages should obey normal linking practise and have descriptive anchor text. I.e. keywords should be used in the link name.
• Every page should have at least one other page pointing to it (i.e and incoming link).-There are exceptions for doorway pages/landing pages used in Pay per click campaigns like Google Adwords.
• A link to a sitemap should be included on each page so as to aid user navigation and make indexing by search engines easier .
• A link to a contact page should be included on each page.

Using Folders or directories

Web pages can contain text, pictures, audio, video and scripts. Generally almost all web pages contain text and graphics, many also contain scripts. It is normal site design to divide the Website into folders as illustrated in figure 7. The scripts and graphics have their own folders and the content pages are directly under the root folder.

Folders make the web page organisation easier and can also be used for applying security for private areas, however; only create additional folders were necessary.

Designing Website Layout and Navigation

The layout of your website should enable the visitor to easily navigate your website. Website navigation for most websites consists of a navigation menu/bar at either the top, side or bottom with many having several navigation options.

 It is always a good idea to use plain text navigation menus when possible as it makes it easier for search engines. My recommended minimum menu options are:

• Home page-----------starting page
• contact--------------your contact details usually minimum email address
• site map------------List of the important web pages
• resources or links-----Links to other sites and useful resources.

The home page menu option should not be included on the home page itself.

Website Layout -Cascading Style Sheets and JavaScript

If you use Cascading Style Sheets and/or JavaScript  then always use external ones were possible. Using external ones makes them easier to change as only one page needs to be edited to effect the entire website and it is also much better for the search engines.

Related articles or Tutorials:

• Web Page Layout using tables
• Understanding Links
• Make a web page exercise 3- links
• Understanding Urls
• Understanding Domain Names
• Linking in html
• How Multiple Domain Hosting Works