The Good the Bad the Ugly Style and

The Good, the Bad & the Ugly: Style and design in Website creation Chris Webster: Information Officer and Website Manager at the EARL Consortium for Public Library Networking

Introduction • • • Navigation Design and Graphics Access Other stuff Sources: – The World Wide Web Consortium – Guidelines for the use, management and design of public sector websites - consultation document – Personal prejudice

Navigation • Navigation is often overlooked in favour of the look of the site • Information and services on websites are only useful if customers can find them

Navigation Wide and shallow vs Narrow and deep

Navigation Consistency • A navigation bar linking to the main sections of the site [included on every page? ] • A link to the homepage from every page • Can the user navigate without using ‘BACK’ on the browser?

Navigation Aids to navigation • Index / Table of contents / Site map [example] • Search engine - if your site has enough content to justify the addition of one

Design and Graphics • Keep the design simple • Always have the end-user in mind who may – not have the same browser as you – not have a fast connection to the web – not have the same plug-ins as you – not have as large a monitor as you – have a visual impairment or be blind

Design and Graphics Use of colour • Easier for a non-designer to handle fewer colours • Use 216 -colour Web palette for links, text and background colours (and with images where possible) – http: //www. lynda. com/hexh. html

Design and Graphics Branding • Stick with the same few colours throughout your site • Put your logo on every page and use it to link to the homepage

Design and Graphics ALT tags - essential for users who do not or cannot view images • Must always be included • Short yet descriptive • Where graphics are used as links, include alternative text links • Test site usability with graphics off

Design and Graphics Imagemaps • Use sparingly • Provide a text alternative and an ALT tag directing users to this alternative • Include ALT tags for each menu option

Design and Graphics Images • Keep file size to a minimum by using smaller graphics, fewer colours, and image compression software • Where larger images are needed, display warnings and file sizes, and make use of thumbnails

Design and Graphics Images • Use the same graphic repeatedly loads from cache • Include size attributes (height and width) - helps with formatting of page when loading

Access • In addition to compliance with the Disability Discrimination Act, it is vital that all potential users are able to access your site • W 3 C accessibility checklist: – http: //www. w 3. org/TR/WAI-WEBCONTENT/full-checklist

Access Colour • Text and background colours/images must contrast • Don’t rely on text colour to convey meaning

Access Text and Font effects • Avoid using Marquee and Blink tags problematic for visually impaired users • Avoid underlined text - can be confused with links

Access Links • Clearly identify the target of each link: Information about the library, NOT Click here for information about the library • Place a dividing character ( | ) between consecutive links [example]

Other stuff • If using frames, you must include a <NOFRAMES> version of your site • Web pages should not exceed a fixed width of 600 • Linking your pages to a Style Sheet guarantees consistent design and cuts down transfer time. They are also extremely easy to learn - so use them!

Other stuff • Structure your pages to facilitate ‘scanning’ by using grouping and headings (H 1, H 2, H 3) to break a page up into smaller units • Information requiring Java. Script or plugins (eg Flash, Acrobat Reader) in order to be viewed must be available in an alternative standard format

Other stuff • Browse the web and when you see an idea you like, view the source and learn from the hard work of others • Test your site on different browsers and validate your HTML and CSS – http: //validator. w 3. org/ – http: //jigsaw. w 3. org/css-validator/ – http: //www. htmlhelp. com/links/validators. htm