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

Powerpoint 97 - PowerPoint PPT Presentation


  • 229 Views
  • 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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
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
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 l.jpg
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


Navigation4 l.jpg
Navigation

Wide and shallow vs Narrow and deep


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


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

    • http://www.lynda.com/hexh.html


Design and graphics9 l.jpg
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 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

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


Access15 l.jpg
Access

Colour

  • Text and background colours/images must contrast

  • Don’t rely on text colour to convey meaning


Access16 l.jpg
Access

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
Access

Links

  • 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

    • http://validator.w3.org/

    • http://jigsaw.w3.org/css-validator/

    • http://www.htmlhelp.com/links/validators.htm


ad