Web Design Layout Principles
Transcript of Web Design Layout Principles
8/8/2019 Web Design Layout Principles
http://slidepdf.com/reader/full/web-design-layout-principles 1/5
b Design Layout Principles file:///C:/weblog/Web%20Design%20Layout%20Principles.htm
f 5 07/05/2007 12:14 PM
Web Design Layout Principles
Why are most web pages designed the way they are?
Many web page
look very similar.Why?
The reason why so many web pages look similar may to some
extent be because people copy each other's layout. But more
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 theNew York Timesarticle pages
Look at a New York Times article published on the web on the
17 December 2002 as shown below. Why is the page split into
three main columns, with the main article in the middle
column?
8/8/2019 Web Design Layout Principles
http://slidepdf.com/reader/full/web-design-layout-principles 2/5
b Design Layout Principles file:///C:/weblog/Web%20Design%20Layout%20Principles.htm
f 5 07/05/2007 12:14 PM
Left column,usually containsnavigation tools.
Advertisement inside themain text column tomaximize attentiongrabbing.
Main text in a broader middle column, 59-80character positions per line.
Right column, containsadditional information of uwhen reading the main tex
How the NewYork TimesArticle 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 cansee 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 cramminglots 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 Lengthand 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
8/8/2019 Web Design Layout Principles
http://slidepdf.com/reader/full/web-design-layout-principles 3/5
b Design Layout Principles file:///C:/weblog/Web%20Design%20Layout%20Principles.htm
f 5 07/05/2007 12:14 PM
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:
People give their web browsers wide windows, to avoid
horizontal scrolling.
a.
Web browsers have a rather large default font size, to get
reasonable number of characters with such wide web
browser windows.
b.
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.
c.
How the YahooHome Page isStructured
Look at the Yahoo Home Page. This page, as it looked like on 21
September 2001, is shown below with some added bullets and
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.
8/8/2019 Web Design Layout Principles
http://slidepdf.com/reader/full/web-design-layout-principles 4/5
b Design Layout Principles file:///C:/weblog/Web%20Design%20Layout%20Principles.htm
f 5 07/05/2007 12:14 PM
4. Tree Structurewith 3-14arcs/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
8/8/2019 Web Design Layout Principles
http://slidepdf.com/reader/full/web-design-layout-principles 5/5
b 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 seemsto 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.