1 / 20

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. Navigation Design and Graphics Access Other stuff Sources: The World Wide Web Consortium

RoyLauris
Télécharger la présentation

The Good, the Bad & the Ugly: Style and design in Website creation

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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

  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 • Don’t 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, NOTClick here for information about the library • Place a dividing character ( | ) between consecutive links [example]

  18. 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!

  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

More Related