stanford/group/ttsclasses/top10best Technology Training Services, January 2011

1. Web Design: The Top 10 BestWebsites and How They Did It Best Practices in Web Site Design http://www.stanford.edu/group/ttsclasses/top10best.ppt Technology Training Services, January 2011

2. 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: • 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/

3. Best Practices in Web Design - Best Practice #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/ 2.

4. Best Practices in Web Design - Best Practice #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/

5. Best Practices in Web Design - Best Practice #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

6. Best Practices in Web Design - Best Practice #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

7. Best Practices in Web Design - Best Practice #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

8. Best Practices in Web Design - Best Practice #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/

9. Best Practices in Web Design - Best Practice #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

10. Best Practices in Web Design - Best Practice #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

11. Best Practices in Web Design - Best Practice #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

12. 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 practiceshttp://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

13. 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 andInformation • 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

14. 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