Transcript Top Ten Misteaks in Web Design

Top Ten Web Design
Misteaks (sic)
And How To Avoid Them!
Continuing Studies CS 22: Enhanced Web Site Design
September 2013
Top Ten Web Design Misteaks (sic):
Misteak #1
1.
2.
3.
4.
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:
1.
2.
3.
4.
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/
2
Top Ten Web Design Misteaks (sic):
Misteak #2
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 3-5 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://www.arvanitakis.com/en/
http://www.pandminc.com/
http://www.snarg.net/
http://web.archive.org/web/20070115231803/http://www.marshill.org/
3
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.spectrumpowderworks.com/?page_id=353
http://www.justines1937.com/menu/
http://www.tjkdesign.com/
http://us.norton.com/
4
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.weighmax.com/
http://www.bolenreport.com/
5
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.google.com/webfonts
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
6
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://www.goldenmean.info/
http://www.arvanitakis.com/en/
http://www.historianofthefuture.com/
http://tinyurl.com/old-havenworks
http://anselme.homestead.com/AFPHAITI.html
7
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://www.bellads.info/
http://www.pinesol.com/
8
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://www.dsrny.com/
http://www.flatpakhouse.com/
http://www.bluebell.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
9
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
10
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/
11