technology tip of the month Pointer and Clicker Article



February 2000 - Graphic and Design Tips for Online Courses

Keep It Super Simple! Online Course web pages must be functional. Layouts for online courses need to be easy to navigate. Keep everything that is important in a logical or easily found place. For example, put navigation links consistently at the bottom of the page, such as ION's MVCR Online Learning: an Overview does.

Keep it Clean! Images can be essential to your message, but use them sparingly. Images add downloading time to you page. When in doubt simple is better. If an image does not greatly add to the subject taught or the appearance of a page - do not use it. This advice also applies to background images:

  Background images can be really cool, but hard to read.

Only Links are Underlined.
Underlining usually means a URL link. Most browsers display links in a color that is distinct from text, it is best to avoid underlining text that is not a link. If you want to call attention to a word or title, change its color, size, or font style instead of underlining.

A Browser is not a Browser, is not a Browser. Browsers do not all work the same. Your course page might look extremely different in one browser than it does in another. Netscape and Microsoft Internet Explorer may display some web pages differently. Check your page with both browsers to make sure that they look just as you intend.

Make Font Readable. Use dark colored font on a light colored background. Not all monitors or browsers are created equal. A color combination that looks good on your computer, might not be readable on another monitor. To avoid problems, keep fonts and backgrounds in high contrast colors.

  Dark on dark is very hard to read
  Even light on light can be difficult to read.

The font size needs to be large enough for most people to read. Choose a common font, such as New Times Roman or Arial, and a clean font, nothing too fussy, which is hard to read. Serif font, fonts which the letters have tiny lines that guide the eye toward the letter, are easier to read than sans-serif such fonts.


This is an example of sans-serif font.
This is an example of serif font.

Short & Sweet. Try to keep your web pages only two screens long. If a web page needs to be longer than two screens, try to break it up into chunks, and have links for those chunks.

Keep Download Times Short. Keep your pages' loading times under 10 seconds. Graphics, animation, and sound cause longer download times, so use them only for academic reasons. If you use include these technologies in your online course, let students know what the minimal technology requirements are, so that they are prepared and able to handle such teaching/learning aids.
  dart flying at bullseye
  Graphics, especially animated ones, often draw attention away from a page's content. Be extremely reserved and meticulous about graphics, animation, and sound that do not signifigantly contribute to the content of a page, such as the above arrow and target animation. If in doubt - do without.

Try to have Only One Window.
Having more than one window (using frames) in a webpage may cause students problems printing, searching, bookmarking, and navigating. Format you page using tables to avoid the use of frames. For an example tour through ION's pages and note the left sidebar which appears almost all of ION's pages. If you do use frames, offer a frameless option. [Editor's Note Feb. 2003: This sidebar is no longer the case on the ION Website.]

If You Post it, They will Print it. There is a good chance that a lot of your course web page will be printed out by students. For large chunks of information, that a student might want to read off-line, provide a print friendly version. See ION's Web Design Principles: About this Course which offers a print friendly version of itself. [Editor's Note Feb. 2003: This sidebar is no longer the case on the ION Website.]

There's No Place Like Home. Always have a link to return to the home page from all your course pages. You might also want to have links to other important course sections on most of the courses web pages. Keep your navigation link system constant throughout your site.



MVCR's Web Design Principles

Web Design for Online Courses [search ION site for current location]

Good Web Design: Guidelines to Follow when Designing

Hypertext Markup Language

The Top 15 Web Design Irritants & How to Avoid Them

Using Color on your Web Page.

Webmonkey/Design/ Information Architecture Tutorial

Web Pages That Suck

Yale Style Manual

ION Home | Pointers and Clickers