Design principles

The design principles has changed over the years.

Document type (DTD)

HTML, but has been XHTML during some years.

Visual design

A main color and complement colors are used. The colors are changed sometimes.

Information structure

• Use semantic coding. Instead of tag <b> = bold, the tag <strong> is used
• Formatting using tables should be avoided, but can of course be used for table-type information
• Use Information Mapping principles as much as possible

Style sheets

• Put as much formatting as possbile in cascading style sheets, CSS
• Use one main CSS and add other CSS to complement, when required

Database

The web site is based on fixed HTML, there is no database driven information, except for a small database for game results.

Web page titles

The web page titles usually show up in search results and are therefore important. The following principles are to be used:

• Simple, meaningful and clear
• Short, no more than 10 words
• Comma as normal delimiter and vertical line (pipe) as super-delimiter
• The most relevant information first with additional information at the end of the title
  Example: "Torpedo boat T121, photo album" instead of "Photo album of the torpedo boat T121"
• No duplicate web page titels

CSS auto-generated contents

The web site uses some auto-generated contents based on CSS. This keeps the semantic markup clean and compact. For examle, a link to a pdf-file is preceeded by a symbol "PDF". A link to a restricted page is marked up by attribute class="restricted" and is then preceeded by a symbol showing "PDF-with-padlock".

The following auto-generated symbols are used:

Symbol	Description	Used for
	PDF-file	Links <a> to PDF-files
	PDF-retricted	Links <a> to PDF-files that have attribute class="restricted".
	PDF-retricted	Links <a> to PDF-files that have attribute class="restricted".
	IMG-file	Links to image files (gif, jpg, png when they are within certain context
	Internal link	<a> that have attribute class="int-link", independent of file type.
	External links	<a> that have attribute class="ext-link", independent of file type.
	Film	Links <a> that have attribute class="film", independent of file type.

Photos

The photo albums are made up of 300 pixel wide images with integrated text in a 800 pixel wide table.

The following photo album principles are used: