Many of the ideas below are taken from Web Site Design Made Easy by Dennis Gaskill, Morton Publishing, 2001, Chapter 15, with some from Designing Web Usability by Jakob Nielsen, New Riders, 2000.

Alternative Approaches to Design: - artistic ideal of expressing yourself vs engineering ideal of solving a problem for a customer

Accessibility

• Is a text-equivalent provided for non-text items such as images (e.g. alt attribute)
• Are heading elements (h1-h6) used to indicate document structure rather than for font effects
• Consider running your site through an accessibility verifier such as Bobby or the accessibility report in Dreamweaver MX

Audience

• Is there a clear audience for the site?
• Is the content and language appropriate for this audience?

Download Time of Pages

• loading time for initial page is more important than for other pages -- general recommendation is maximum of 20-30 seconds, or a total file size, including graphics, of 40K
• Helps if key parts of the page load more quickly, e.g. links to other pages in website, alt tags that convey placement of image links
• For some pages, users will be more patient
• Use of Java on web pages can significantly slow down loading time, whereas JavaScript has little effect
• In a graphics program, one can convert a graphic into a progressive JPG or interlaced GIF, so that the quality improves as picture loads -- some like this effect, others do not.  Interlacing makes GIFs slightly larger, where making a JPG progressive makes it slightly smaller.

Optimizing Graphics

• Decrease the quality (for JPGs) or reduce the number of colors (for GIFs)
• Reduce the dimensions of the image in a graphics program, not by using the height and width attributes of the <img> tag
• Slice the image into separate images and optimize each image accordingly (better quality or more colors for portions of initial image and lesser quality or fewer colors for other portions)
• Are the graphics really necessary?
• Animation is often distracting, especially if it loops forever
• Consider resizing large graphics to small graphics to serve as thumbnails, with opportunity for user to click for full size version of image

Page Layout and Utilization of Screen Space

• Vertical and horizontal white space (empty space) on page is important
• People read differently on the web than they do in print - short paragraphs are better than long paragraphs
• Consider how much of your available screen space is devoted to banners, ads, and navigation, and how much to content (often an issue with frames)
• Stronger alignment may improve the appearance of web pages

Text

• Fonts must be easy to read
• Don't use all capitals or too-large text
• Don't use too many fonts, font colors, and font sizes
• Don't center large blocks of text; it's hard to read and the alignment is weak
• Spell check and proofread - If you aren't using at HTML editor to spell check your text, you can always bring it into a word processor to spell check it

Backgrounds

• For a full-page style background, the contrast should be between the text color and the background image, not within the background image
• If you have a background that isn't conducive to text, you can still use it; you can place text in a table centered on a page, which will allow the background image to display on both sides of the table yet provide a clear spot for the text
• Left border style backgrounds allow you to add color to your page, yet keep the main content area clean and easy to work with; the left border can either be in a table or a frame and can include navigation buttons or advertising

Navigation and Site Organization

• Should be consistent throughout your site; the idea is to have visitors become familiar with the navigation so they feel comfortable in finding things
• On a small site, you can have every page link to every other page
• On a large site, you can divide your site into categories with each category having a page with an index; on each page, there are links to the category pages; when you add a page to your site, you only add a link to it to one page (the appropriate category page)
• Ideally (it is not always possible) it should be clear from the context of a link whether the link is to an external site or within the current site
• Is the organization of the site clear -- e.g., is it clear to the user where to find certain information on the site?

Consistency

• Keeping a consistent look from page to page is important

Things to Avoid

• "Under construction" signs; don't link to content that isn't ready yet
• Horizontal scrolling
• Auto-play music -- Reasons to avoid
• Sometimes you are surfing the internet in a public place, so you really don't want sound.
• Others like quiet, and so don't want music.
• If you do like music while you are surfing the internet, you may very well have music of your own on, either through a CD or an internet radio station
• Code that produces errors in IE or Netscape
• Lack of quality content
• Blinking text

Cross-platform compatibility - Here are the principal variables to consider:

• Browser and browser versions
• Monitor resolution
• Windows/Macintosh
• Browser settings - text size, enabling of JavaScript, whether images are loaded
• Connection speed

Revised: April 14, 2003.  Comments to wpegram@nvcc.edu