Web Design Layout Principles file:///C:/weblog/Web%20Design%20Layout%20Principles.

htm

Web Design Layout Principles

Why are most web pages designed the way they are?

Many web page The reason why so many web pages look similar may to some
look very similar. extent be because people copy each other's layout. But more
Why? important is that there are simple, sound reasons for the
common way in which web page layout is structured. The
common structure does not happen by chance, it is based on
simple, easy-to-understand layout principles.

Structure of the Look at a New York Times article published on the web on the
New York Times 17 December 2002 as shown below. Why is the page split into
article pages three main columns, with the main article in the middle
column?

1 of 5 07/05/2007 12:14 PM
Web Design Layout Principles file:///C:/weblog/Web%20Design%20Layout%20Principles.htm

Left column, Advertisement inside the Main text in a broader middle column, 59-80 Right column, contains
usually contains main text column to character positions per line. additional information of use
navigation tools. maximize attention when reading the main text.
grabbing.

How the New Most web pages have a common structure. Usually three or four
York Times columns, the main text in the middle column, navigation info in
Article Page is the left column, additional reading connected to the main text in
Structured the right column. Why is this structure so common? As you can
see from the picture above, the New York Times article has a
width of 780 pixels. Why do so many web pages have a similar
structure?

1. Screen Width The explanation is rather simple.

Note first, that it is very cumbersome, for a web page reader, to

have to scroll horizontally to view a web page. Because of this,
most people give their web browser a wide enough window, so
that most web pages can be shown without horizontal scrolling.
This means that most people give their browsers a main
viewing window which is at least 780 pixels wide. A few people
with small screens instead set their main viewing window at 640
pixels.

Second, it is known that many visitors to a web site do not go

beyond the first page. Therefore, web site designers want to
cram as much information as possible into a single page. So,
they usually design their web pages for viewing with a width of
at least 780 or 640 pixels, sometimes a little more. When the
width is larger than this, they often put
not-absolutely-necessary information in the rightmost column.
Note that a person with a 640 pixel wide window can read the
left and middle columns in the New York Times example above
without any need for horizontal scrolling.

2. Font Size Now, how can you cram a lot of information into a fixed-size
page? By using small-size fonts. The main text in the NY Times
article uses font size "-1", one step smaller than the web
browser setting. Most of the text in the margins uses font size
"-2" combined with the Arial font, which is good for cramming
lots of text into a small space and still keeping it readable. The
choice of a serif font for the main article is because this gives
the page a newspaper like feeling, and also serif fonts are
easier on the eye when reading large texts. Many other web
pages, which do not have any large main article, do not use
serif fonts at all.
3. Line Length
and Number of Thirdly, it is well known that people can read text fastest if the
Columns text has about 30-50 characters per line. More than 80
characters per line makes the text much more difficult to read.
This means that with a small font size, and browser windows
set to 700 or more pixels wide, the text has to be split into
columns, usually about three or four columns. But you cannot,
as in a newspaper printed on paper, let users read one column

2 of 5 07/05/2007 12:14 PM
Web Design Layout Principles file:///C:/weblog/Web%20Design%20Layout%20Principles.htm

down, and then continue at the top of the next column,

because this requires scrolling up and down for the reader to
switch between columns.

Many web pages thus have the main text in a wider middle
column, and uses the two border columns for indexes,
commands and advertisements. The reader of the main text in
the middle column will then not need to scroll up and down.

Many people have their web browsers set to a default font size
of 16pt, and this is the default setting of major browsers at
installation. This default setting gives best readability for text
which is not split into columns. Such texts need a large font
size, otherwise there would be much too many characters per
line. But since most major web pages limit the line length in
various ways, they can also use relative fonts smaller than the
default setting of the web browsers.

In summary:

a. People give their web browsers wide windows, to avoid

horizontal scrolling.
b. Web browsers have a rather large default font size, to get
reasonable number of characters with such wide web
browser windows.
c. But major web pages reduce the line length by using
columns, and they can then use a font smaller than the
default setting of the browser.

How the Yahoo Look at the Yahoo Home Page. This page, as it looked like on 21
Home Page is September 2001, is shown below with some added bullets and
Structured lines to show the structure of the page. Note that the page uses
many columns of small text in the Arial font to cram a
maximum of content into a given space and still making the
text readable.

3 of 5 07/05/2007 12:14 PM
Web Design Layout Principles file:///C:/weblog/Web%20Design%20Layout%20Principles.htm

4. Tree Structure On top of the Yahoo page above, I have added black arcs and
with 3-14 bullets to show the main structure within the page. Note that
arcs/node the page is organized into a tree structure, where each node of
the tree has between 3 and 14 outgoing arcs. The information
objects are usually either about 200 pixels wide, or contain all
their information on a single line. The content of many web
pages have, like the Yahoo example above, a tree structure
with multiple subbranches. Why?

If there was no structure, the reader would have to read

through all the text to find what the reader is looking for. With a
tree structure, a reader can rapidly scan the tree, deciding at

4 of 5 07/05/2007 12:14 PM
Web Design Layout Principles file:///C:/weblog/Web%20Design%20Layout%20Principles.htm

each node where to go on. Actually, with a fast processor, the

fastest search would be with a binary tree, with only one
incoming and two outgoing arcs from each node. However, the
human brain is not a fast processor, and each new node takes
some human effort to recognize, and a binary tree would have
more nodes from the top to the bottom of the tree. Thus,
around 3-14 arcs/node is probably what gives the lowest effort
for a human to traverse the tree. The human mind also seems
to be designed to easiest handle about 3-7 items at a time.

Conclusions Many web designers probably have not done an analysis like I
have done above. But they still design pages according to
similar principles. What I have tried to show is that there is no
magic in this, that simple logical reasoning can explain why web
pages look like they do!

By Jacob Palme, Stockholm University and KTH Technical University.

5 of 5 07/05/2007 12:14 PM