Transcript top10best - Stanford University

Web Design: The Top 10 Best
Websites and How They Did It
Best Practices in Web Site Design
http://www.stanford.edu/group/ttsclasses/top10best.ppt
Technology Training Services, January 2011
STANFORD UNIVERSITY • INFORMATION TECHNOLOGY SERVICES
Best Practices in Web Design - Best Practice #1
1. Design your website to meet the needs of your visitors,
not to meet your needs!
A web site shouldn’t be just a marketing tool for you – it should
be there to help your visitors achieve their goals.
People go to websites for one of 4 main reasons – don’t make
it difficult for them! They want to:
1.
2.
3.
4.
Get information.
Make a purchase or donation.
Be entertained.
Be part of a community.
‘bad’ examples:
http://www.gotoscw.com/ -- try to purchase something!
http://www.brown.edu -- try to go to the Annual Fund!
http://tinyurl.com/old-globalaigs
‘good’ examples:
http://givingtostanford.stanford.edu/
http://babelfish.yahoo.com/
http://paypal.com/
2
STANFORD UNIVERSITY • INFORMATION TECHNOLOGY SERVICES
Best Practices in Web Design - Best Practice #2
2.
2.
Design your site so that people who stumble upon your
site can immediately understand what your site is all
about and what they can do on your site.
– It should take no more than 10 seconds to be able to
figure it what you can do on your web site.
‘good’ examples:
http://www.learningguitarnow.com/
http://www.w3schools.com/
http://www.stanford.edu/
http://www.kohls.com/
http://www.macys.com/
‘bad’ examples:
http://www.genicap.com
http://web.archive.org/web/20070115231803/http://www.marshill.org/
http://www.snarg.net/
3
STANFORD UNIVERSITY • INFORMATION TECHNOLOGY SERVICES
Best Practices in Web Design - Best Practice #3
3.
Never use fonts or content that makes it difficult to read:
low contrast.
Use this tool to ensure that your text is in high contrast to the
background: http://www.accesskeys.org/tools/color-contrast.html
‘good’ examples:
http://ed.stanford.edu/
http://www.duckduckgo.com/
http://www.google.com/
‘bad’ examples:
http://www.xerox.com/
http://www.tjkdesign.com/
http://www.fiddlers.co.uk/
http://www.wherever.com/
4
STANFORD UNIVERSITY • INFORMATION TECHNOLOGY SERVICES
Best Practices in Web Design - Best Practice #4
4.
Never use fonts or content that makes it difficult to read:
small size of the text
Don’t make the font size any smaller than 80% of the default
size for the browser.
‘good’ examples:
http://www.webaim.org/techniques/fonts/
http://news.stanford.edu/
http://ed.stanford.edu/
‘bad’ examples:
http://www.tjkdesign.com/
http://www.thomasedison.org/main.htm
5
STANFORD UNIVERSITY • INFORMATION TECHNOLOGY SERVICES
Best Practices in Web Design - Best Practice #5
5.
Never use fonts or content that makes it difficult to read:
don’t use graphics as text (use text as text!)
‘good’ examples:
http://www.npr.org/
http://www.mikeindustries.com/blog/files/sifr/2.0/
http://www.linkedin.com/
http://www.stanford.edu/
‘bad’ examples:
http://www.macys.com/
http://www.gotoscw.com/aboutscw/
http://www.countryquilter.com/
http://web.archive.org/web/20060312010453/www.ty.com/newhomein?custid=&r=1142125487
6
STANFORD UNIVERSITY • INFORMATION TECHNOLOGY SERVICES
Best Practices in Web Design - Best Practice #6
6.
Never use fonts or content that makes it difficult to read:
don’t use dense text
‘good’ examples:
http://news.google.com/
http://med.stanford.edu/
http://www.bing.com/
‘bad’ examples:
http://www.bacds.org/
http://www.census.gov/
http://www.havenworks.com/
http://anselme.homestead.com/AFPHAITI.html
7
STANFORD UNIVERSITY • INFORMATION TECHNOLOGY SERVICES
Best Practices in Web Design - Best Practice #7
7.
The WTF? effect – don’t make your website so completely
different from the norm that it makes it difficult to understand
what your site is all about (too much material, excessive use of
animations, music, etc.)
‘good’ examples:
http://www.dell.com/
http://www.stanford.edu/
‘bad’ examples:
http://www.dpgraph.com/
http://www.dokimos.org/ajff/
http://web.archive.org/web/20060312010453/www.ty.com/
http://www.havenworks.com/
8
STANFORD UNIVERSITY • INFORMATION TECHNOLOGY SERVICES
Best Practices in Web Design - Best Practice #8
8.
Don’t use “Mystery Meat Navigation” – using buttons, links,
etc., that do not indicate what those buttons are all about.
‘good’ examples:
http://www.amazon.com/
http://web.stanford.edu/
http://www.npr.org/
http://www.alistapart.com/articles/indefenseofeyecandy
‘bad’ examples:
http://web.archive.org/web/19970113160303/http://www.stanford.edu/
http://www.daltonmailingservice.com/
http://www.horicon.lib.wi.us/ (‘fixed’ – here’s the original: http://tinyurl.com/horiconlibrary/)
http://www.webpagesthatsuck.com/web-design-question-which-looks-like-a-dentist-1.html
9
STANFORD UNIVERSITY • INFORMATION TECHNOLOGY SERVICES
Best Practices in Web Design - Best Practice #9
9.
Use modern, valid, and semantically correct HTML, CSS,
and JavaScript code.
‘good’ examples:
http://sen.stanford.edu/
http://dlcl.stanford.edu/
http://drip.stanford.edu/
‘bad’ examples:
http://www.npcweb.org/pr_waiter09.html
http://www.keepbanderabeautiful.org/climatechange.html
10
STANFORD UNIVERSITY • INFORMATION TECHNOLOGY SERVICES
Best Practices in Web Design - Best Practice #10
10.
Use accessible HTML code (should comply with Section
508, WCAG Priority 1 and Priority 2 guidelines).
‘good’ examples:
http://www.cynthiasays.com/
http://soap.stanford.edu/
http://soap.stanford.edu/showcategory.php?categoryid=15
11
STANFORD UNIVERSITY • INFORMATION TECHNOLOGY SERVICES
Resources – Stanford Web Design Sites
University Sites
•
University Web Services: a starting point for understanding all web services at Stanford
http://web.stanford.edu
•
University Web Services Wiki: developer resources, standards, and best practices
http://web.stanford.edu/wiki
•
Stanford Self-help Web Design Resources: style guides, design elements, templates, etc.
http://webguide.stanford.edu
Stanford Online Accessibility Program
http://soap.stanford.edu/
•
School/Departmental Sites
•
School of Engineering Web Style Guide
http://soe.stanford.edu/intranet/templates
•
Graduate School of Business Web Style Guide
http://www.gsb.stanford.edu/styleguide/web_styleguide
12
STANFORD UNIVERSITY • INFORMATION TECHNOLOGY SERVICES
Resources – Non-Stanford Web Design Resources
Accessibility Sites
•
•
•
•
Cynthia Says: an accessibility tool
http://cynthiasays.com
disABILITY Information and Resources: Make web pages more accessible
http://www.makoa.org/
Jacob Nielsen’s Use It: A web site devoted to accessibility issues
http://www.useit.com/
Stanford Online Accessibility Program
http://soap.stanford.edu/
Style Guides and Information
• Web Style Guide: A thorough and accessible guide to Web design
http://www.webstyleguide.com/
• Vincent Flander’s Web Pages That Suck: Learn good design by looking at poorly designed sites
http://www.webpagesthatsuck.com/
• World Wide Web Consortium: Creates the official web standards
http://www.w3c.org/
• March 2010 Connection Speed Statistics
http://www.websiteoptimization.com/bw/1004/
• W3Schools: Online web tutorials (also contains web statistics)
http://www.w3schools.com/
13
STANFORD UNIVERSITY • INFORMATION TECHNOLOGY SERVICES
Resources – Tools and Miscellaneous Resources
Tools
•
•
•
•
•
•
Infrastructure Tools (including the Web Collaboration Tools to install MediaWiki, WordPress, and Drupal)
http://tools.stanford.edu
Web Site Optimization Analyzer: Analyze time it takes for web site to load
http://www.websiteoptimization.com/services/analyze/
Stanford Online Accessibility Program Developer’s Toolbox
http://soap.stanford.edu/showcategory.php?categoryid=15
HTML Validator: Validates HTML code
http://validator.w3.org/
WAVE: A free web accessibility evaluation tool
http://wave.webaim.org/
Cynthia Says: A free web accessibility evaluation tool
http://cynthiasays.com
Miscellaneous Resources
•
Stanford Online Accessibility Program (provides guidance about accessibility issues)
http://soap.stanford.edu
•
TechCommons: online hub bringing together resources and technology groups on campus
http://techcommons.stanford.edu
•
SU Webmasters Mailing List (all designers of Stanford websites should join)
http://mailman.stanford.edu/mailman/listinfo/su_webmasters
14
STANFORD UNIVERSITY • INFORMATION TECHNOLOGY SERVICES