Structuring A Website Page Template

When designing a large-scale website, usually more than five pages, you may find it easier to build and manage your website by using a template to structure your web pages. You should build regions which you can place each pages's content on. Most websites are now build using content management systems and these use templates to display page content when it's pulled from the databases they are stored in. When designing a template you should consider having the following regions.

Header

Headers are usually at the top of the page and are the usual place holders for the logo or site name as well as a contact number and a site-search facility. The header section usually contains the primary menu which usually sits just under the primary header content (logo, contact number etc).

Content

After the header usually comes the main content area. Depending on the complexity of the site it is usually best to include a "content top" and "content bottom" regions. These are very convenient if you wish to add specific features (e.g. image slideshow or calendar). to certain pages and would like to ensure consistency of its placement.

Footer

The bottom of your webpage should have your footer. Footers are often used to include key contact information, copyright disclaimers, website credits (i.e. which company designed and developed the website), quick links to terms & conditions, site map and privacy policy.

Side Panels

It is usually best practice to include a sidebar or two in your website template. Sidebars are often used to provide the user with teasers of other features of the website and to break the main content up so it does not have to take up the entire width of the site. There are three common positions for sidebars:

• Split - one sidebar on the left of the main content, one on the right


• Both left - both sidebars positioned on the left-side of the main content


• Both right - both sidebars positioned on the right-side of the main content

Side panels are used to populate lots of content on a website and the content of each sidebar usually varies from one webpage to another. Examples of content to typically go into sidebars are secondary navigation, news feeds, key contact information, popular products (on e-commerce sites), calendars and special offers.

Wrappers

Wrappers are used to provide an extra style-able element that template regions can sit in. It is best practice to create each of the above regions within its own relevantly-named wrapper. For example, the footer region would sit inside a wrapper called footer-wrapper, the header would sit inside a region called header-wrapper. Each of these wrappers should be set to a width of 100% to allow yourself to create a website with infinity backgrounds.

Width

It is best practice to set the width of your website to 960px to ensure all content is visible on all screen resolutions. As larger screens are becoming more compatible web designers are starting to set the content to a width of 960px with a scalable background image or pattern.

Advice provided by Nick Hatton of Empire Solutions providing expert Web Design Liverpool and IT support.