Illinois Online Network myion

Resources    online education resources

Guidelines for Academic Web Sites

laptop with online class

Many web sites are geared toward commercial uses with their main purpose of catching the web surfer's attention toward their product. Educational web site concerns are different in that they try to produce classroom environments that are conducive to learning yet attractive to the students - not to simply catch the wandering surfer's attention.

Below are some guidelines that may help you to create a great learning environment in your virtual classroom. More detail can be found at the Yale C/AIM Web Style Guide or other web design sites that are freely available.

bulletOrganize your pages into a Main Entrance, Main Work Pages, and other auxiliary resources.

Many times the Main Entrance and Main Work Pages are the same. Your main work pages are where you would expect students to spend the most time, probably including your syllabus in it. The main work page should be one that students can bookmark and use easily.

bulletKeep graphics to a minimum on your main work page.

Since this is the page students will enter most often, it should be fast to load. For students using a modem to access your class, download time for graphics can slow down to a crawl making it difficult to wait for. Test out your pages by accessing it from a modem limiting the download time to no more than about 10 seconds. If you need to use large graphics in your course, use them on other auxiliary pages by using a thumbnail sized image to view or click on to see the full image. It is also advisable to test viewing your pages on a 640x480 resolution monitor (or temporarily change your screen to that resolution) so you don't cut off viewing portions of the page which some students may experience. Having to scroll over to see the rest of a web page can be a bother.

bulletLength of a web page.

Although most commercial site designers advise not to have lengthy pages that you have to scroll through, some academic sites often need that aspect for easy access to the course information. If a student needs to scroll up and down a syllabus or assignment page (a main work page), they can do so and even print it out all at once. If the page is broken into many small pages, printing could become a nuisance if needed. If you are using a long scrolling web page in your course, be sure to include some hyperlink jump points at the top or bottom of a section so that students can go to other sections without having to scroll through the entire document to find it. If used wisely, frames can be used in an efficient manner as a table of contents for a work page.

An excellent resource article Using Instructional Design Principles To Amplify Learning On The World Wide Web does not necessarily follow these guidelines. It is a lengthy article broken into separate web pages but it has navigation buttons at the bottom of each page for easy access. However, if you were to try and print this article, it would take some time having to do so for each individual web page.

bulletKeep layers of web pages in your site to a minimum.

The various access points to course topics and assignments should be kept to a minimum so that students do not have to keep clicking and clicking to find their actual assignment page for a single topic. Your main working pages should serve as the base, with each section to be accessed only one, or possibly two, clicks away.

bulletMake background colors easy to view along with text.

Try to avoid colors and color combinations that are hard on the eyes and may not print well. Light and dark contrasts for background and text work best.

bulletArrange information in chunks surrounded by some space.

Trying to read long paragraphs or entire papers can be difficult online. Choose fonts such as Times, Helvetica, or Arial that most users will be able to view. You can also break up long passages with small graphics, horizontal lines, or bolded topic headings.

bulletAbility to print out course pages.

As mentioned above, keeping information related to one topic on one scrolling page makes it easier to print out for students. Also, when linking to an outside URL, show the actual URL as well as its title so that students can print out the page and use it at another location or copy them into another reference easily. When spelling out both the resource's title and URL, you might want to make its' link from only the URL or its' title to make it look a bit more neat.

bulletFrames as site organizers.

Although frames can help organize a site, they can make it more difficult for a student to print out material and bookmark individual portions of the site. Of course, you can always give your students instruction on how to right click with their mouse inside a frame to open that particular frame in a new browser window or bookmark the frame. However, the alternative of not using frames can sometimes make your site a more accessible one.



Home | Educational Resources | Web Design

Home | Online Courses | Institutes & Presentations | Educational Resources | Initiatives | Institutional Partners | About ION

uiuc uic uis