Previous Tip  |  Next Tip  |  Design Tips   | [Bill's Home]

Let's assume that we start with the following WWW page:


TIP 1. Add a strong banner to your page, and a home button graphic at the top left-hand side.

TIP 2. Provide a horizontal menu with quick jumps. Do not create pull-down menu options from these, as most users dislike this approach.

See above

The page is okay, and the menu system on the right hand side is useful (as it is a drop down menu system), but it looks a bit messy. So let's tidy up the menu system, and organise the information on the areas into small rectangular text boxes:

TIP 3. Provide graphical elements for the page, but do not make them too large. In the past graphical elements were used in place of text, but improved text layout has helped improve the quality of text. There is no real substitute for text within a graphic.

TIP 4. Provide a limiting of the menu options by inserting the menu elements into a table which has the default cell spacing. The change the colour of the table cells so that it contrasts against the background colour of the table.

Quick links

Element 1
Element 2
Element 3
Element 4

 

Finally we can add a blue background, and sharpen the graphics, to give:


TIP 5. Use SWF output to produce crisp graphics, and set the background colour of the Flash content to match the background colour of the WWW page.

If you want to see how useful this is, look at the following. One is done as text, and the other with a SWF output:

and with text:

Quick ways to enhance a WWW page

 

TIP 6. Contrast your site with a dark colour with light text, and vice-versa. Normally if the background is dark, you will need to make the text bold, so that it can stand out from the background.

This is an example of some text.

The following shows the contrast between the developed pages:

From these layouts it is easy to see what works, and what doesn't.

TIP 7. Embed as many of the changable properities of the WWW page into the CSS style sheet. In the WWW pages given above the only real difference is between the style sheets, which I have embedded with:

<LINK href="styles.css" type=text/css rel=stylesheet>

or

<LINK href="styles_blue.css" type=text/css rel=stylesheet>

This gives the main differences. For example the <P> style is defined as:

P {font: 10pt Verdana, Arial, Helvetica, sans-serif; clip: rect( ); margin-right: 8px; margin-left: 8px;left: auto; text-align: justify}

whereas in the blue version it is:

P {font: 10pt Verdana, Arial, Helvetica, sans-serif; clip: rect( ); margin-right: 8px; margin-left: 8px; left: auto; color: #FFFFFF}

where the only difference is that the font colour is now white, and there is no justification.