HTML and CSS Reference
In-Depth Information
Written Communication: Getting to the Point with Layout
Page layout is one of the most important aspects of Web design. A well-constructed page
layout naturally guides a reader's eyes to the most important information in the page. Use
the following principles to help your readers quickly get to the point:
•
Guide the eye.
Usability studies have shown that a reader's eye first lands in the top
center of the page, then scans to the left, and then to the right and down. Arrange your
page content so that the most important items are the first items a user sees.
•
Avoid clutter.
If a graphic or an icon is not conveying information or making the content
easier to read, remove it.
•
Avoid overcrowding.
Focus on a few key items that will be easy for readers to locate
while scanning the page, and separate these key areas from one another with ample
white space. Don't be afraid to move a topic to a different page if it makes the current
page easier to scan.
•
Make your information manageable.
It's easier for the brain to process information when
it's presented in smaller chunks. Break up long extended paragraphs into smaller para-
graphs or bulleted lists.
•
Use a grid.
Users find it easier to scan content when page elements are aligned verti-
cally and horizontally. Use a grid to help you line up your elements in a clear and consis-
tent way.
•
Cut down on the noise.
If you're thinking about using blinking text or a cute animated
icon,
don't
. The novelty of such features wears off very quickly and distracts users from
the valuable content in your page.
Always remember that your goal is to convey information to readers, and that an impor-
tant tool in achieving that is to make it as easy as possible for readers to find that informa-
tion. A thoughtfully constructed layout is a great aid to effective communication.
Floating Elements
The fi rst content you'll display in the Cycle Pathology home page is the navigation list for
the main topical areas of the site. Lists are displayed vertically by default, but Dan wants
this one displayed horizontally. One way to accomplish this is by fl oating each list item.
Setting a Float
Floating
an element takes that element out of the normal fl ow of the document and
positions it along the left or right edge of its containing element. Subsequent elements
that are not fl oated are then moved up to occupy the position previously occupied by
the fl oating element. Figure 4-18 shows a diagram of an element that is fl oated along the
right margin of the page body.
