The Good, the Bad

1
The Good, the Bad the UglyStyle 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 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
• 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 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 thumbnails

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
• Dont 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

18
Other stuff

• If using frames, you must include a ltNOFRAMESgt
  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