spacing pixel spacing pixel

kokopelli gif flute down Web Site Design: More info... kokopelli gif flute up

Contents

This page presents background reading, mostly in the form of links, to web sites that contain additional information about topics covered in the Web Site Design portion of my presentation given at Vision 2005 in Orlando, Florida.

  1. Writing for the web
  2. Web site design basics
  3. Web site design resources
  4. Tools
  5. Accessibility
  6. Copyright

How will you measure whether or not your site is successful?



Writing for the web

In general, you should not take content written for other media, simply wrap HTML around it, and present it as a web page. People read web pages differently than other media. Consequently, content must frequently be 're purposed' before it can be part of an effective web page. The links below provide additional details about reading and writing for the web.

Short summary: [read this one first] How Users Read the Web - People do not read the Web the same way they read a book, magazine, or newspaper. This article highlights a number of content design issues.
[http://www.useit.com/alertbox/9710a.html]

Full paper: [long - unfortunately written for print not web] How to Write for the Web - Studies of how users read on the Web found that they do not actually read: instead, they scan the text... writing that was concise, scannable, and objective at the same time resulted in 124% higher measured usability.
[http://www.useit.com/papers/webwriting/writing.html]

Case study: Applying Writing Guidelines to Web Pages - In this case study usability improved by 159% when rewriting sample pages from a popular web site.
[http://www.useit.com/papers/webwriting/rewriting.html]

Writing for the Web - other miscellaneous articles by Jakob Nielson discussing web authoring.
[http://www.useit.com/papers/webwriting/]

return to TOC 


Web Site Design Basics

Good and Bad Web Design Features - This site contains two lists, one of 'good web design features' and the other 'bad web design features'. The lists are based on input from designers and non-designers.
[http://www.ratz.com/features.html]

7 deadly sins of design - The page contains a list of 7 major design sins. It comes from Webcredible, a UK firm that specializes in usability and accessibility. Also included are links to other resources on their site.
[http://www.webcredible.co.uk/user-friendly-resources/
 web-usability/web-design-sins.shtml]

Top Ten Web Design Mistakes of 2005 - Jakob Nielson has a 'top ten' list for each of the last several years. It is amazing that some of the entries just keep coming back year after year! Be sure to scroll to the bottom for links to Nielson's other 'top ten' lists.
[http://www.useit.com/alertbox/designmistakes.html]

return to TOC 


Web Site Design resources

Selecting colors for your site - If you don't understand how colors work together, you can end up with some spectacularly ugly Web pages. If you're not sure, read this article.
[http://webdesign.about.com/cs/color/a/aacolortheory.htm]

Forget ugly color combinations, can some readers even see your colors? Find out what you should know about color blindness when you select web site colors. The frequency of colorblindness is fairly high. One in 12 Caucasian (8%), one in 20 Asian (5%), and one in 25 African (4%) males are so-called "red-green" colorblind. [This site is also very good for helping select colors and presentation techniques for PowerPoint types of presentations.]
[http://jfly.iam.u-tokyo.ac.jp/color/#see]

Test yourself for colorblindness - What happens when the web master is colorblind?
[http://www.toledo-bend.com/colorblind/Ishihara.html]

If you learn best from a book, I recommend. Non-Designer's Web Book, 3rd edition by Robin Williams, John Tollett. Follow the link to the book on Amazon to find out more details.
[http://www.amazon.com/exec/obidos/tg/detail/-/0321303377/
  002-7141605-5616004]

There is an on-line excerpt from the book of the section “Typography on the Web”. a great reference for anyone with an interest in web typography.

About Web Design/HTML - A good general web site with many popular web design topics [geared to HTML coders]
[http://webdesign.about.com/]

return to TOC 


Tools

RC Web Tools - Xplor developed this toolkit to assist with web page development. Knowledge of HTML not required! See documentation for usage.

HTML resources: I'm not implying that everyone should learn to code HTML, but it will certainly make your life easier if you can at least understand HTML tags when you see what someone else has coded!

Multiple browsers: Firefox, Internet Explorer, Mozilla, Opera [now free], AOL

FireFox is an excellent choice for an additional browser to have installed on your system, if you don't already have it. In addition to being the second most common browser, it also has a number of extensions that can make the life of a web master/designer much easier. [http://www.firefox.com/]

And did I mention it is all free? Below are two extensions that I highly recommend.

  1. MeasureIt - Lets you measure elements on any web page.
    [https://addons.mozilla.org/extensions/moreinfo.php?application=firefox
      &category=Developer%20Tools&numpg=10&id=539]
  2. Web Developer Toolbar - This extension contains multiple tools. Below are just a few.
    [https://addons.mozilla.org/extensions/moreinfo.php?application=firefox
      &category=Developer%20Tools&numpg=10&id=60]
    • resize to 800 x 600 screen
    • interface to various HTML and accessibility checkers
    • various checks for image related keywords

Bookmarklets - Handy snippets of code for many uses
[http://www.bookmarklets.com/tools/categor.html]

  • resize screen to 800 x 600 - This bookmarklet instantly resizes the window to 800 pixels wide by 600 pixels high. Click the link to try it!
  • display images - This bookmarklet displays all the images on the page in a centered column. [use BACK key to return to normal page display.]
  • page freshness - Use this bookmarket to determine the date of last modification for a page.

Xenu's Link Sleuth - The free, fast, and handy utility that will check for broken links on your site. Written by Tilman Hausherr, this is a commercial grade utility that I've been using for years. Simple user interface and reporting format that can be emailed. [http://home.snafu.de/tilman/xenulink.html]

return to TOC 


Accessibility

Although some designers feel having to accommodate ADA considerations greatly limits their creative freedom, pages designed with ADA principles in mind are usually more effective with the general public. WAI Accessibility Guidelines: Page Authoring
[http://www.w3.org/wai/gl/wd-wai-pageauth]

The full W3 accessibility site is at Web Accessibility Initiative (WAI)
[http://www.w3.org/WAI/]

WAI Guidelines Summarized - This handy list summarizes the WAI Guidelines down to one line for each section. Easy to read and understand.
[http://www.accessible.org/accessible-web-designs.html]

accessible.org - This site points to a wealth of additional accessibility resources.
[http://accessible.org/]

Bobby validation - Bobby checks that your HTML is valid for numerous popular browsers as well as checking that your page is accessible for people with disabilities.  Bobby was created by CAST (Center for Applied Special Technology).
[http://www.cast.org/bobby/]

Section 508 Standards - Section 508 refers to a Federal government procurement standard which provides the 'teeth' to enforce accessibility considerations for computer related products [including web pages] purchased by the Federal government.
[http://www.section508.gov/index.cfm?FuseAction=Content&ID=12]

Usability.gov - This U.S. Department of Health and Human services site is a one stop resource for designing usable, useful, and accessible web sites and user interfaces. It provides information on usability basics, design tips, checklists, lessons learned, newsletters and much more. Definitely worth a visit!
[http://www.usability.gov/]

Excerpt: Don't Make Me Think, Second Edition: A Common Sense Approach to Web Usability - Chapter 11: Accessibility, Cascading Style Sheets, and you - Read this chapter excerpt from Steve Krug's book. A very practical primer basd on his experience on the do's and don'ts of Web design that affect Web usability.
[http://www.webreference.com/programming/usability/index.html]

return to TOC 


Copyright

Just because you can grab a copy of an image, icon, or button from another web site doesn't mean you can incorporate it into your site! For web related copyright issues see copyright website - Web Design Issues.
[http://www.benedict.com/Digital/Web/WebDesign.aspx]

The main copyright website endeavors to provide real world, practical and relevant copyright information of interest to infonauts, netsurfers, webspinners, content providers, musicians, appropriationists, activists, infringers, outlaws, and law abiding citizens.
[http://www.benedict.com/]

return to TOC 


Administrivia:

doc ID: http://www.botos.com/web_design.html 
Copyright 2005 Michael Botos. revised: 1/16/2006 -- Privacy statement
Your comments on presentation style, technical content, and anything else relating to the Web are always welcome. Send them to me at email gif mbotos@botos.com.