1 © Netskills Quality Internet Training, University of Newcastle Web Page Design © Netskills,...
-
Upload
benedict-hudson -
Category
Documents
-
view
215 -
download
1
Transcript of 1 © Netskills Quality Internet Training, University of Newcastle Web Page Design © Netskills,...
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