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

2. STANFORD UNIVERSITY INFORMATION TECHNOLOGY SERVICES Best Practices in Web Design - Best Practice #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.Get information. 2.Make a purchase or donation. 3.Be entertained. 4.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 2 ‘good’ examples: http://givingtostanford.stanford.edu/ http://babelfish.yahoo.com/ http://paypal.com/ 1.

3. STANFORD UNIVERSITY INFORMATION TECHNOLOGY SERVICES Best Practices in Web Design - Best Practice #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 2.2.

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

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

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

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

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

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

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

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

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

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

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