Download Introduction

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
• W3C accessibility checklist:
– http://www.w3.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 (H1, H2, H3) to break a page
up into smaller units
• Information requiring JavaScript 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.w3.org/
– http://jigsaw.w3.org/css-validator/
– http://www.htmlhelp.com/links/validators.htm