Design Standards

Advertising
Animated GIF's
Background Colours
Background Images
Capitalisation
Flash
Font Type
Font Colour
Frames
Meta Data
PDF

Advertising

Swinburne Standard

Only advertising that relates to the teaching, research or administrative activities of the University are to be placed on its web servers.

Guidelines

Advertising in relation to vendors and commercial clients of Swinburne, government departments and agencies, schools and community organisations must not be placed on Swinburne servers.
Web publishers should be cautious when including advertising on their pages and be mindful of possible breaches of copyright, trademarks, and the National Competition Policy.
Web publishers may provide links to non Swinburne web sites.

Further Advice

For advice in relation to specific cases contact the Swinburne Web Manager, Andrew Normand.

Animated Gifs

Swinburne Standard

Not encouraged

Guidelines

Animated GIFs can liven up a page and draw the attention of users to particular pieces of information. They can also be extremely annoying to users if used indescriminantly.

Animating a GIF will raise its importance in the visual hierarchy of your web page. Be careful to ensure that it warrants this level of importance.

Tips

In order to reduce the filesize of an animated GIF, make sure that the filesizes of the source images are as small as possible.

Examples

Background Colours

Swinburne Standard

White backgrounds should be used to increase readability.

Guidelines

The background color of a page affects the legibility of text and images.

Publishers must be careful to ensure that there is sufficient contrast between text and background colours to ensure readaility. Tiled backgrounds should be used sparing as more often than not they result in pages which are extremely hard to read.

Tips

Choose your background colors from the 'browser safe' color palette. The browser safe, or web safe, color palette contains 216 colors which are common to both Mac and PC color palettes.

Examples

Good Contrast	Poor Contrast
All the things one has forgotten scream for help in dreams - Elias Canetti	All the things one has forgotten scream for help in dreams - Elias Canetti
All the things one has forgotten scream for help in dreams - Elias Canetti	All the things one has forgotten scream for help in dreams - Elias Canetti

Background Images

Swinburne Standard

Use with extreme care.

Guidelines

Most of the time background images result in pages which are extremely hard to read, especially when text is involved.

If you are going to use background images try to maximize the level of contrast between your text and the image.

Tips

A good way of increasing the contrast between you text and your background image is to process it in an image manipulation program such as Adobe Photoshop. If your text is black or dark, try increasing the brightness of the image. If your text is white or light, try decreasing the brightness.

Background images will tile on screen according to screen size. It may be better to set the image as the background of a table cell and then add text over the top of it.

Examples

How not to do it: too little contrast makes the page almost impossible to read.
How to do it: black text against brightness enhanced background.
How to do it: white text against brightness reduced background.

Capitalisation

Swinburne Standard

Use First Letter Capitalisation rather than WHOLE WORD CAPITALISATION.

Guidelines

Studies have shown that when we read, we do not recognise words by their individual letters, but rather by the word pattern as a whole.

Where whole word capitalisation is used, the word pattern is lost.

Tips

Change the capitalisation of your document in Microsoft Word before saving it as HTML.

Examples

Compare the top halves of the following sentences. Which is easier to read?

Flash

Swinburne Standard

Flash must only be used for non-essential and decorative design elements. Because of the limited ability of disabled users to access Flash content, it must not be used in a context which requires interactivity.

Legislation

The Disability Discrimination Act 1992 makes it unlawful to disciminate against a person in the provision of goods or services, or the making available of facilities, on the basis of their disability. This clearly extends to goods, services and facilities offered via the Internet.

HEREOC: World Wide Web Access: Disability Discrimination Act Advisory Notes

Version 3.2, August 2002

“Web designers should assume that most users with a disability will not have access to the most current version of software, or know how to use its advanced features.

As an example, work is currently underway to make Macromedia's Flash technology accessible to people who use screen-reading software. While some positive progress has been made, it will be a considerable time before most users will benefit, and even then, Flash may be accessible only in certain specific circumstances. It is certainly wrong for web designers to assume that improvements in the accessibility of a technology mean that it can be used indiscriminately without regard for the principles of accessible web design.”

