|
Books Home
Style Guide Home
Table Of Contents
Book Excerpts
Part 1
Part 2
Part 3
Part 4
Part 5
Part 6
Book reviews
Buy The Book
|
|
The Web Content Style Guide:
Excerpt
Designing for the Web: Part 4
Web layout is simple layout
Newspaper design takes a uniform approach to layout because newspapers have found that
there are only a few ways to lay out content for maximum readability.
For starters, there are only two basic newspaper sizes: broadsheet and tabloid. If we
were to lay out the front pages of 10 of the world’s biggest-selling broadsheet
newspapers in a row, they would be almost identical from a layout point of view.
There would be a masthead, a lead story, several smaller stories, a large picture,
some features running across the top, and perhaps an ad near the bottom.
What makes newspapers different is not their layout, but rather the stories they cover
and how they write about their stories. The layout—as we can see from the four front
pages—is almost identical. The difference is in the content. So too should it be on a
website.
The Web is an even more limited design environment than a newspaper. It’s harder to
read from a screen than from paper. The average screen page is much smaller than a
newspaper page.
In theory, you can have audio, video, and animation, but bandwidth restrictions
severely limit these multimedia options. Within this limited layout environment, a
small number of layout conventions are emerging.
Those of you who were around at the beginning of the Web will have noticed a strange
thing. You were told that the Web would change everything and that the Web was
constantly changing. But as the years have passed, the Web has become increasingly the
same from a design and layout point of view.
Take background design. As the Web went through its first flush of youth, background
design tended to look like sixties’ psychedelic. Text sat on every color and
‘wallpaper’ under the sun. White text on a black background was a favorite of the art
school.
Branding experts felt that their logos should be embossed on every page. You had green
text to give an environmentalist feel. Red text in the middle of a paragraph gave
emphasis. If the website sold cars you read gray text on a blue steering wheel
background. It was great stuff—not!
All this experimentation might have been fun for the designer, but it was hell for the
reader. The unalterable reality is that the eye finds it easiest to read black text on
a white background.
Small quantities of text are okay with different designs, but if you want someone to
read more than 300 words, give it to them black on white. That lesson was
learned—today, the vast majority of websites use black (or dark) type on white (or
light) background.
This is a CNN page. Black text on a
white background. Bold headings to draw attention. This page is easy to read.
Web design is conventional design
The fact that newspapers use a uniform layout approach does not make them the same.
Where text-based content is concerned, the style, uniqueness, and value is in the
words, not in any graphics that surround the words.
This is not to say that graphics have no role on the Web. They have, but it’s very
much a supporting role. They should enhance the presentation of content, and support
the navigation through that content.
Like newspaper design and layout, the Web is evolving a uniform style for design and
layout. Here is a sample of the web design conventions that are emerging:
- Global navigation: This
relates to a small selection of essential links that are presented on every page.
This global navigation begins with a link to ‘Home.’
- Masthead: This is the top-of
page area. It contains a logo on the left and a search box on the right or on the
left, directly underneath the logo. Mastheads are getting very slim to maximize the
amount of space for the presentation of content
- Three-column layout:
Designers have found that the optimal way to lay out the maximum quantity of content
and navigation with the maximum readability is the three-column approach. The left
column contains navigation, the middle recent content, the right features.
- Footer: Every page should
have a footer containing global navigation, contact details, copyright and privacy
links.
Microsoft is an example of a website that employs a slim masthead, with a global
navigation that begins with a “Home” link. The search is placed underneath the logo,
and the rest of the page employs a three-column layout approach.
Implementing the above design conventions is in no way a cop-out. There is an old
saying that geniuses steal, beggars borrow. The above conventions have been found to
work. Readers won’t look at your website and say, “ah, this is boring.” Rather,
they’ll react by feeling comfortable, feeling familiar, feeling that they know how to
navigate quickly.
Next: Part 5: Navigation and search are critical
Previous:
Part 3: Structure is boring, but it works
Part 1 - Part 2 -
Part 3 - Part 4 - Part 5 -
Part 6
The Web Content Style Guide
homepage
The Web Content Style Guide table of contents
The Web Content Style Guide book reviews
Buy The Web Content Style Guide
|
 |
Download a free copy of Chapter One: Writing
for the Web, from The Web Content Style Guide
Writing for the Web (PDF 219 KB)
 Get the free Adobe Acrobat Reader
Reviews for
The Web Content Style Guide
I
will certainly be recommending this book to others
By Malcolm Davison, CEO, Writing For The Web
"This comprehensive and authoritative overview of content management starts with
useful guidelines to writing and designing web material. If only most webmasters would heed the sound advice given here, then web surfing would be a much happier experience
for us all!
Web-Publishing With Ease
By Colin Ong, CEO, MR=MC Consulting, Singapore
"This book is an essential guide in helping people plan an
effective web-publishing presence through a simple A-Z format. The reader can use this
book as a good source of reference. On a personal note, the book has encouraged me to
rethink my portals' attractiveness to my target audience.
It's worth your time and money
By Phil Matous, CEO, Taylor Community Credit Union, Michigan, USA
"The first chapter alone is worth the price of the book. Great ideas on writing
for either traditional or web viewers. Easy to read and insightful."
Book reviews homepage
Buy The Web Content Style Guide
The Web has become increasingly
the same from a design and layout point of view.
The
unalterable reality is that the eye finds it easiest to read black text on a white
background.
Where
text-based content is concerned, the style, uniqueness, and value is in the words, not in
any graphics that surround the words.
There is an
old saying that geniuses steal, beggars borrow.
|
