Another Style Guide, 1.1
style guide reflects lessons learnt about how to design a good website.
If this subject is of interest to you, continue reading or jump
directly to my opinion
about uncool &
top cool, the language
and flags issue, structure
or buttons and
visual feedback. You will also
find some Related Sites
at the end.
Guide 2.0 is currently being prepared and will include an entire
about links and one about printing. If you would like to be notified
when it goes on-line,
let us know at
free to link to this styleguide and let us know if you do.
- What is
your site about? Who do
you write for? And who are
you? Publish your answers by stating
site is intended for / of interest to" on your homepage.
- Concise and succinct is
important: Use short sentences in small paragraphs, or lists if the
topic can be
enumerated. Spare use of (brackets) and "quotes". Colours or italics
- First the most important,
every sentence. Mark the 2-3 most important words in every paragraph
and check if they are
at the beginning. Secondary information and fluffy introductions should
go to the end or
directly to Recycle Bin or /dev/null,
whichever you prefer... ;-)
- Write simple,
but don't think your
visitors are idiots. Tell your story or provide accurate information
about the topic.
There is enough Because it's Cool and You
just Have to Have it
- Short pages
look lighter and load
faster. Split long texts in small, discrete chunks of information. Even
short enough from the beginning so that it does not need to be split.
- All major information and links
should be visible from the homepage
scrolling. Think about if you have more than one 'official
entrances' with published
Always remember that a visitor could get to any of your pages first,
without passing the
entrances, for example when coming from a search engine.
Soon and Working
on It messages are mostly uncool.
Either it's there or it isn't. Announcements of pages or features sure
to appear on a
given date are okay, though.
- Top uncool: Broken
links! Please check your links from time to
time. Another thing: Spell
check your stuff, especially if you are
non-native English speaker.
- Top cool and simply the
keyword & trigger
for many people
surfing the web: FREE
applicable to your site, provide such a link on every page.
- KISS = Keep It Simple, Stupid!
another factor: Even though many have at least basic
understanding of English, most
non-native speakers will greatly appreciate it if you provide
non-English sites, always provide a short "About this site" as English
most common denominator for now. See the ESPERANTO link below for an
to the global language issue.
- I recommend not
using the flag
of a certain country as icon to a specific language. My country,
Switzerland, has four
languages (German, French, Italian and Rheto-Romance) and on many sites
I have to click on
Germany's, France's or Italy's flag to get a version in my language.
Switzerland is just
an example, think about South America and Spain's flag for a more
global one. Let us
know at firstname.lastname@example.org
if you have any
ideas for better language icons!
07/03/98 means March 7 to some, and July 3 to others, 7-March-1998
is clear to everybody and even Year-2000 safe. ;-) Provide
information in all common
units if you write about meter & feet and the like.
Structure is fundamental for every site.
a well-balanced and generally
rather shallow than deep
hierarchical tree. The directory
and filenames should reflect
the logical structure
of a site.
users will not stay onsite if it takes more than three clicks to access
they need. Generally, you will not
need more than two nested
levels with 3 to maximal 7 items per level. Usability
research says that many people will stop reading
options after they see 4
or 5 distinct choices.
- Share the
clear idea you now have
of your site with your visitor: Where am I? Where can I go from here?
Where did I come
from? Think about which of the following Supplemental
Navigation Systems (SNS) make sense on your
site: Navigation Bar, Site
Map/Directory, Table of Contents, Index, Search Engine and Next
& Previous buttons.
Navigation Bar on the top or left lists major
sections of your site
and should be global & static. A Table of Contents
is local & dynamic and
lists the headings of one document, which could be split across several
files. A Site
Map reflects the structure of your entire site, or the top
levels if nesting is too
deep. An Index lists clickable keywords of your
site, offering the user another
form of overview about what you have to offer. Adobe's site has a good
Index. Finally, a Search
Engine asks the user to type in the keyword he is searching
- Back & Forward
and Next & Previous
buttons are distinct! The first is
provided by the browser for the "casual" flow of the current visit, the
is for the fixed logical flow between your pages. Ideally, there
"Next" & "Previous" everywhere to allow a user to leaf through your site as in a
printed book, for
those who want.
- Users at first don't
read, they scan.
If you mention a keyword that is not of interest, your new visitor is
gone. High quality
content written in good style is one thing, making it easy to find and
look nice is
about a good page pattern and correctly used icons. Spare use of
- Colour comes without extra charge
in web publishing, so use it! You know you should not
overuse colours, but why not giving the headings
and good-looking colour coding?
- Good graphical design
is an art
related to but embracing far more than just websites. Don't expect to
become a master over
a clear document
which states what the page is about. Search Engines give higher
priority to keywords in
titles than in the body. Use '-' for a reverse hierarchy, ending with
the (short) name of
your site; e.g. use 'Details - KISSfp' instead 'Details
Additionally, consider using META
name="keywords" & "description" in the HEAD section.
- Clearly mark which
graphic elements are links that a user can click
graphic elements, the links. Visual
feed-back with Hover buttons is one possibility.
We underline text in my
buttons to create consistency
links: underlined = clickable, always!
aspect of visual feedback is the fact that if you click on a graphical
button to get to a certain page, that same button should appear
different on that page.
The button should not be clickable anymore and have a different look,
for example the text
could be printed in bold now.
clickable e-mail address
and last modified date
goes at the end of every page!
The date is an important context information, especially, if you say
"in half a year".
An e-mail address should be on all commercial sites as well: The web is
a highly interactive media!
Providing some feedback page
somewhere on your site is okay, but not enough. Most people look for
this at the end of every
NEVER open a new browsing
It simply confuses average users who will ask "Why can I not go BACK
average user does not understand about more than
one browser window and
forget many people use old
browser & old computers. Don't
forget many people around the globe
have slow Internet
connections & slow computers. Don't
forget some people use text-only
browsers or turn
off images. Don't forget visually impaired
users who use special tools to work on a
computer; see reference below.
is of great help to all of the above mentioned if you put a meaningful ALT tag in
your IMG and write an explicit image
caption below the image. Give your images meaningful
filenames. Make your site look good on 640x480
with 16 colours as well.
The best solution to satisfy everybody if you use "heavy"
design is to provide a text-only
of every page.
don't use frames.
more than one scrolling region is simply too much. In case they are
just used to implement
common borders, the following reasons still seem to make frames a bad
idea, but can
theoretically all be solved:
feedback is lost if the location line does not give
the URL of
the actual document. Boomarking does not work
wrong coded external links can lead to a mess on
can be confusing when scrolling by keys, because many users don't
understand about focus and nothing happens when
pressing Page Down.|
get confused when they should chose how to print frames.|
are more old browsers than you think. These visitors will just see
if you don't provide an extra frameless version.|
confusion with the 'Back' button (old browsers only?)|
In case all
the above points can be assured by very strict design or an
automatic tool, I think frames are nice, because they allow common
borders to remain
visible while scrolling down the main document.
people say that every page should be short enough so that scrolling is never
needed. IBM's Site uses this approach.
I believe scrolling two or even three printed pages is better, and
preferable over needing
to click 'Next' and 'Previous'
too many times.
- Text & page width
difficult issue: Many sites now use a fixed table to limit width as it
is more easily
readable; just look at your newspaper. Ideally, 40 to 60 characters or
10 to 12 words
should go on a line. Free width (floating) allows users to set their
windows as they like,
uses screen space more efficiently and works better for printing.
Multi-column text could
be a solution. Until then, I suggest not to limit width but maybe use
<blockquote> indention. Well, in fact I am hesitating.
are interested in ways to improve on-line documents in order to make
real alternative to oil-based toner on flattened dead trees, printed
paper. We have
definitely not yet reach this point yet.|
An area of
interest is to use
scripting or Java to tackle known problems such as printing, offline
& navigation, dynamic multi-column text (if there is space)
etc. If you have any links
for these topics or are working on this as well, let
us know at email@example.com.
|Recommended Style Guides
|More Information on Specific Topics
on Yahoo! lists sites about disabled / visually impaired users.|
an Accessibility Tester (Is your
site suited for people with disabilities?)|
alternative approach to the language issue.|
|Sample Sites of Discussed Techniques