Download Web Design Guidelines

Web Design Guidelines
Web Design Guidelines
Clarity is your number one
concern.
The user should have a clear idea of
what information you are trying to
present.
The user should be able to quickly
navigate to the desired portion of your
site.
Web Design Guidelines
Consistency is the most important
coding principle.
The style of the code should be the
same throughout the site (not just the
current document).
Web Design Guidelines
Readability should be high.
Others should be able to look at your code
and quickly understand what you are doing.
Remember that you are not the only one who
will be updating the pages you create.
Use carriage returns and tabs to build a
hierarchy and to separate portions sections of
the page, but don't get carried away with
this; you can have too much white space.
Web Design Guidelines
Provide clear, consistent navigation
aids.
On each and every page, tell your users
where they are and how to get to where they
want to go. Put your organization's name on
every page. Avoid excessive menu levels; try
to make every document available within one
or two mouse clicks. Make the home page
available by a single mouse click. Avoid words
like "back," "return," and "home" because
they are potentially confusing to novice Web
users and depend on how the user found
your page (your menus, or a search engine?)
Web Design Guidelines
Provide clear, consistent navigation
aids.
Build a consistent look and feel for all the
pages on your site by repeating graphics,
fonts, colors, page layout, navigation, etc.
A consistent pattern is perceived as well
planned and increases viewer confidence in
the information provided. Establishing a
distinctive pattern that repeats throughout
your pages helps the viewer determine the
location and organization of information and
increases usage and legibility.
Web Design Guidelines
Content is king.
Answer users' questions, problems and
needs. Twirling logos and glitzy graphics
do not substitute for meaningful
information.
Web Design Guidelines
Proof your pages for proper
grammar and spelling.
Bad grammar and misspelled words
make users wonder if your information
is as sloppy as your English.
Web Design Guidelines
Encourage users to contact you, and
respond promptly when they do.
This can be a simple e-mail link or an
elaborate form. Provide a contact link on
every page, not just the home page. The link
could be to an individual e-mail, a generic
webmaster e-mail, or to a page that lists
everybody in your office. The latter two
options are easier to maintain if your
webmaster changes.
Web Design Guidelines
The Load Time Should Be Kept Minimal.
Design pages that load quickly. Slow speed is
users' top complaint about the Internet. Users
also hate to scroll, so put the "meat" in the first
one or two screens.
Less than 40k total file size per page, this
includes all images. You can check load time and
much more at Web Site Garage.
Make a quick-load or text only version of all
graphic-intensive pages.
Warn visitors of pages that are large and offer
an alternative if possible.
Web Design Guidelines
Never Say UNDER CONSTRUCTION!
If it is under construction it shouldn't be
public.
Instead, announce release dates of new
material. This improves traffic to your
site.
Web Design Guidelines
Balance
Your goal is to achieve an optimal
balance between content and visual
appeal. Consider shape, color, and
contrast of page elements. Use similar
shapes and complimenting colors for
elements such as banners, bullets,
buttons, or graphic icons.
Web Design Guidelines
Simple Background
Because legibility is so important, a
simple background is best for text
pages. Tiled and patterned backgrounds
are very distracting and greatly reduce
the legibility of a page as well as
increasing the downloading time.
Web Design Guidelines
Less is best.
Always remember the basic rule: Less is
Best. Be as succinct as possible. Include
only important information and use
graphics, sounds, or video clips that
enhance the message.
Web Design Guidelines
Writing Style
Users skip around more when browsing
Web pages than they do when reading
print pages.
Text is harder to read on the screen
than on paper.
You need a more concise writing style:
short words, short sentences, short
paragraphs. More headings and lists.
Web Design Guidelines
No blinking text.
It is, in the opinion of most people,
annoying and should be avoided. Many
browsers no longer support this tag for
this reason.
Web Design Guidelines
Avoid Centered Text
Text is easiest to read when the left
margin is straight. Centering gives a
ragged left margin and thus is not as
legible as left justified text. Therefore,
centering text is to be avoided except
for short headings or titles.
Web Design Guidelines
Page Length
So viewers will not need to scroll a lot, try to
keep your pages to around 3 screens' worth
of information. This is equal to about two
letter-size pages or approximately 72 lines of
12 point Helvetica text. Assume that a screen
is 500 pixels by 480 pixels. Break up lengthier
pages into smaller linked pages. This creates
a modular design that will also make it easier
to add or update information at a later date.
Web Design Guidelines
Use Lists or Block Quotes
Text is most easily read when lines are no
longer than three inches. Because the width
of text blocks are controlled by the viewer's
window, one way for authors to limit line
length is to create lists in short phrases
instead of using full sentences. Another way
is to use the <Block Quote> code. This
indents the text on both the left and right
margins, reducing line width.
Web Design Guidelines
Graphics
Design graphics for 640 x 480 monitors and 256
colors.
The meaning of icons and buttons may not be
intuitively obvious to your users; supplement
them with text.
Supplement image maps with text navigation.
Use horizontal rules sparingly. They tend to
break up the page.
Web Design Guidelines
Graphics
Always use the "ALT" attribute on graphics, for
the benefit of those who browse with graphics
turned off and for those using a screen reader
or text-based browser.
To speed graphics loading, include the
"HEIGHT" and "WIDTH" attributes of your
graphics. If you need a large and a small
version of a graphic, make two versions; do not
use height and width to resize them on the fly.
Always test your pages with graphics loading
turned off.
Web Design Guidelines
Avoid animated GIF's.
They can be annoying, have higher load
times, and they can literally send some
people into seizures. However small,
occasional, well-planned, and tasteful
animations can enhance a rather boring
site.
Web Design Guidelines
Width of Graphics
The default width for most browsers is
about 500 pixels. By limiting the width
of any graphic material to less than 500
pixels, you are assured of your graphic
fitting onto most screens. Larger
graphics may be too wide for a
computer screen or unable to print on
letter-size paper without being cut off.
Web Design Guidelines
Color
For color compatibility across platforms,
always use the Web safe color palette.
If you change background and/or font colors,
make sure there is sufficient contrast for good
legibility.
Avoid white or light text against a dark
background. Browsers don't print the
background color, so the printout is
unreadable.
Consider the color blind and visually impaired
when setting colors.
Web Design Guidelines
Links
Think carefully before changing link colors.
Many users are strongly attuned to the
default blue and purple for links. If you do
change them, be consistent throughout the
whole site. Many Web sites at Colorado State,
including Cooperative Extension, use gold and
green.
If at all possible, avoid "click here" wording;
it's amateurish.
Web Design Guidelines
Links
If you link to commercial sites, include the
CSU disclaimer. Make sure you're not opening
yourself to demands from other commercial
sites for links to them as well.
Check your links regularly to make sure they
are still valid. Web pages frequently move or
disappear altogether. Bad links detract from
users' confidence in your site.
Web Design Guidelines
Java is Great in very few cases.
Only include applets when it is the best
solution for necessary content.
Get your idea approved before including
an applet.
Web Design Guidelines
Frames.
You should avoid the use of frames unless
you have a special purpose for them.
Frames can create complications with printing
that some users have difficulty managing.
Search engines have problems indexing
pages which require frames.
If you use frames, include the <NOFRAMES>
tag set with an alternative method of
navigating the site.
Web Design Guidelines
Tables
Used wisely, they can be useful for page
layout.
Screen readers and text-based browsers
read straight across the monitor. Plan
tables so they make sense when read
this way, or provide a non-table version
of the page.
Web Design Guidelines
Usability
Test your designs with several people
not involved in the design process,
including some target users.
Make sure they test it with a variety of
hardware, browsers and connections.
Web Design Guidelines
Search Engines
Use a short, descriptive TITLE tag. Search
engines display the first 60 to 70 characters.
Use META tags for description and/or
keywords. Some search engines display your
description (from 150 to 395 characters) if
you provide one, otherwise they construct
their own.
Write the first few paragraphs so they contain
keywords people are likely to use in searches.
Web Design Guidelines
Getting to the top of search engine results
Although the majority of search engines collect
information in the same way, it is the method of
how this information is used that makes each
search engine different.
1. Try to avoid using frames
2. Make good use of the basic hidden Meta-tags
3. Only use relevant words, avoid repeating them
too often
4. Try to place your keywords in the first 200
words of text.
Links
www.webstyleguide.com/index.html?/in
terface/interface.html
www.utexas.edu/learn/style