Style

Maintaining a consistent look and feel.

Conventions

Some things tend to be a de facto standard on web pages or are strongly recommended by the W3 committee or usability gurus. Unless there is a very important reason to do something different I try to follow the good advice and practice.

• Keep the pages consistent so that visitors recognise what site they are on and only need to learn one set of navigation methods.
• Put the main menu on the left and include smaller navigation menus where they are useful. On this site
  • Alphabetic buttons near the top for dialling deeper into a subsection
  • At the bottom of the page for where to go next
  • In a right click context menu for use anywhere
  • Conventional underlined hyperlinks to go to an appropriate page
• Links either look and work like buttons or are underlined
• Cursor pointer changes to a hand if something is clickable or a query if there is information underneath
• Text and background are contrasting colours and there is not a distracting graphic at the back
• Text is sans-serif and resizeable for myopic visitors
• Design for 800px X 600px window. No scrolling across the screen.

House Style

The style is controlled using a common template for all pages and by linking to Cascading Style Sheets.

These are the main features of the content text set by the template and style sheets.

• Maximum width 540 pixels
• Navy blue on a white background
• Verdana font (or Arial or any other sans-serif) with 1.5 line spacing.
• The text is resizable using View > Text Size

Locating the style

Special items and dynamic HTML are controlled using styles (changed using JavaScript).

Some styles work throughout the site in all of the sections. They are set in the "default.css" file. This file contains three different styles that depend on where the page is being presented.

1. Desktop PC style with all the headings, menus and links.This is the style that is used now. Reduce this window width to see what happens.
2. Mobile device style cut down for narrower screen dimensions. Desktop pages change to this appearance if you reduce the window width to under 800 pixels.This is the current style and it changes the navigation system to big buttons at the top of the page.
3. Printing style that saves ink by setting backgrounds to white, printing to black and hidding all the navigation menus and links as they are useless on a printed page!This is the current style that is used for printed pages and as seen in Print Preview.

Section specific styles are defined in the section style sheet file called "local.css". All sections have their own style for the content background that places the section specific identifying name up between the left main menu and the content. For this section the name is "DOCUMENTATION". The style puts an image in the background as follows:

#IDcontent { background-color:white;
background-image:url(graphics/bkgnd.gif);
background-position:0px 40px;
background-repeat:repeat-y;}

When a page uses a unique style the definition will be in the page head. This is often in conjunction with a bit of JavaScript to create a Dynamic HTML effect (DHTML). Sometimes it is used to over-rule the section style and impose a page specific style. The Megaphone pages have different sideways text identifiers for each original publication year.

If a style is only used for one element it can be defined in line which means it is put into the element's HTML tag. There are a number of reasons for doing this. The two main reasons on this site are:

• To over-rule all the other style definitions all the way up the cascade through head, local.css and default.css.
• As part of the DHTML. In other words, a bit of JavaScript will alter the style when the viewer does something or after a certain time/date or if some other condition is calculated.

These are links that will show you the default and local cascading style sheets. They should open immediately as this site has already downloaded them to your computer for use when interpreting the pages!