Download Web Page Design

Web Page Design
http://www.netskills.ac.uk/
© Netskills, Quality Internet Training
University of Newcastle
Netskills is a trademark of Netskills, University of Newcastle.
1
© Netskills Quality Internet Training, University of Newcastle
Topics
Purpose & audience
 Structure & navigation
 Quality of content
 Speed
 Accessibility


2
Issues & solutions
© Netskills Quality Internet Training, University of Newcastle
Purpose & Audience

What is the purpose of
your site?





Design for your target
audience - consider:




3
Inform?
Educate?
Entertain?
Persuade?
Network speed
Available hardware/
software
Skill level
User expectations
© Netskills Quality Internet Training, University of Newcastle
www.google.co.uk
news.bbc.co.uk
www.next.co.uk
Structure and Navigation

Can 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 structure
 Make clear and consistent

4
© Netskills Quality Internet Training, University of Newcastle
Methods of Navigation
Global and local navigation
 Frames, button bars, image maps, text links…
 Other useful navigational features:




Site map
Table of Contents
Search facility
blackpoolzoo.org.uk/basecamp
5
© Netskills Quality Internet Training, University of Newcastle
Quality of Content
Up-to-date & relevant
 Writing style




Provide





6
Clear and simple
Ensure correct spelling, grammar etc
Contact details
Feedback mechanism
What’s New?
Last Updated
Copyright notice
© Netskills Quality Internet Training, University of Newcastle
Speed
Try to make sites quick to load
 Images can make sites slow
 Be careful with use of images




Reduce loading delays




7
Decoration or information?
Use sparingly
Use thumbnails where practical
Keep images as small as possible (=<50K)
Use WIDTH and HEIGHT attributes
Store images in a separate directory
© 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 accessibility
www.w3.org/WAI

8
Increasingly, legislation requires sites are
accessible
© Netskills Quality Internet Training, University of Newcastle
Improving Accessibility (1)
Test pages on several types of browser
 Keep your site clear, simple and consistent



Use logical tags instead of physical



Content, structure and navigation
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


9
Deprecation of style in HTML
Use Cascading Style Sheets for appearance
www.w3.org/Style/CSS
© Netskills Quality Internet Training, University of Newcastle
Improving Accessibility (2)
Tables & frames pose problems for some
browsers
 Tables





Frames


10
Keep tables simple
Test in text browser to
ensure it makes sense
when "linearised"
Use attributes to describe
table elements
If used, provide a "noframes" alternative
If possible, avoid!!
© 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 text
 Make design flexible



Users can alter colours, font size, etc.
Validation for accessibility
bobby.watchfire.com
11
© Netskills Quality Internet Training, University of Newcastle
Summary

Well designed web sites are:




12
Effective
Fast
Accessible
Design for accessibility
usually leads to good
design for all
© Netskills Quality Internet Training, University of Newcastle
References

W3C Web Accessibility Initiative
www.w3.org/WAI/

UK Government Guidelines
www.e-envoy.gov.uk/oee/oee.nsf/sections/
webguidelines-top/$file/webguidelines.htm

Overview of legislation for HE/FE
www.jisc.ac.uk/pub01/n9_01.pdf

Web site evaluation criteria used by a
information gateway:
www.sosig.ac.uk/desire/ecrit.html
13
© Netskills Quality Internet Training, University of Newcastle