Building a Class Web Site

Last updated: November 28, 2016

Creating a class Web site can be an excellent way to communicate to your students, give them access to all the course material, and direct them to the resources you consider important for their learning. Building an effective course Web site requires a good deal of planning and preparation. This guide outlines practical teaching and technical points to help you plan your class Web site.

Gather all the Content

Start collecting all the documents, images, audio/video, links, presentations and the other material that you would like to include in your class Web site. Save them in a single folder on your computer. This will help you get a sense of what you need to include in your Web site and will save you time once you start building the site. Keep in mind that video and other multimedia need to be prepared before being put on the Web site.

Consider the Constraints

You have to comply to a specific Web design pattern or other rules established by your department. Check with the administration of your department to make sure you can choose the look of your course Web site.

Organize the Site

Think through the whole site and make a list of all that needs to be included in it – content, images, links, resources, contact information, and so on. Start “chunking” the content in sections, for example “Syllabus,” “Assignments,” “Lecture schedule,” and so on. Think about what you would like to be included in the home page of your Web site and how you foresee the other pages to be organized and linked to each other.

Start creating a site map: draw a chart of how you want the parts of your Web site to be linked together. To better define the layout of the site you can build a wireframe, a visual representation of the structure of each page. Spending some time planning your Web site will save you a lot of time and trouble when you start building it and, most importantly, will help you make your site more effective and usable.

Consider Your Audience Perspective

When creating a Web site it is important that you always keep in mind the perspective of those who will be using your site. What are their information needs? What would students like to find in your course Web site? Try showing your site to some of your students before putting it online, or ask for their feedback at the end of the term. This will greatly help you improve your site.

Borrow Ideas

It is a good idea to look at what other people are doing and develop your own design ideas based on other sites. What do you like or dislike about other course Web sites? Keep in mind that images and text on the World Wide Web are subject to copyright.

Link to other resources

On your course Web site you can post links to outside resources to help your students quickly find reliable information related to your course. You can create links to research projects at other institutions, online dictionaries, refereed online journals, and Web sites of companies related to coursework, for example. Remember to always check that the links are working and that the sites linked are still running.

Use UW Libraries Electronic Reserves

An easy way to make course materials available in digital format to your students is to use the electronic reserves system of the UW libraries. The electronic reserve system enables you and your students to have remote, 24 hour a day protected access to unlimited high-quality copies of your course materials. Contact the reserve librarian to find out how you can put your reserve items on the Web.

Strive for Visual Coherence

Colors or animations may look impressive at first, but tend annoy the viewers. Try to create a sober visual environment where students instantly know they are looking at your course Web site. Use consistent color schemes and formatting conventions across the pages in your course Web site.

Keep Images Small

You can easily include digital images to your course Web site. However you should keep in mind that graphics on the Web take much longer to load into a browser than plain text. Students with a slower connection to the Internet may find it difficult to access your Website if you use heavy graphics. When working with digital images you should keep the file size as small as possible.

Keep Tables Small

Just as with images, you should consider the physical size when inserting them on Web pages. Different monitors have different numbers of pixels and this will affect the amount of a table that can be viewed on the screen. As a general rule, tables should not be more than 550 pixels wide.

Direct Students to Necessary Plug-ins or Helper Applications

Some file formats, such as portable document format (.PDF) or QuickTime movies, can be accessed from the Web only if your viewers have additional software installed on their computers, such as the Apple QuickTime plug-in or Adobe Acrobat Reader. If you are publishing information in these formats, you will want to direct your viewers to locations where they can download these extra pieces of software in order to access your information. While computers in the University of Washington computing facilities have the most common “helper applications” installed, this might not be true for your students’ home computers.

Consider issues of access for the visually impaired

While viewers can change settings on their computers to make text larger, they can’t do much to change the colors you choose for your pages. Strive for strong contrast between text and backgrounds, and remember that different computers display colors differently, potentially making your color combinations unreadable. For more information, click here.

Keep site content dynamic

While the visual design of your site should be consistent, you should frequently change the content of your Web site. This will encourages students to visit your Web site on a regular basis. Make your content dynamic by posting announcements, ideas, and links that change often on the opening page of the site. You may also want to consider holding back the content you have developed and adding it in stages over the course of the term as it becomes relevant, rather than posting everything at once.


Top 10 Web Design Mistakes:

Guidelines for Link Design:

Learning to code HTML: