Content may be king, but the layout of a webpage is critical to user experience. This page explains how to display a standard page of content in the best possible way.

Layout

The layout of a webpage is the actual positioning of all of a page's components including the menus, content, search box and pictures. Layout is not the same as design. Design is of course important but is the aesthetic look and feel of a page and should come after the layout is finalised.

If you have a career in web you are either familiar with wireframes or will come across them at some stage in the future. Wireframes are nothing more than a visual representation of a website's layout using lines and blocks to show where everything goes, a bit like a colour the blocks painting.

Once created, wireframes are used by designers to fill in the spaces for graphics, web developers to place all of the technical parts of the page and content producers to place the content. You probably get the message - wireframes are simple and useful. Even if you are setting up a website for fun you should at least sketch out a quick wireframe to help you by acting as a guide and reference.

Consistency with other websites

A big mistake people make with websites is to assume visitors want the site to be different from anything else on the internet to help it stand out. In fact, difference in layout can be infuriating for people surfing around the web, forcing them to waste time figuring out how to use a website rather than reading/watching the content.

It's important that you instil a few core restraints onto your site in terms of the layout of a page. Using a similar layout to other websites may sound boring, but it will reap huge rewards in the long run. Don't be afraid of finding a very popular website and then using the same layout.

As the owner of a website you want people to be able to use your website easily and reach content quickly - which is your ultimate goal. Being consistent with other websites in terms of the positioning of menus and content will help your visitors, give them a better overall experience and reduce the likelihood of closing the browser in annoyance. Once you have confirmed the layout, you can by all means go wild with the content and design.

Page consistency

The core layout of your website should be used on every page to ensure ease of use, tidiness and to make your website look professional. The core layout elements are:

• Main site menu
• Section menus
• Search box
• Content
• Breadcrumb trail
• Bottom menu
• Login / logout form if you have this function

The elements should be on every page of your website in exactly the same position. Content is a notable exception because there are certain pages such as the home page, section landing pages and forums that force content to have a different layout. These exceptions do need to attempt to reflect the layout of the other pages and the position of the other elements should still be the same.  

Page size and scalability

Screen sizes and resolutions are now much greater than they used to be with only 14% of people still using a 800 x 600 pixel screen resolution in January 2007 (source: W3Schools). It is now over a year later so this number would have decreased and we estimate that over 90% of the UK population now has a screen resolution of 1,024 pixels in width or higher.

The most important factor is to make your website scalable so that no matter the screen size, your website will shrink or stretch to fit. This is easier said than done when you want to have a nice design but scalability is more important than design.

In reality you will likely choose a mix of fixed size and scalability and our recommendation is to create a website layout of 1,024 pixels wide but ensure it can be shrunk to at least 800 pixels wide without too much loss in usability.

Perfect page layout

There will always be debate over the best website layout and no doubt the perceived best will continue to change as more options become available and more research is carried out. However, by looking across the internet there is clearly one layout that currently fits all. You've already seen it above and it comes highly recommended that you use this as a basis for your site:

Always have the main menu running horizontally across the top of a website linking to no more than 8 – 10 main sections. Content always needs to go in the middle of a page with images related to content sitting within this area. The breadcrumb trail - showing where a user is on the site - should go directly above the content and, if necessary, be replicated directly beneath the content too.

The top menu area should also include the search box. The secondary menu for the categories within a section should be on the left hand side, while extras like the login box, a shopping basket or related links should go on the right hand side. Pages for privacy, terms and conditions and contact will usually be found in the bottom menu at the foot of the page.

You can experiment with the position of certain items to find the best for your site, of course. For instance, some websites place the login in the top menu and remove menu areas altogether when they aren't needed to create more space for content. Even then, the vast majority of popular websites do adhere to this layout at their core though.

Core layout examples

Below is a selection of website examples that use the above layout at their core for content pages. All have small differences, so see what you think does and doesn't work and keep an eye out for the core layout behind the content and design:

www.amazon.co.uk	news.bbc.co.uk
www.nhs.uk	www.hmv.co.uk