            
|
The following design rules have been used to ensure a consistent
look and feel throughout the TeleScapes web site. Drawn from a wide variety of
sources, it is hoped they provide a simple style guide to web design.
Site Strategy
Provide users with a simple structure of web
site in both graphical (site map) and text (site contents) form.
Ensure that each page exhibits it's own
context within the whole site, and that the user is aware of where they are in relation to
the whole web site.
Plan the site in such a way as growth/change
is possible without visual interruption to users.
Support Netscape2.0/Internet Explorer2.0 or
higher.
Develop a file naming system and utilise
descriptive names.
Keep all common file types in common
directories (e.g. buttons in buttons directory).
Keep the number of site "layers"
to a maximum of three.
Plan the site by constructing a hierarchical
tree diagram to layout the proposed contents, and keep related information together.
Don't clutter the web site with distracting
or unrelated advertising e.g. "best viewed with".
Express dates in unambiguous format e.g. 02 December, 1997
Have a tangible reason for each section
within the web site.
Maintain an "updates" page for
site management as well as user convenience.
 Back to Top
HTML
Build to HTML 3.2 not a particular browser
to ensure cross browser compatibility.
Use lower case for all filenames and
extensions.
Write with search engines in mind.
Ensure the first paragraph of each page is as descriptive as possible.
- Avoid Frames because they are hard to bookmark, awkward to
print, and some browsers do not support them.
Back to Top
Page layout
Create a standard template to ensure
consistency of page layout, look and feel. Consider using tables to structure the
layout. Ensure adequate white space.
Make page titles as descriptive as possible
to make bookmarking meaningful and to assist search engines catalogue pages effectively.
Don't make pages too short or too long
(about one and a half screen lengths), and include an indication (line) at the bottom of
the page.
Keep pages narrow enough to be able to be
viewed by 640x480 resolution browsers.
Try to sort lists by category to make
browsing easier.
Break up text into paragraphs, but don't use
long paragraphs because they are difficult to read.
Include the last modification date on each
page.
Include a a [Feedback] button on each page.
Set the background to white, and use light
colours for margins.
Use a page headers to remind users where
they are in the web site, and for consistency use the same name as the HTML <TITLE>
tag.
On lengthy pages use a mini table of
contents to allow users to skip directly to the required section without having to scroll.
Back to Top
Fonts
Use true type fonts that every platform will
support (e.g. Arial), and preferably one without serif's.
If a special font (e.g. Hattenschweiler) is
required, create as a .gif file and embed as an image.
Keep the number of fonts used on any one
page to a minimum.
Use default colours.
Back to Top
Navigation
Include [Next] and [Previous] navigation
buttons, as well as a link back to the home page on each page.
Put a title header on each page, and ensure
it is consistent with the HTML page title
Disable buttons that link to the same page
on that page
Include [Top] and [Bottom] buttons on each
page, and consider [Down] and [Up] on long pages
Make navigation explicit and intuitive -
don't make the user guess where to click.
Provide as much navigation control as
possible on each page to make navigation as direct and quick as possible.
Include navigation devices "Back to
Top" on large pages to avoid excessive scrolling.
Back to Top
Graphics
Keep the total size of images used per page
to less than 30k.
Use interlaced .gif 87a file type with 16
colours. These will load quicker and be supported by VGA browsers.
Use transparent backgrounds.
Don't link to images on other sites.
Avoid image maps them unless absolutely
necessary.
Include ALT tags and specify image size.
Re-use graphics rather than creating
slightly modified ones, because the users browsers downloads a file only once, and then
retrieves it from the cache.
Avoid dithering where possible
Back to Top
Links
When creating a hyperlink to another site
try to indicate why it is useful.
Keep validating links to ensure they are
current.
Include the the URL in parentheses after the
link so that the link is readable if someone prints the page.
Avoid multiple links on one page to the same
page/URL.
Include the actual email address on
formatted mailto links.
Back to Top
Web
References
The following online resources are useful for
web style and design:
Top Ten Mistakes in Web Design
by Jakob Nielsen
http://www.useit.com/alertbox/9605.html
SUN
Style Guide by Sun Microsystems
http://www.sun.com/styleguide
Yale Style Manual
by Yale University
http://info.med.yale.edu/caim/manual/contents.html
Search
Engine Watch by Calafia Consulting
http://www.searchenginewatch.com
The
Sev Wide Web by Sev
http://www.sev.com.au/
The Web Developer's Virtual Library
http://www.stars.com/index.html
|
