|
Guidelines
are only suggestions. Use what works for you and in the
appropriate context and see your web development documentation
for details where needed.
· While
the systems can get complex underneath they must still appear
simple on the surface. The best designs are ones that are not
noticed and do not detract from the message of the site.
· Background
color that doesn’t obscure any text; most successful sites use a
white background and black text.
· Put
product pricing or links to pricing in multiple locations.
· Keep
notes on accounts, user ids, passwords, font sizes, PhotoShop
effect settings, filter settings, etc. so you don’t forget when
you go back and maintain a site.
· Keep
all original graphics files for headers, menus, animations, etc.
· Do
not use borders on images or most tables.
· Display
size of all downloads such as large images, documents, java
applets, executables, etc.
· Don’t
use alt tags on visually unimportant images to assist text
readers and visually impaired users.
· Use
standard fonts like Arial or Helvetica. If using other fonts
use them sparingly as graphics.
· Use
a complementary color scheme. Use Dreamweaver suggestions for
complementary color schemes for text and backgrounds, buy a
color wheel or a book on color theory.
· Use
a 595 or 590 page width using tables centered (or even smaller
to support WebTV). Use 535 pixel widths for pages intended to
be printed.
· Do
not make people scan left to right with the bottom scroll bar
with wide pages.
· If
you design on a Macintosh, test your pages using a PC. Test
with as many browsers as possible (at least use Netscape and
Internet Explorer).
· Use
long and short pages in the appropriate context. Sometimes you
hear that you should never have more than 1 page of text (this
is more of a purist viewpoint). Some content like articles,
pages designed to be printed, etc. should not be broken into
multiple pages. Some marketers swear by long sales letters and
it seems to work. Just remember to know your audience and use
each design as needed. Internet savvy users can easily deal
with long pages, beginners generally can’t.
· Spell
check all text and read back for grammar. Consider hiring a
professional editor to edit your most important pages.
· Use
WIDTH, HEIGHT tags on images to make the text portion of pages
appear faster in the browser. Use keywords in your URL links and
domain names to potentially improve search engine rankings.
· Use
a 1x1 pixel hidden image file on each page to hide indexable
links to other pages to improve search engine spidering of the
site.
· Add
a search CGI engine to each large site (optional).
· Put
URL in all Word/PDF documents and bottom of each web page. If
someone prints a page, let them know where it came from.
· Put
contact information on every page (website URL, 800#, e-mail
address, postal address).
· Use
image slicing on large images with animated parts, only animate
the portions that actually change. This will improve download
time.
· All
pages should use appropriate templates to remain consistent.
· Total
size of all graphics/components on a page should be 30kb or less
optimally (with exceptions for important content pages)
. Most pages
should load in 15 seconds on a 28.8 modem. With exceptions for
high content pages.
· Specify
the exact pixel width of all tables.
· Add
a short descriptive title on each page header (depending on
site).
· Use
meta keyword, description, robot & author tags.
· Add
credit card logos, pricing & ordering to front page, if a
commercial site depending on client. Let people know it is a
commercial website and remove all obstacles from the purchase
process.
· Create
short titles consistent across the site (if someone bookmarks a
page this will make it a meaningful description).
· Optimize
graphics with Fireworks or ImageReady to improve download time.
· Use
transparent .GIF format for graphics others can use on their
site. Your graphics will then look better on other sites that
use colored backgrounds.
· Text:
· Body,
Arial, font size 2 or 3 (don’t use sizes too small for main text
for people w/ poor eyesight). Small text sizes can also be too
small to read on Macs.
· Headers,
Arial bold, font size 2 or 3
· Use
tables to control text positioning & white space.
· Do
not underline text if it is not a hyperlink
·
Page header
text should be in <h1> tags at top of page in the navigation
bar. Search engines may rank text in <h1> tags higher.
· Don’t
upper case text; it’s harder to read and is the Internet
equivalent of shouting.
· Study
the “Web Style Guide” for page and text layout and design
guidelines.
· Keep
blocks of text within 9 to 12 words long. It is easier on the
eye than text that goes across an entire page.
· Check
spelling and grammar. Try writing in a way that results in an
8th grade reading level or lower when grammar
checking with Microsoft Word’s spell checker. Use short words
in place of long words. It makes for easier reading for
everyone.
|