Critiqing Web Sites
Some information based on the book "Web Pages That Suck" by Vincent
Flanders & Michael Willis. http://webpagesthatsuck.com/
Simple rules:
- Consistent buttons on every page
- Get visitors to desired info with as few clicks as possible
- "Click Annoyance Factor" - not scientifically determined.
Flanders' is about 3 clicks.
http://www.cigaraficionado.com/Cigar/Home
- Most important topics: subscribe, contact, site index - on
navigation bar
- Used to be one excellent animated gif... what about now?
- Site includes significant content
- Captures definition of "good life" for its audience (travel,
drinks, events, golf etc.)
- Has many graphics - takes while to load (but audience probably
has high speed)
http://www.pepsi.com/home.php
- limited navigation.
- Use to require plug-ins.
http://www.united.com/
- takes awhile to load
- icons for navigation
http://www.southwest.com/
- how does this compare?
- used to have ticket counter.
http://www.redhat.com/
- grahics links include text
- update information frequently
http://www.kenwood.com/
- Mostly just a contact page
- Have to click on About to get info
- Slow picture
http://www.aaog.com/
- loads VERY slowly on dialup
- no longer has mission statement - Web Pages recommends against
mission statements (just state obvious, no real info)
A few more tips:
- Don't include religious message on business site.
- Don't require a name before visitor can see your site.
- Don't forget to include a way for visitors to buy your
product/subscribe etc.
Chapter 2: Site Design and Navigation
Don't just site down and start coding. Need to plan what goes on:
Home
Main Main Main Topics
Subsidiary
Home is the roadmap. "The top's gotta pop or they're not gonna
stop." Like a magazine cover, must draw people in. Include a link
to home on all subsidiary page... you never know how a visitor arrives
at your site.
Home must convery: purpose (who, what, when, where, why), kind of
content, how to find
Navigation tools:
- Navigational graphics
- Buttons
- Image Maps - be clear where it leads. Should also have a
text link, because user might Stop before image loads.
- Text links. Don't go overboard.
- Frames.
http://www.wm.edu/computerscience/
- Used to have too many links... page nicely updated.
http://www.webconvert.com/
- How much does the Word->HTML program cost? Shouldn't you
be able to find out quickly and easily?
http://www.rtside.com/rtside/rushpage.html
- Do the links like Hilary make sense?
Chapter 3: Content is King
Update your site as often as you can afford the time and/or
money. Ask yourself: "Why would anybody in their right mind
want to visit my site a second time?"
Mistake: thinking your site has content when all it has is a collection
of words and images.
http://www.edithroman.com/
- Used to have free calculators section.
- Content now is lists of services, limited articles
http://free-thinkers.org/site/index.htm
http://www.police.nashville.org/bureaus/investigative/domestic/stalking.htm
http://hps.arts.unsw.edu.au/hps_content/online_resources/online_external_links/risk_online_resources.htm
Adding content requires effort!
- content you create
- content you lease or buy. If you want to link to another
site, it's good to ask permission.
- tie-ins. People pay to advertise on your site.
http://www.dilling-harris.com/
- hard to add content to a site for car wash equipment, but they've
done a good job.
Graphics problems - the #1 way a designer can mess up a Web
page. Two rules:
- Faster is better
- Graphics should not be ugly
Herbal.com First Attempt
- Graphic is too big
- Used gif, not jpeg
- Height/width not actual image size
- Page is too long
- Background is bad
- Height/width not used on button images
- Doesn't use browser-safe colors (216 colors in browser palette)
- ALT parameter not used (displays when image broken, mouse passes
over image, browser set to not display graphics)
- uses bad graphics
Average web surfer's attention has been measured at about 8 seconds.
Another bad attempt for Herbal.com
One step toward fixing
Another step in the right
direction
Getting closer
Doesn't look too bad
Better logo
Be careful when using shadows
More tips:
- Overused images: globe, spider, web , folding envelopes
- Avoid: bevels, shadows, glowing text
- Don't use cutesy pictures
- Don't use free clip art
- Don't "borrow" images or anything else
- Remember to make graphics transparent
Some informational sites:
Style
guide
Yahoo
color
theory
Optimizing
animated
gifs
GIF
Construction Set
Text poblems - the #2 way to mess up your Web pages.
Another motto: "It's not what you say, it's how you say it."
Some Suggestions:
Example breaking the text rules
Revised page, removing tags
Don't cram everything onto one page. Most people don't like to
scroll more than two or three screens to see what's on a page. Some
alternatives:
- Add graphics
- Keep your text to between 9 and 15 words per line.
Otherwise people lose their place when trying to read.
- Break the text into multiple pages
- Use Tables to limit the width of a Web page.
- Blockquote is another option, but tables are preferred.
- Some browsers support leftmargin/rightmargin arguments
Problems with <FONT>
- Makes assumptions about visitors. Are they using browser
default values? Are there any phycial limitations? Which fonts
reside on their system.
- Watch colors, especially for color-blind people. Don't put
primary colors red and green next to each other.
- Using SIZE argument will have unpredictable results.
- FACE argument assumes all visitors have same fonts as you.
- Avoid dynamic fonts (bandwidth congestion).
Example of difficult font
Other suggestions:
- Use italic sparingly - it's hard to read.
- Don't write in all CAPS. Exception is heading with fewer
than 7 words.
- Underlined text looks like a link, and it has been deprecated.
- Avoid jargon, slang, Americanisms.
- Watch out for typos - gives impression that designers are not
professional.
- Make sure links go to correct URL (National Coalition for the
Homeless should not link to the Ronald Reagan Home Page)
- Don't use <SPACER> as it's not supported on all browsers.
- Don't use <CENTER> whole blocks of text. http://www.dynrec.com/index1.html
- www.nuttmeg.com
Chapter 6: Frames and Links
Issues with frames:
- Cut up already small real estate into smaller segments
- Cause pages to load more slowly
- Many search engines have problems indexing sites with frames
- May have trouble printing a framed page
- On low-resolution monitor, frame may be chopped off, made
scrollable.
Some people are strongly opposed to frames:
"All pages with frames suck.
Plus, they tend to make my browser crash at unpredictable times."
"I hate frames. Your site uses frames. I hate your site."
Some suggestions:
- Use absolute pixel widths to set size of navigation column.
Will be OK on all monitors.
- Use scrolling = "auto" so scroll bar appears only when needed.
- OK to use scrolling = "no" for short menu, if you're sure all
will show up on everyone's screen
- Horizontal scrolling is really obnoxious.
- Assign names to frames, to avoid loading two frames when you
click on one.
- If you link to another site, use target="blank" so it loads in a
new window.
http://www.1001services.com/
http://www.the-center.org/
Chapter 7: It's Not Called the Bleeding Edge for Nothing
Some HTML reference sites:
Tutorials
Validation