1. 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

2. 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

3. 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

4. Navigation Wide and shallowWide and shallow vs Narrow and deep

5. 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?

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

7. 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

8. 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

9. 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

10. Design and Graphics ALT tagsALT 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

11. 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

12. 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 thumbnailsthumbnails

13. 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

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

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

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

17. 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]example

18. Other stuff If using frames, you must include a 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!

19. Other stuff Structure your pages to facilitate ‘scanning’ by using grouping and headings (H1, H2, H3) to break a page up into smaller units Information requiring JavaScript or plug- ins (eg Flash, Acrobat Reader) in order to be viewed must be available in an alternative standard format

20. 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.w3.org/ –http://jigsaw.w3.org/css-validator/ –http://www.htmlhelp.com/links/validators.htm