Planning and Designing an Instructor Web Page

A. Craig Dixon & Tang Suppacheewa

October 26, 2007

Creating Steps

1. Planning2. Gathering Materials3. Developing the Content &

Designing4. Creating the Site5. Assessing and Evaluating

Planning Your Page

• When planning your page, you need to:– Identify your goals, objective, and

audience– Use Storyboard

Gathering Materials

• Images, Documents, Presentations, Links, Etc.– Electronic Copy– Hard Copy

• Search Engines– Copyright Law– Educational Sources: SMART board,

Microsoft, etc.

Developing the Content & Designing

• At minimum, your web page should contain:– Your name, office number and hours,

email address, and office phone number– The academic year and semester– A list of the courses you teach (links to

syllabi are even better)– Date of last revision

Creating the Site

• Choosing your applications– Affordable / Accessible– Easy and friendly to use– Meet your needs / Serve your purposes

Page Layout• There is a tendency in document design to center

everything. Resist this urge. – Left-justified text is easier to read and looks more

professional.• Images should be medium to small size (no more

than 400 pixels on the longest side.) – Images are complementary elements and should not be

the focus of the page.• Common headers, footers, sidebars, and other

page elements make your site more coherent. – Students learn to locate the common elements (like

navigation links) on your page, and are consequently able to find what they are looking for more quickly.

Navigation• Your site should have logical divisions (home,

classes, schedule, bio, etc.) – Make sure a link to each logical section exists on each

page.• Make sure your navigation links appear at the

same place on each page. – Common locations are in a header or in a sidebar on the

left or (less commonly) right side of the page.• Make sure your unvisited links are a different

color than your visited links. – This will help students determine whether or not they

have already viewed a page.

Formatting: Fonts

• Use common fonts; others may not render correctly in the student’s browser.

• Use sans serif fonts. Studies show these fonts are easier to read from electronic media.

• Examples of good web page fonts: Arial, Verdana, Tahoma, and Trebuchet MS.

• Use bold and italics sparingly. Try to avoid underline altogether.

Formatting: Colors• Choose foreground and background colors

with high contrast.– Black on white and white on black may be boring,

but they are the easiest to read.– Remember that colors you think contrast well (e.g.

red and green) may not contrast well to a colorblind student.

• If you use background images, make sure they are extremely faint and provide good contrast to your chosen foreground color.

• Use a consistent color scheme throughout your site.

Formatting: Images• Avoid blinking, flashing, or moving images.

– They are annoying to most users and can trigger seizures in some.

• Don’t include text in an image.– If the image is resized, the text will distort.– If the user resizes the text in his or her browser, text in

graphics won’t resize.– Text in graphics doesn’t get indexed by search engines.

• Always provide “alt text” to describe your images.– “Alt text” helps text only browsers and screen readers to

make sense of your images.• Don’t overuse images. They can take a long time to

download.

Tools and Formats• There are three main tools of choice for

instructors designing personal web pages.– Microsoft FrontPage– Microsoft Word (Save as HTML)– Adobe (Macromedia) Dreamweaver

• Additionally, there are a few choices for formats of materials that won’t be converted to web pages.– Microsoft Word (DOC)– Adobe Portable Document Format (PDF)– Rich Text Format (RTF)

Choosing a Tool• The college does not mandate use of one web

authoring tool over another. However, we strongly recommend Dreamweaver for the following reasons:– FrontPage and Word HTML is hard to debug and

maintain.– FrontPage and Word HTML usually renders unpredictably

on alternative browsers like Firefox, Opera, and Safari.– FrontPage and Word create web pages that are

unnecessarily large and take longer to download.– Dreamweaver is installed in the TEC, and the TEC

provides professional development opportunities in Dreamweaver.

Choosing a Format• It may be time consuming to convert syllabi and other class

documents to HTML format. Students can download them directly, but may or may not be able to view them, depending on format.– DOC – Only users with Microsoft Word can view the document. A

bad choice, since Word is expensive.– PDF – Users can download a free viewer to see the files. The viewer

is pre-installed on many computers. • If the viewer isn’t installed, the download is prohibitively large for dial-up

users. • PDF also requires you, the site creator to have a (not free) PDF creation

tool.– RTF – All Windows users have Microsoft WordPad, which will open

RTF files. Word and WordPad supports RTF natively, meaning you can create them without special tools.

• Though it is probably the least well-known of the three, the recommended format is Rich Text Format (RTF).

Assessing and Evaluating

• After you’ve created your page, you may want to ask students for their feedback.

• You may think you’ve done an excellent job, but if the student doesn’t think so, it doesn’t matter.

• Students often have really great ideas about what additions or changes would be helpful.