Yet Another Style Guide, 1.1

This 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.

Style Guide 2.0 is currently being prepared and will include an entire chapter about links and one about printing. If you would like to be notified when it goes on-line, let us know at style@vorburger.ch. Feel free to link to this styleguide and let us know if you do.

General Considerations

1. What is your site about? Who do you write for? And who are you? Publish your answers by stating  "This site is intended for / of interest to" on your homepage.
    
2. Concise and succinct is most important: Use short sentences in small paragraphs, or lists if the topic can be enumerated. Spare use of (brackets) and "quotes". Colours or italics might be alternatives.
    
3. First  the most important, in 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... ;-)
    
4. 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 advertisement already.
    
5. Short pages look lighter and load faster. Split long texts in small, discrete chunks of information. Even better, write short enough from the beginning so that it does not need to be split.
    
6. All major information and links should be visible from the homepage without scrolling. Think about if you have more than one 'official entrances' with published URL. 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.
    
7. Coming 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.
    
8. 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.
    
9. Top cool and simply the keyword & trigger for many people surfing the web: FREE Download. If applicable to your site, provide such a link on every page.
    
10. KISS = Keep It Simple, Stupid!

Language and Culture

1. Language is another factor: Even though many have at least basic understanding of English, most non-native speakers will greatly appreciate it if you provide translations. For non-English sites, always provide a short "About this site" as English is the most common denominator for now. See the ESPERANTO link below for an alternative approach to the global language issue.
    
2. 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 style@vorburger.ch if you have any ideas for better language icons!
    
3. Culture-independent style: While 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

1. Logical Structure is fundamental for every site. Keep a well-balanced and generally rather shallow than deep hierarchical tree. The directory structure and filenames should reflect the logical structure of a site.
    
2. The three-click rule states that users will not stay onsite if it takes more than three clicks to access the information 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.
    
3. 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.
    
4. A 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 for.
    
5. Back & Forward and Next & Previous buttons are distinct! The first is provided by the browser for the "casual" flow of the current visit, the second is for the fixed logical flow between your pages. Ideally, there should  be "Next" & "Previous" everywhere to allow a user to leaf through your site as in a printed book, for those who want.

Graphical Design

1. 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 another.
    
2. Think about a good page pattern and correctly used icons. Spare use of animations.
    
3. Colour comes without extra charge in web publishing, so use it! You know you should not overuse colours, but why not giving the headings a consistent and good-looking colour coding?
    
4. Good graphical design is an art related to but embracing far more than just websites. Don't expect to become a master over night.

Technical Aspects

1. Choose a clear document <TITLE> 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 about KISSfp'. Additionally, consider using META name="keywords" & "description" in the HEAD section.
    
2. Clearly mark which graphic elements are links that a user can click on. Distinguish between decorative and functional graphic elements, the links. Visual feed-back with Hover buttons is one possibility. We underline text in my buttons to create consistency with textual links: underlined = clickable, always!
    
3. Another 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.
    
4. A 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 something like "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 page.
    
5. Do NEVER open a new browsing window! It simply confuses average users who will ask "Why can I not go BACK now?" The average user does not understand about more than one browser window and the taskbar.
    
6. Don't 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.
    
7. It 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" graphic-intensive design is to provide a text-only alternative of every page.

Controversial points

1. We don't use frames. Conceptually, 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:

   	Important feedback is lost if the location line does not give the URL of the actual document. Boomarking does not work neither.
   	Possible wrong coded external links can lead to a mess on the screen.
   	Frames can be confusing when scrolling by keys, because many users don't understand about focus and nothing happens when pressing Page Down.
   	Users get confused when they should chose how to print frames.
   	There are more old browsers than you think. These visitors will just see nothing if you don't provide an extra frameless version.
   	possible 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.

2. Some 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.
    
3. Text & page width is a 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 some <blockquote> indention. Well, in fact I am hesitating.

Related Sites

	Recommended Style Guides Yale Web Style Guide, excellent, pretty long and not 100% up to date (CSS) www.useit.com, Usable Information Technology, by Jakob Nielsen The 50 rules of business Netiquette, on c|net
	More Information on Specific Topics "Accessibility" on Yahoo! lists sites about disabled / visually impaired users. Bobby, an Accessibility Tester (Is your site suited for people with disabilities?) ESPERANTO suggests an alternative approach to the language issue.
	Sample Sites of Discussed Techniques www.ibm.com, a site where you never need to scroll. I personally don't like it. www.adobe.com has an excellent Index.