Just how do I get this
much discussed CONSISTENCY?
How to Manage Web Sites
How do you remember
which element you used for section headings?
Style Guides provide the
key to creating a well designed web site
This philosophy, above all others,
drives good design.
"The principle of least
Focus on your message
Consistent images and layouts within
each page and throughout your entire site.
Keep it simple.
Simplicity is the foundation of
Don't clutter your pages.
Keep your pages short and to the
Introduce other pages to explore
Avoid excessive jargon and acronyms
and use simple direct language.
Reduce complexity whenever possible.
Keep the information content high.
Make each word, graphic and link
Make sure your information is
well ordered and well organized.
Use links, table of contents,
indices, and button bars to provide natural navigation between pages.
Order these sensibly.
Match buttons or link order to the
way readers should approach the site.
Keep information reliable and
Update pages as needed.
Outdated information casts shadows
on the entire site.
Keep links, as well as data,
Design against confusion.
Do not provide a
"previous" arrow for the first of a sequence of pages or a
"next" for the last.
Only provide those links and options
which make sense.
Well-designed title bars and
headlines let readers know where they are in your site.
Colon-separated text provides
Feedback prevents readers from
getting lost within a site.
Provide escape routes.
Always provide return links to the
section introduction and home page.
A reader who selects a wrong link
should never be "trapped."
Be redundant, but not overly redundant.
Where appropriate, use both text and
images to allow for audiences who cannot see images, who choose not to see
images or who need the text to explain the images.
Use redundancy to accommodate
physical, experiential and linguistic differences among your readers.
Demand the reader's attention judiciously.
Use blinking text, marquees and
animated GIFs with great caution and only for good reasons.
Use video, sounds and color
sparingly and meaningfully.
Avoid unimplemented links.
If necessary, include links but
provide style hints that the link is not active.
Keep links meaningful.
Avoid using "here" or
"this" for links.
Instead, turn the description into
Avoid excessive and unnecessary links.
A page with too many links
detracts from, rather than contributes to, the flow of the document.
Do not expect your reader to
follow every offered link.
Limit choices to those links which
add to your presentation.
Place clarifications after link
Add organizational information after
Readers familiar with the page skip
unnecessary details while permitting new readers to access this information.
Use headlines judiciously.
Avoid overwhelming readers with
Use white space effectively.
Do not clutter pages. Blockquotes,
cellpaddings and other HTML tags can add vital white space to HTML documents.
Select readable fonts.
Keep your reader's vision
limitations in mind.
Unless introducing information of
earth-shattering importance, never ever blink. Blinking messages provide
Don't forget graphic design
Remember balance, girding and
proportion when laying out page text.
Backgrounds and Foregrounds
Use sensible background patterns.
Avoid patterns which obscure or
Contrast foreground and background
Select colors which provide clear
Keep images small.
Help image compression routines by
including fewer patterns, gradients and textures in your images.
When possible, use thumbnails.
If your site is image intensive,
provide condensed low-resolution images that load quickly and give readers the
choice to view them at full resolution.
Blend GIF images into the
background with transparency.
The GIF89a standard supports image
The following two images are
identical. The color white in the second image has been set transparent and
blends without borders into the blue background.
Keep images meaningful.
Make each image count in your Web
Use images which are immediately
apparent to users and which match other page elements.
Use preformatted text (the pre
container) and a fixed-width font to create forms with aligned fields.
Use left-side checkboxes and radio
These selection elements align
better when placed to the left of text.
No matter how honored you are to
be part of the "Top 16% of Websites" or "Cool Blue-Themed Site
of the Day", be judicious when including these banners, buttons and
advertisements for other sites.
Awards rarely add content to your
site and often detract from a tight page presentation.
Date your documents.
For time-sensitive pages, add a
"last revision" line at the very bottom of your document.
Remember to use month names and not
numbers. Depending on country of origin, 7-2-95 might mean either February 7th
or July 2nd.
Select a Theme.
Before starting a page design,
select a theme.
This theme influences the
decisions that follow.
Consider a variety of
Each choice points in a
different direction and gives a different spin to presentation.
Design a color chart that will guide
the project "look".
Select colors and textures that
complement each other and provide a good range of color hues and tie to the
Do not use too many colors. As a
rule of thumb, limit yourself to five plus or minus two colors.
Image fonts complement your theme
and color choices and are not limited to browser display fonts.
Fonts can be whimsical, serious,
frilly, and plain.
Select fonts carefully. Choose those
that look good at different resolutions and support bolding and italics.
Create a rectangular block to form
the structure of your buttons, and, perhaps, your banner.
Most important, blocks act as
Keep an area open to write and draw
Design a banner.
Banners can mimic the buttons block
or might pick up similar themes.
Design a horizontal rule.
If desired, you can create an
alternative to the HTML horizontal rules.
Custom rules must match the page
Either pick up the colors and page
style in your rule or logically fit the rule into the overall design.
Design custom bullets.
Another alternative element is the
Custom bullets like custom rules
must match the design.
Design a custom mailbox.
A third alternative element is the
Rather than use a stock image, why
not integrate the mailbox into the page theme?
Define HTML font colors.
Select HTML colors from this design
Each HTML color should fill a
particular role such as section headline, content text and expository text.
Style guides canonize page style.
A well-defined guide to text and
paragraph style supports the creation of consistent pages.
Guides provide rules to create
each part of a Web page with uniform page details.
Presentation detail might include
font face, size, color, indentation and alignment.
Text plays many roles in a Web page.
Text which introduces a section
should appear distinct from that of text which demonstrates examples or inserts
a tangential note into the page.
The specifics of these details
should be documented and collected into a style guide.
What roles will text play in your
The first stage of creating a
style guide is to detail each role played by text in your Web pages.
These roles might include
call-out notes, etc.
Try to list, and design for, as
many roles as possible but be flexible. Many roles will not be discovered
until page development is underway.
Create templates for each text
Provide reusable outlines
Standardize the look and feel of a
Templates make it possible to create
and edit web page material quickly and accurately.
Test the templates before freezing
Create test pages.
If necessary, fill in page text
with nonsense such as "blah blah blah".
Test pages will give a much better
understanding of how the style guide elements work together than designing
"in your head".
Keep adjusting the templates until
you are pleased with the presentation.
Test each style element to make
sure they work with each other and do not clash.
Once committed to a style
guide, be faithful.
Do not change styles after the
style guide has been frozen.
Add templates for additional
Never change any template that has
already been used.
If changes must be made, all
pages must be updated to the new standard.
Design is an important part of
web page construction
Color and elements chosen on a
page influence the readability and appeal of a site.
Style guides assure consistent
Build templates for each text
role and element.
Create your own unique style.
Test styles before commitment.
Once committed, do not
More advanced versions of
Internet Explorer and Netscape allow the use of Cascading Style Sheets which
solves the problem of consistency with a style file that loads to each
sheet. Next class we will look at this solution to achieve that consistent
Sodun, Eric and Valqui,
Kelly. HTML TemplateMASTER CD. Charles River Media, 2000.