MIT

Web Guide is no longer being maintained and the information on this page may be out of date. For assistance with managing course materials, please visit MIT's Stellar course management system.

ACS Academic Web Page Creation Guide

Introduction >Designing Your Pages

Designing Your Course Web Site

On this page:

Overview: Usability

After you have set your pedagogical goals for the site and know what components you will be including such as a class calendar, syllabus, handouts, etc., it is time to think about how to design your site so that it is both functional and attractive. A course web site is an informational site and so the topmost consideration should be making it easy for students to find the information they need without having to dig deeply to find it. This can be a challenge when putting together complex, multi-level sites but the time spent planning will be well worth the effort.

The basic design principle to keep in mind is simplicity. Remember that your web page's content is of primary importance. It is easy to get carried away with using cutting edge technology, flash and glitter. These elements may be appropriate for commercial web sites but will most likely only detract from informational sites. For some ideas about what not to do, see:

Three Elements of Web Design

You can break your course site design into three elements: content design, which is the information your pages are trying to convey; site design, which is how your pages will link to one another; and page design, which is how your pages will look.

1. Content Design

Content is what users come for. Everything else is just a backdrop. According to Jakob Neilsen in his book Designing Web Usability, the three main guidelines for writing for the web are:

  1. Be succinct.
  2. Write for scannability. Use short paragraphs, sub-headings and bullet lists.
  3. Use hypertext links to split up long information into multiple pages.

Other resources:

2. Site Design

Plan the number of pages your site will need and how they will link together. Will all of the pages be links from the "home" page? This will be fairly straightforward if your site is small but some HTML editor programs, such as Dreamweaver, provide tools to help you graphically visualize the layout of your site, which can be very useful for larger sites. Help users naviagate through your site by keeping them informed about where they are in the site and where they have been. For example, note Web Guide's top and bottom navigation bars on this page.

3. Page Design

How will your pages look? Graphics can add interest but content should take up the majority of the page space. Some design tips:

Other resources:

Design Issues

Frames

Frames were never part of the original HTML language because they pervert the original concept of a Web page as being one unit of information with a unique address. Generally speaking, use of frames should be avoided for a number of reasons:

  1. They can interfere with navigation.
  2. URLs sometimes stop working.
  3. Some browsers can't print framed pages correctly.
  4. It can be difficult to get frames to work correctly.
  5. Search engines have trouble with frames.
  6. Some browsers can't bookmark frames correctly.

That said, HTML 4.0 introduced a new type of frame called inline frames which make it possible to create floating frames in your pages without running into the difficulties mentioned above. Unfortunately, although Internet Explorer 5 does currently support inline frames, Netscape 4.6 does not, so we can't recommend you use them.

If, after these warnings you do decide to use frames, you should use the noframes element to warn users and allow them the option to view the information without frames. For examples, see the World Wide Web Consortium's (W3C) document Frames in HTML Documents.

Tables Used for Layout

HTML was written to be used as a language for presenting the structure of technical documents and was never intended to be used to do graphical page layout. Early in the history of the web, resourceful web page designers misused HTML in creative ways to make their pages look the way they wanted. The most common abuse was (and still is) using tables to handle complicated page layout.

Tables are supposed to contain tabular data and this is what browsers expect to have to display. When a table contains vertical linear data non-graphical browsers such as screen readers for the blind or text based browsers like Lynx will read the table by rows instead of columns and so the data ends up as jumbled nonsense.

CSS

The solution to the problem of how to control the layout of web pages is found in Cascading Style Sheets (CSS). CSS is a layout language designed to be used in conjunction with HTML to control page layout. With CSS you can define placement of content elements to a fine degree, using absolute or relative measures. CSS also helps maintain consistency of design across a site since you can use the same stylesheet for all of the pages.

CSS is supported to some degree in both of the latest versions of Netscape and Internet Explorer, but the support can be spotty, and can even vary from one platform to the next. If you decide to use CSS for your site, make sure you test with both browsers on multiple platforms, if possible. For more information about CSS see the W3C's resource page on CSS which includes links to online tutorials and other documentation.

Java applets, Javascripts, and Graphics Containing Content

What ties these three items together? They are all features of web browsers that users can, and do, turn off. Some users routinely turn off graphics and Java in their browsers to speed up download times if they are working over a low bandwidth connection. Some users will turn off Javascript to protect themselves from potential security breaches. If you use Java or Javascript on your pages to provide necessary content, you should make sure that your pages make sense without them, or else provide alternate ways of accessing that content. If they aren't being used to present content then you might ask yourself why they are there!

An example of graphics containing content would be an image of a button with a link description on it. Unless the ALT attribute is added to the IMG tag, the link functionality will be lost to users with graphics turned off or users using non-graphical browsers.

Colors

Keep in mind that you want your pages to be easy to read. Experimenting with unusual color combinations can reduce readability for users and can actually make the pages unreadable to people with visual problems such as color blindness. For guidelines see the Lighthouse International page on Effective Color Contrast.


to IntroductionPedagogical Considerations Table of Contents Typical Components to Typical
Course Page Components


Did you find this page helpful?          or Detailed Comments


Web Guide was created by Academic Computing Support at MIT.
Last modified: 08/22/2001