Planning and Designing an Instructor Web Page A. Craig Dixon & Tang Suppacheewa October 26, 2007

Creating Steps 1.Planning 2.Gathering Materials 3.Developing the Content & Designing 4.Creating the Site 5.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, 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.