Web Design Layout Principles

Many web page look very similar. Why?

Structure of the New York Times article pages

Look at a New York Times article as shown below. Why is the page split into three main columns, with the main article in the middle column?

How the New York Times Article Page is Structured

Most web pages have a common structure. Usually three or four columns, the main text in the middle column, navigation info in the left column, additional reading connected to the main text in 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?

(Note: This is design for dextop and most full-capacity portable computers. Designing for mobile phones and tablets with small screens is different. It is possible for a web site to automatically check if a request comes from such terminals, and provide different layout when a request for a web page comes from such a small-scren terminal.)

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 Columns

Thirdly, it is well known that people can read text fastest if the 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 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:

1. People give their web browsers wide windows, to avoid horizontal scrolling.
2. Web browsers have a rather large default font size, to get reasonable number of characters with such wide web browser windows.
3. 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.

4. Tree Structure with 3-14 arcs/node

On top of the Yahoo page above, I have added black arcs and bullets to show the main structure within the page. Note that 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 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