web design plundered from lynch and horton. © 2004the university of greenwich 2 10 x don't use...
Post on 20-Dec-2015
218 views
TRANSCRIPT
![Page 1: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/1.jpg)
Web Design
Plundered from Lynch and Horton
![Page 2: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/2.jpg)
© 2004 the University of Greenwich 2
10 x don't use• Frames• Leading edge technology• Scrolling text, marquees, animations• Complex URLs• Orphan pages• Long scrolling pages• Lack of navigation support• Non-standard link colours• Outdated information• Long download times
![Page 3: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/3.jpg)
© 2004 the University of Greenwich 3
Layout, avoid tables?• Use CSS for position
• Often difficult to maintain• Inflexible
• % width vs specified width• Browser differences
• Nesting takes longer to render• Search engine optimisation• Accessibility• Printing
![Page 4: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/4.jpg)
© 2004 the University of Greenwich 4
Interface Design Issues
• Web pages versus conventional documents
• Page independence• Author – validity of information• Title• Revision date• Home page/site reference• Target audience needs
![Page 5: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/5.jpg)
© 2004 the University of Greenwich 5
• User centred• Navigation• Direct access• Bandwidth• Consistency• Sitemap feedback• Accessibility• Organisation of information
Interface Design Issues
![Page 6: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/6.jpg)
© 2004 the University of Greenwich 6
Navigation
How does page 6 in this sequence deal with this situation?
Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001
![Page 7: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/7.jpg)
© 2004 the University of Greenwich 7
Consistency in Page Layout
Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001
![Page 8: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/8.jpg)
© 2004 the University of Greenwich 8
Use of Tabs
Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001
![Page 9: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/9.jpg)
Direct Access - Dead Ends
Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001
![Page 10: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/10.jpg)
Graphics as Navigational Aids
Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001
![Page 11: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/11.jpg)
© 2004 the University of Greenwich 11
Site Structure• File and folder structures• Hierarchy
Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001
![Page 12: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/12.jpg)
© 2004 the University of Greenwich 12
Site Elements
• Home page• Menu based• News based• Path based• Splash screens
• Page templates• Site guide/map• Search facility• Contact• Feedback
![Page 13: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/13.jpg)
© 2004 the University of Greenwich 13
Intranet Use/Cost
• Sun Microsystems Intranet – mid 1990’s• Employees accessed average of 12 pages
per day• Redesign: saving of 5 minutes per week per
employee = 10 million dollars per year
![Page 14: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/14.jpg)
© 2004 the University of Greenwich 14
Page Design
• Visual hierarchy• Consistency• Dimensions• Length• Layout• Frames• Cross platform issues• Accessibility
![Page 15: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/15.jpg)
© 2004 the University of Greenwich 15
Typography
Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001
![Page 16: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/16.jpg)
© 2004 the University of Greenwich 16
Justification
Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001
![Page 17: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/17.jpg)
© 2004 the University of Greenwich 17
Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001
![Page 18: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/18.jpg)
© 2004 the University of Greenwich 18
Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001
![Page 19: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/19.jpg)
© 2004 the University of Greenwich 19
Case
Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001
![Page 20: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/20.jpg)
© 2004 the University of Greenwich 20
Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001
![Page 21: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/21.jpg)
© 2004 the University of Greenwich 21
Anti-aliasing
Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001
![Page 22: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/22.jpg)
© 2004 the University of Greenwich 22
Style
Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001
![Page 23: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/23.jpg)
© 2004 the University of Greenwich 23
Balance
Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001
![Page 24: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/24.jpg)
Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001
![Page 25: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/25.jpg)
Gutters
Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001
![Page 26: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/26.jpg)
Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001
![Page 27: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/27.jpg)
Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001
![Page 28: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/28.jpg)
© 2004 the University of Greenwich 28
Visible Area
Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001
![Page 29: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/29.jpg)
© 2004 the University of Greenwich 29
Browser Screen Size
Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001
![Page 30: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/30.jpg)
© 2004 the University of Greenwich 30
Links
Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001
![Page 31: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/31.jpg)
© 2004 the University of Greenwich 31
Link to Homepage?
![Page 32: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/32.jpg)
© 2004 the University of Greenwich 32
Graphics
• Is it a picture?• Is it a map with links?
Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001
![Page 33: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/33.jpg)
© 2004 the University of Greenwich 33
Bandwidth – Page Load Time
Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001
![Page 34: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/34.jpg)
© 2004 the University of Greenwich 34
Patrick J. Lynch, Sarah Horton, 2001Patrick J. Lynch, Sarah Horton, 2001
![Page 35: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/35.jpg)
© 2004 the University of Greenwich 35
Multimedia
• Audio• music• speech
• Video• streaming• format (plug-ins)
![Page 36: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/36.jpg)
© 2004 the University of Greenwich 36
Accessibility• Guidelines
• WWW Consortium W3C standards
• User tools• e.g. Large Print Viewers
• Authoring tools• A-Prompt, Web Accessibility Verifier, see:
http://aprompt.snow.utoronto.ca/• WebXACT Web Page Accessibility Verifier, see:
http://webxact.watchfire.com
• Browsers with Built-in Voice Feature• Home Page Reader – IBM, see: http://www-3.ibm.com/able/
• Government initiatives• section 508
![Page 37: Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,](https://reader031.vdocuments.site/reader031/viewer/2022032800/56649d4b5503460f94a28300/html5/thumbnails/37.jpg)
© 2004 the University of Greenwich 37
References• Patrick J. Lynch, Sarah Horton, 2001, Web Style Guide 2nd Ed, Yale
University, see: http://www.webstyleguide.com
• Accessible Web Page Design, 2003, see: http://www.makoa.org/web-desin.htm
• Web Content Accessibility Guidelines 1.0, 1999 and 2.0 (working draft), 2003, see: http://www.w3.org
• Designing More Usable Documents, 2003, see: http://www.trace.wisc.edu/world/doc_access/index.htm
• Designing More Usable Web Sites, 2003, see: http://www.trace.wisc.edu/world/web/index.htm
• Websites That Work (video – 15 mins), RNIB, see Web Accessibility Initiative (WAI): http://www.w3.org/WAI