CSUN  Wordmark
Page Description

The following page is a three column layout with a header that contains a quicklinks jump menu and the search CSUN function. Page sections are identified with headers. The footer contains update, contact and emergency information.

Online Instruction >> Pedagogy >> GOOD WEBPAGE DESIGN

Whether you use Microsoft Word, HTML, Netscape Composer, Arachnophilia, Dreamweaver, Frontpage, or some other html editor, the design principles of good webpage design remain the same. Always consider the download time for your students and the ease of navigation first. WebCT and Blackboard software have their own navagation built into their systems, but the suggestions below are otherwise relevant.

Download time

  • The faster the better when it comes to surfing webpages. The average viewer waits 8 seconds before becoming bored and moving on.
  • If your pages are meant to be viewed from campus, feel free to add larger files. If mostly students will be accessing your pages, keep the files small or warn them about a possible wait, so they can choose another way to access other than a telephone modem.
  • Text takes the least amount of time to appear on a webpage.
  • If you are working on campus or from home with a DSL cable line, try to test your pages on the slower type of telephone line with a modem that your students might have at home.
  • Graphics, video, and audio take much more time to load. Weigh the advantages carefully when choosing time-intensive files

Navigation and Interface

  • A continuous navigation list of links that stays the same on all your pages is important for sites that are more than a few pages.
  • Plan your navigation first, with a homepage and clearly designated subpages. Drawing a storyboard of all the pages and how they connect is a good idea. It should be composed like any good outline, with important information on early pages leading gradually to less important details. This is particularly important for course webpages because usually you don't want the students to miss anything.
  • A table with calendar dates works well for course syllabi. Links to assignments and readings can be put inside each dated table cell, which makes expectations easy for the student.
  • Keep the pages consistent with the same design, colors, and interface so that it is clear when someone strays off your pages.
  • Include links back to your homepage on each of the subsequent pages.

Text

  • Decide whether a page is to be read on screen or printed by the student. Onscreen text should be short--one or two screens in length. If you have a complex and long schedule or article, put instructions about printing or downloading at the top.
  • Only use underlining for hypertext links, never for plain text or emphasis.
  • Fonts that are sans serif are more legible on screen. Possibilities include Ariel or Helvetica.
  • Create dark text on light backgrounds for legibility and ease in printing.
  • Write as casually as you speak for text that is meant to be read on screen.

Graphics

  • Less is more.
  • Background tiles make on screen reading more difficult, as do moving isolated icons, and blinking text.
  • In general, create jpeg files for photographs and gif files for drawings.
  • Files under 20K are best for fast downloading times.
  • Manually include in the html a tag labelling your graphic. Non-graphical readers, particularly the visually-impaired who need to use audio software, need to know at least the name of your graphic. Ex. within the image tag put ALT="picture of me, a long-bearded and smiling professor", so the whole image tag would look like: <IMG SRC="myimage.jpeg" ALT="picture of me, a long-bearded and smiling professor">
    Section 508 Compliance in the Rehabilitation Act of 1973

Test and Retest

  • Test your webpages with both Netscape and Internet Explorer for formatting, because they read mistakes in the html somewhat differently and also handle javascript in different ways.
  • Test your webpages on campus and from a modem at home for speed.
  • Have someone else test your site, especially all the links, and give feedback.
  • Make sure that you understand how all the software that your students will be accessing works.

Feel free to break any of these suggestions, if you have a good reason.