the good the bad the ugly style and design in website creation
Download
Skip this Video
Download Presentation
The Good, the Bad & the Ugly: Style and design in Website creation

Loading in 2 Seconds...

play fullscreen
1 / 20

Powerpoint 97 - PowerPoint PPT Presentation


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

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

Wide and shallow vs Narrow and deep

navigation5
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
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
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
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
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
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
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
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
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
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
Access

Colour

  • Text and background colours/images must contrast
  • Don’t rely on text colour to convey meaning
access16
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
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
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
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
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