1 © Netskills Quality Internet Training, University of Newcastle

Web Page Design

http://www.netskills.ac.uk/

© Netskills, Quality Internet TrainingUniversity of NewcastleNetskills is a trademark of Netskills, University of Newcastle.

2 © Netskills Quality Internet Training, University of Newcastle

TopicsPurpose & audience Structure & navigationQuality of contentSpeedAccessibility

Issues & solutions

3 © Netskills Quality Internet Training, University of Newcastle

Purpose & Audience What is the purpose of

your site? Inform? Educate? Entertain? Persuade?

Design for your target audience - consider:

Network speed Available hardware/

software Skill level User expectations

www.google.co.uk news.bbc.co.ukwww.next.co.uk

4 © Netskills Quality Internet Training, University of Newcastle

Structure and NavigationCan people easily find what they want?

Maximum 'half dozen clicks' to find information

Most web sites are non-linear No start and end to a web site Entry not necessarily via home page

Good navigation a product of good structureMake clear and consistent

5 © Netskills Quality Internet Training, University of Newcastle

Methods of NavigationGlobal and local navigationFrames, button bars, image maps, text links…Other useful navigational features:

Site map Table of Contents Search facility

blackpoolzoo.org.uk/basecamp

6 © Netskills Quality Internet Training, University of Newcastle

Quality of ContentUp-to-date & relevantWriting style

Clear and simple Ensure correct spelling, grammar etc

Provide Contact details Feedback mechanism What’s New? Last Updated Copyright notice

7 © Netskills Quality Internet Training, University of Newcastle

SpeedTry to make sites quick to loadImages can make sites slowBe careful with use of images

Decoration or information? Use sparingly

Reduce loading delays Use thumbnails where practical Keep images as small as possible (=<50K) Use WIDTH and HEIGHT attributes Store images in a separate directory

8 © Netskills Quality Internet Training, University of Newcastle

Accessibility Issues For some users, sites

may be difficult or impossible to use

Small text, poor colour combinations

Inaccessible to certain browsers - text browsers, speech synthesisers

W3C standards for accessibilitywww.w3.org/WAI

Increasingly, legislation requires sites are accessible

9 © Netskills Quality Internet Training, University of Newcastle

Improving Accessibility (1)Test pages on several types of browserKeep your site clear, simple and consistent

Content, structure and navigation

Use logical tags instead of physical Physical indicate appearance <B> <I> Logical indicate meaning <STRONG> <EM>

Focus on structure rather than appearance For example, don't use headers for font effects Current W3C Recommendations

Deprecation of style in HTML Use Cascading Style Sheets for appearance www.w3.org/Style/CSS

10 © Netskills Quality Internet Training, University of Newcastle

Improving Accessibility (2)Tables & frames pose problems for some

browsersTables

Keep tables simple Test in text browser to

ensure it makes sense when "linearised"

Use attributes to describe table elements

Frames If used, provide a "noframes" alternative If possible, avoid!!

11 © Netskills Quality Internet Training, University of Newcastle

Improving Accessibility (3)Provide text equivalent for every non-text

element Images (especially if used for navigation),

animations, frames, audio, etc. ALT attribute for images <IMG SRC="button2.gif" ALT="link to home page">

Use contrasting colours for textMake design flexible

Users can alter colours, font size, etc.Validation for accessibilitybobby.watchfire.com

12 © Netskills Quality Internet Training, University of Newcastle

SummaryWell designed web sites are:

Effective Fast Accessible

Design for accessibility usually leads to good design for all

13 © Netskills Quality Internet Training, University of Newcastle

ReferencesW3C Web Accessibility Initiativewww.w3.org/WAI/

UK Government Guidelineswww.e-envoy.gov.uk/oee/oee.nsf/sections/webguidelines-top/$file/webguidelines.htm

Overview of legislation for HE/FEwww.jisc.ac.uk/pub01/n9_01.pdf

Web site evaluation criteria used by a information gateway:www.sosig.ac.uk/desire/ecrit.html