stanford university information technology services technology training services, january 2011 web

STANFORD UNIVERSITY • INFORMATION TECHNOLOGY SERVICES

http://www.stanford.edu/group/ttsclasses/top10best.ppthttp://www.stanford.edu/group/ttsclasses/top10best.ppt

Technology Training Services, January 2011Technology Training Services, January 2011

Web Design: The Top 10 BestWeb Design: The Top 10 BestWebsites and How They Did ItWebsites and How They Did It

Best Practices in Web Site DesignBest Practices in Web Site Design


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



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.



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



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.


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



5. Never use fonts or content that makes it difficult to read: don’t use graphics as text (use text as text!)


http://www.npr.org/

http://www.mikeindustries.com/blog/files/sifr/2.0/

http://www.linkedin.com/


‘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



6. Never use fonts or content that makes it difficult to read: don’t use dense text


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



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


http://www.dell.com/


‘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



8. Don’t use “Mystery Meat Navigation” – using buttons, links, etc., that do not indicate what those buttons are all about.


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



9. Use modern, valid, and semantically correct HTML, CSS, and JavaScript code.


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



10. Use accessible HTML code (should comply with Section 508, WCAG Priority 1 and Priority 2 guidelines).


http://www.cynthiasays.com/

http://soap.stanford.edu/

http://soap.stanford.edu/showcategory.php?categoryid=15

11


Resources – Stanford Web Design SitesResources – 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


Resources – Non-Stanford Web Design ResourcesResources – 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


Resources – Tools and Miscellaneous ResourcesResources – 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 technology training services, january 2011 web

Documents