| |
Effective web design
by Wilma Keppel
Topics
Does web design matter?
If your site is hard to use, few people will bother, no matter how good your content or how high your search engine rankings.
Research on web usability suggests that sites succeed or fail largely based on their usability.
Top
What makes web design good?
Users come to your site for content, not design. But bad design can make your content unattractive or even unusable.
Your goal should be to get users to complain that your site:
- Makes finding things too easy
- Loads too quickly.
- Is too easy to navigate.
- Is too informative.
- Makes buying too easy
Top
How do I learn good web design?
Peter and I found these resources useful when redesigning this site in summer 2002. Results: better usability, and a jump in search engine rankings.
Don't Make Me Think! is Steve Krug's common-sense approach to web usability. If you only read one book about site design, read this one. Short and fun, with a great section on inexpensive usability testing. User testing is the cheapest, easiest, and most effective way to improve your site.
Jakob Nielsen's online columns
Web guru Nielsen bases his conclusions on research with users. See especially
Nielsen's recent book Home Page Usability: 50 Websites Deconstructed starts with an excellent summary of what makes a site design usable. Designing Web Usability is in-depth but dry.
Web Pages That Suck
"Where you learn good design by looking at bad design." Most web design gurus put people to sleep. Not Vincent Flanders! His Daily Sucker features new bad designs daily. His books Web Pages That Suck and the even better Son of Web Pages That Suck are excellent as well as funny.
Fixing Your Web Site
Vincent Flanders stuffs this site with links to first-rate resources for web site designers, such as Dr. HTML.
Yale Style Guide
Concentrates on what makes sites useful, navigable, and understandable for visitors, rather than fluff. Also available online. First edition book and website, second edition book and website.
Creating Killer Web Sites
David Siegel explains picture squishing and many other aspects of web site building in detail. See updates online at killersites.com.
Viewable With Any Browser campaign. Increase your site traffic and search engine rankings by designing for everybody. (Remember, if it works for Lynx and other text-based browsers, it works for search engines.)
DHTML and CSS for the World Wide Web
A decent guide to CSS (cascading style sheets). I haven't found a really good guide yet.
Type & Layout: How Typography and Design Can Get Your Message Across—Or Get in the Way
The definitive reference for print design—essential if you have pages readers are likely to print out. Simple changes in typography can increase your readership 6 times or more—or reduce your audience to 1/6 or less.
The Non-Designer's Design Book
A good reference for making your pages look nice. Doesn't address usability.
Top
Online website tools
Validators check your HTML and CSS for mistakes and improper coding. Valid HTML won't always work in all browsers, but is much less likely to cause problems.
- W3C HTML validator checks online web pages for problems. You can also upload files from your computer.
- W3C CSS validator checks online cascading style sheets for problems. You can also upload files from your computer.
- W3C link checker checks for broken links on your page or site.
- Dr. HTML checks your pages for all kinds of problems, including browser compatibility. More checks and better explanations of problems and what to do about them than the W3C validators.
- Multivalidator is an applet for Internet Explorer that lets you load a web page, then check it simultaneously with W3C's HTML validator, CSS validator, and link checker. I keep it in my IE toolbar.
- Robots.txt validator and tutrorial. The robots.txt file on your website tells search engines which folders and files to skip. You can also use it to exclude spambots from your site.
Online image optimizers reduce your pictures' file sizes so they load faster—sometimes much faster. You can also squish images yourself.
- OptiView SiteScan tests your site's performance and reports broken links, duplicate images, and bloated images, which they shrink for you. Free check of the first 10 pages of any site. You have to register, but they haven't spammed me yet.
- GIFBOT and NetMechanic optimize one image at a time for free.
Other resources:
Top
Checking browser compatibility
Check your site on different browsers and platforms to make sure it works for everybody. Sources:
- Dr. HTML shows what features of your HTML work with which browser versions.
- Lynx viewer shows how search engines (and text-based browsers) read your site. Make your site accessible to the disabled, and Google can read it too.
- BrowserCam shows screen shots of your page on many different browsers and platforms. Currently U.S. $10/10 pages, or $40/month for unlimited viewing.
- AnyBrowser.com features tools, tutorials, and tips to help you get your site compatible.
- Internet Explorer: Microsoft's browser currently claims about 85% of web traffic.
- Netscape: Even though version 4.x has major display problems, lots of people still use it because it runs on old machines with little memory or hard disk space. (If you're one of those people, I recommend switching to Opera.)
- Opera: A small, fast alternative to Netscape and IE. Great features. Windows and Mac.
- iCab, still under development, is also small and has good features. Includes built-in HTML checker. Mac only.
Top
Write for the web
Your pages look great, your site is easy to navigate, but that's not enough to ensure success. People don't read the Web; they scan it. Good web text works on several levels. It lets people who scan get the essential points, while providing in-depth information for the serious reader. Tips:
- Use half as many words as your would for print (or less).
- Emphasize key words and phrases. Boldface emphasis stands out and makes scanning easy.
- Use bulleted lists.
- Use picture captions to briefly tell your story (Ecoresults! has some good examples).
- Use subheads to outline main points or tell your story.
- Communicate one idea per paragraph (readers will skip over additional ideas unless conveyed by the first few words).
- Some writers recommend the newspaper-like inverted pyramid style that starts with the conclusion, and gives readers more detail as they continue to read.
Web writing for many interest levels is the best in-depth how-to article on web writing we've seen.
Jakob Nielsen got a 124% increase in usability by reducing word count, making text scannable, and using neutral language rather than hype.
This 33 K PDF article covers techniques for print and web with less depth, but a wider range of ideas.
I also recommend that you write in "Global English". This means writing in clear, globally understood English: shorter sentences, simpler sentence structure, fewer idioms, less jargon. Longer article.
Additional resources
Updated 24 March 2003
URL: managingwholes.com/web-design.htm
Top
|
|