Educational Web Design

Design simplicity

One of the most important aspects for effective Web design is to know your audience and design your page in a way that facilitates its use by your target audience. Your site should be easy to navigate, easy to load and easy to read. In general this means minimizing gimmicks - flashing, scrolling and moving text or images are distracting to the reader. This is not to say that animations are not useful, animations are one of the great strengths of the Web, however, animations and text often do not mix. For example, compare these two Web lessons on atomic structure:

While both of the examples provide text and animations, the use of embedded animations on the left makes the text difficult to concentrate on. The page on the right contains links that load pop-up windows to display animations. Allowing the reader to finish the text, before focusing on the animations. For a similar reason, it is generally a good idea to avoid complicated page backgrounds when designing educational materials. Background images and color are distracting to the reader.

Printing

Studies have shown that people read between 25% and 30% slower from a computer screen compared to printed material, thus most people prefer to print out informational Web pages. This is especially the case with students who often print out class Web pages, returning to the Web to view links or other material. Therefore it is important to take advantage of the strengths of the Web while also designing your page to be printed.

Some browsers do not print out background images or color (to save your printer's ink cartridges), therefore if you choose to use white, or light colored text on a dark background, student's printing out your pages will see blank paper, as illustrated seen in the table below.

Another note about designing for print, while Web page text can extend as wide as your screen permits, paper is a fixed size. Thus, it is often advisable to design your page with a fixed width (≤ 650 pixels) to accommodate printing. Limiting text width can be easily done with tables, discussed below under positioning.

Positioning

Positioning can be a challenge on the Web as many of the standard word processing positioning elements (tabs and indents) do not work well on the Web. Positioning text (and limiting width) can be accomplished using tables. This page is actually contained within one large table that has been limited to a width of 610 pixels, thus the appearance and layout is standard no matter how large your user's monitor.

Tables can be used to standardize the presentation of your pages as well as to align and indent material within a page. While tabbing does not work well on the Web, tables with hidden borders can be used to accomplish a similar purpose. For example, outlined text, as seen below, is still possible on the Web by using tables.

The effect seen above is accomplished by using tables. This can be seen more clearly if we make the table borders visible:

Tables are also useful in Web page layout because they can be 'floated' on the side of text thus allowing text to scroll around the material inside of the table. Tables can be 'floated' either to the right or left of other Web material and can be inserted at different positions in a paragraph.

Images

Graphics are an important addition to Web documents. Unlike other file types where images are saved within the file, Web images are stored and loaded separately from the page itself. For example, the rainbow image below is actually stored as a separate file on our Web server. Standard Web graphic formats include .jpg files (generally for photographs) and .gif files (generally for drawings other images). When using graphics, keep in mind that the majority of people still connect to the Web via 28.8 and 56 kbs modems, therefore file size is an important issue. Graphics should be used conservatively to emphasize important points and graphic file size should be minimized (using imaging software).

Color

Color is an interesting issue on the Web because some browsers have a limited color 'palette', meaning that the browser can only display certain colors (about 216). This becomes especially important when you are creating image files in other documents. For example, a simple rainbow image displays a smooth transition of color:

The same image displayed within some browsers is 'dithered', meaning the range of colors are approximated by similar colors that can be displayed and the image appears as a series of small rectangles in different colors: 

Defining Styles One of the most exciting advances in Web programming in recent years is the use of external style sheets. For sites that have multiple pages with similar styles, or for pages in which a single style is used over and over again (such as the yellow headers at right), style sheets provide a quick and easy way to maintain your page. A style sheet is a document that is contained outside of your Web page that defines the style of material in your page. For example, the yellow headers at right is tagged within the current page with the following code: 

<div CLASS="nav">
<b>Web Design</b>
</div>

DIV.nav B {font-family: Helvetica,Arial,sans-serif;
font-weight: bold;
font-size: 12pt;
color: #cc9900;}

Thus rather than defining every header as bold, yellow Helvetica font, we simply define each header as div Class="nav". The page you are currently viewing is linked to the style sheet within its document header as follows:

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

What makes style sheets so convenient is that when you decide to change a style (for example, a font color), you only have to do it once, in the style sheet, rather than on every single page or in every single block of text.

There are many more sources of Web design information. For your convenience some helpful links are included at the right side of this lesson if you would like to continue learning about Web design.