STANFORD UNIVERSITY INFORMATION TECHNOLOGY SERVICES 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

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: -- try to purchase something! -- try to go to the Annual Fund! 2 ‘good’ examples:

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: ‘bad’ examples:

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: ‘good’ examples: ‘bad’ examples:

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: ‘bad’ examples: 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: ‘bad’ examples:

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: ‘bad’ examples:

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: ‘bad’ examples:

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: ‘bad’ examples: (‘fixed’ – here’s the original: 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: ‘bad’ examples:

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:

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 University Web Services Wiki: developer resources, standards, and best practices Stanford Self-help Web Design Resources: style guides, design elements, templates, etc. Stanford Online Accessibility Program School/Departmental Sites School of Engineering Web Style Guide Graduate School of Business Web Style Guide 12

STANFORD UNIVERSITY INFORMATION TECHNOLOGY SERVICES Resources – Non-Stanford Web Design Resources Accessibility Sites Cynthia Says: an accessibility tool disABILITY Information and Resources: Make web pages more accessible Jacob Nielsen’s Use It: A web site devoted to accessibility issues Stanford Online Accessibility Program Style Guides and Information Web Style Guide: A thorough and accessible guide to Web design Vincent Flander’s Web Pages That Suck: Learn good design by looking at poorly designed sites World Wide Web Consortium: Creates the official web standards March 2010 Connection Speed Statistics W3Schools: Online web tutorials (also contains web statistics) 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) Web Site Optimization Analyzer: Analyze time it takes for web site to load Stanford Online Accessibility Program Developer’s Toolbox HTML Validator: Validates HTML code WAVE: A free web accessibility evaluation tool Cynthia Says: A free web accessibility evaluation tool Miscellaneous Resources Stanford Online Accessibility Program (provides guidance about accessibility issues) TechCommons: online hub bringing together resources and technology groups on campus SU Webmasters Mailing List (all designers of Stanford websites should join) 14