The good the bad the ugly style and design in website creation
1 / 20

Powerpoint 97 - PowerPoint PPT Presentation

  • Updated On :

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

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Powerpoint 97' - RoyLauris

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
The good the bad the ugly style and design in website creation l.jpg

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

  • 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 l.jpg

  • 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

Navigation4 l.jpg

Wide and shallow vs Narrow and deep

Navigation5 l.jpg


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

Navigation6 l.jpg

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 l.jpg
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 graphics8 l.jpg
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)


Design and graphics9 l.jpg
Design and Graphics


  • 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 graphics10 l.jpg
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 graphics11 l.jpg
Design and Graphics


  • Use sparingly

  • Provide a text alternative and an ALT tag directing users to this alternative

  • Include ALT tags for each menu option

Design and graphics12 l.jpg
Design and Graphics


  • 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 graphics13 l.jpg
Design and Graphics


  • Use the same graphic repeatedly - loads from cache

  • Include size attributes (height and width) - helps with formatting of page when loading

Access l.jpg

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


Access15 l.jpg


  • Text and background colours/images must contrast

  • Don’t rely on text colour to convey meaning

Access16 l.jpg

Text and Font effects

  • Avoid using Marquee and Blink tags - problematic for visually impaired users

  • Avoid underlined text - can be confused with links

Access17 l.jpg


  • Clearly identify the target of each link: Information about the library, NOTClick here for information about the library

  • Place a dividing character ( | ) between consecutive links [example]

Other stuff l.jpg
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 stuff19 l.jpg
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

Other stuff20 l.jpg
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