Multi-column layouts for web pages

What is a multi-column layout? Why are multi-column layouts popular? How many columns can you use? Sample 2-column site Should the content be on the right or the left in a 2-column layout? 3-column layout How users read screens

Next page

What is a multi-column layout?

You're looking at one! This screen has 2 columns:

• menu down the side.
• content (you're reading it now) in the rest of the screen.

I'm not talking about columns within tables like the browser statistics you saw earlier.
This topic is about dividing the whole browser window vertically into major functional groups of elements.

Why are multi-column layouts popular?

Almost all sites and almost all pages use multi-column layouts.

One reason they're popular is because they're popular! Users prefer familiar layouts to learning new ones.

Multi-column layouts compensate for the fact that screens are the wrong shape:

• People prefer lines of text to be at most 6 inches (15 cm) wide. Most screens will display much wider lines of text.
• Using a separate column for things like menus reduces the width of the main content area to a comfortable size for scanning / reading without wasting space.

How many columns can you use?

The key factor is the amount of information the user's screen can display:

• About 50% of desktop and laptop screens are set to to 800x600 pixels and almost all the rest are set to higher resolutions (so can display more).
  (Based on statistics in W3schools - 2nd section)
• Does your site need to cater for palm-top and mobile phone users?
  If so, do you intend to show them the same pages you show to desktop / laptop users?
  (is that possible?)

For display on an 800x600 screen:

• 2 columns and 3 columns are usually fine.
• 4 columns may be too much in most cases.

Page size is such an important subject that it's the next major section of this tutorial.

Sample 2-column site

You're looking at one! This is a simple example because there are no other groups of elements across the top or bottom.

Should the content be on the right or the left in a 2-column layout?

There's some debate about this.

In favour of links on the left and content on the right:

• It is the more common approach on the web.
• Users are familiar with it from other software, for example Windows Explorer shows the folders menu on the left and most email programs have their folders menus (inbox, outbox, sent mail, etc.) on the left.
• The links are closest to the most commonly used navigation tool, the Back button.

In favour of content on the left and links on the right:

• Users of European languages read from the left.
• The links are closest to the most commonly used screen element, the scroll bar.

Perhaps you should try looking at this course with the menu on the right and content on the left - just click the "Flip" button on the menu.
If you like the result, just carry on with the course.
Otherwise click the "Flip" button again then continue.

3-column layout

In a 3-column layout the most common type of arrangement is:

Something for you to think about:
Why do you think 3-column layouts generally have the content in the centre?

BBC Online's Weather Centre is a good example of a moderately complex 3-column layout, with additional features at the top and bottom of the page.

How users read screens

grokdotcom's “The Eyes Have It” explains the mechanics of screen-reading for Western users, and the implications for page structure.
It makes a subtle point which tilts the balance in favour of links on the left for Western users. Everyone, from any culture, instinctively scans the whole page then looks at the centre of the screen before reading anything. With links on the left and content on the right, the left edge of the content is nearer the centre of the screen so Western users can start reading with a minimum of additional eye movement.

The rules are different for other cultures, for example The Micro Trainer Newsletter shows the implications of how Japanese users scan a page (the big graphic takes a while to load, but it makes the point).

Next page