Tips

Try and use vector based graphics rather than raster based graphics when creating your Flash animations as this will dramatically reduce the filesize.

Raster graphics are based on a matrix of individual pixels and are resolution dependant, i.e. they will appear more jagged as their scale is increased.

Vector graphics are based on the mathematical calculation of lines between specific points and result in smooth lines which are resolution independent, i.e. they will always appear the same regardless of scale.

The alt gif created by Flash can be edited or replaced in order display the information shown in the animation.

Font Type

Swinburne Standard

Swinburne's Font Standards are defined in by a set of standard stylesheets which are applied to web page content. The stylesheets are available here.

Guidelines

Studies on screen based publication agree that text sizes should remain simple and consistant throughout the main body of text. In this way a visual hierachy can be established to aid the cognitive process.

By maintaining consistant font sizes throughout the Swinburne site, users will be able to assess the information on pages faster and more effectively.

Text within the Swinburne Templates will have the correct font type and size applied through our style sheet. No font sizes will need to be defined in dreamweaver or netscape composer.

Font Colour

Swinburne Standard

Swinburne's Font Standards are defined in by a set of standard stylesheets which are applied to web page content. The stylesheets are available here.

Guidelines

The color of text affects its legibility. No matter what font color you are using, it is important that there is sufficient contrast between background color and text color.

Tips

Nil

Examples

Good Contrast	Poor Contrast
All the things one has forgotten scream for help in dreams - Elias Canetti	All the things one has forgotten scream for help in dreams - Elias Canetti
All the things one has forgotten scream for help in dreams - Elias Canetti	All the things one has forgotten scream for help in dreams - Elias Canetti

Frames

Swinburne Standard

Usage Not Permitted

Guidelines

Frames are normally difficult to implement and maintain. With modern HTML authoring tools such as Dreamwaever, it is probably easier to use templates and tables to ensure design consistency.

Meta Data

Swinburne Standard

Should be included in all pages.

Guidelines

Whenever somebody uses a search engine such as Google or Yahoo to search for information on the web, the search engine tries to determine which pages are most relevant to the search terms. These pages will be listed first in the search results.

Meta tags although not as useful as they use to be, can still be one of the criteria that search engines use to rank pages is the information contained in the meta tags of pages under the categories of KEYWORDS and DESCRIPTION in the HTML of the document. The description in particular are sometimes used as the text that appears under your search results and as such can be an important factor in visitors deciding whether they should click through to your website. For more information on Search Engine Optimisation please review our SEO guide

Tips

Insert parts of phrases as well as whole phrases in the keyword area. Eg. For 'Swinburne Univesity of Technology' use the phrases 'Swinburne' and 'Swinburne University of Technology'.

Examples

< !-- Copy the following code into your HTML document. -->

PDF

Swinburne Standard

Must be accompanied by a HTML or text equivalent.

Guidelines

Whilst PDF documents can be created in a way that makes them more accessible for disabled users, this is rarely done in practice.

Legislation

HEREOC: World Wide Web Access: Disability Discrimination Act Advisory Notes

Version 3.2, August 2002

“The Portable Document Format (PDF) file system developed by Adobe has become widely used for making documents available on web pages. Despite considerable work done by Adobe, PDF remains a relatively inaccessible format to people who are blind or vision-impaired. Software exists to provide some access to the text of some PDF documents, but for a PDF document to be accessible to this software, it must be prepared in accordance with the guidelines that Adobe have developed. Even when these guidelines are followed, the resulting document will only be accessible to those people who have the required software and the skills to use it. The Commission's view is that organisations who distribute content only in PDF format, and who do not also make this content available in another format such as RTF, HTML, or plain text, are liable for complaints under the DDA. Where an alternative file format is provided, care should be taken to ensure that it is the same version of the content as the PDF version, and that it is downloadable by the user as a single document, just as the PDF version is downloaded as a single file.”