1 / 11

And How To Avoid Them! Continuing Studies CS 22: Enhanced Web Site Design January 2012

Top Ten Web Design Misteaks (sic). And How To Avoid Them! Continuing Studies CS 22: Enhanced Web Site Design January 2012. Top Ten Web Design Misteaks (sic): Misteak #1. Designing your website for your needs, not the needs of your visitors .

eshe
Télécharger la présentation

And How To Avoid Them! Continuing Studies CS 22: Enhanced Web Site Design January 2012

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Top Ten Web DesignMisteaks (sic) And How To Avoid Them! Continuing Studies CS 22: Enhanced Web Site Design January 2012

  2. Top Ten Web Design Misteaks (sic): Misteak #1 • Designing your website for your needs, not the needs of your visitors. • 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 buy items! http://tinyurl.com/old-brownuniversity -- try to click Annual Fund http://tinyurl.com/old-globalaigs ‘good’ examples: http://givingtostanford.stanford.edu/ http://babelfish.yahoo.com/ http://paypal.com/

  3. Top Ten Web Design Misteaks (sic): Misteak #2 • Designing your site in a way that people can’t figure out what they’re supposed to do. • 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/ ‘bad’ examples: http://web.archive.org/web/20070115231803/http://www.marshill.org/ http://www.snarg.net/

  4. Top Ten Web Design Misteaks (sic): Misteak #3 Using 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://metaverse.stanford.edu http://www.duckduckgo.com/ ‘bad’ examples: http://www.tjkdesign.com/ http://www.fiddlers.co.uk/ http://www.wherever.com/

  5. Top Ten Web Design Misteaks (sic): Misteak #4 Using 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://www.wilsonminer.com/ ‘bad’ examples: http://www.tjkdesign.com/ http://www.thomasedison.org/main.htm

  6. Top Ten Web Design Misteaks (sic): Misteak #5 Using fonts or content that makes it difficult to read: using graphics as text ‘good’ examples: http://www.mikeindustries.com/blog/files/sifr/2.0/ http://www.linkedin.com/ http://www.npr.org/ ‘bad’ examples: http://www.macys.com/ http://www.gotoscw.com/ http://www.countryquilter.com/ http://web.archive.org/web/20060312010453/www.ty.com/newhomein?custid=&r=1142125487

  7. Top Ten Web Design Misteaks (sic): Misteak #6 Using fonts or content that makes it difficult to read: dense text ‘good’ examples: http://news.google.com/ http://pangea.stanford.edu/ ‘bad’ examples: http://tinyurl.com/old-havenworks http://anselme.homestead.com/AFPHAITI.html

  8. Top Ten Web Design Misteaks (sic): Misteak #7 The WTF? effect – making 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.dokimos.org/ajff/ http://web.archive.org/web/20060312010453/www.ty.com/ http://tinyurl.com/old-havenworks http://bit.ly/belladesoto http://www.pinesol.com/

  9. Top Ten Web Design Misteaks (sic): Misteak #8 Using “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/ ‘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/old-horicon2/) http://www.webpagesthatsuck.com/web-design-question-which-looks-like-a-dentist-1.html

  10. Top Ten Web Design Misteaks (sic): Misteak #9 Using obsolete, invalid, or semantically incorrect 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. Top Ten Web Design Misteaks (sic): Misteak #10 Using inaccessible HTML code (should comply with Section 508, WCAG Priority 1 and Priority 2 guidelines). ‘good’ examples: http://www.cynthiasays.com/ http://soap.stanford.edu/

More Related