http://helpdesk.stgregorys.edu/publishing/webtips.htm
http://helpdesk.stgregorys.edu/publishing/webtips.htm
Overview | Before
Beginning | Overall Style
Headers | Body | Footer | Problems | Resources | Credit
Although this document discusses using a web site as a distance learning tool, most of the ideas presented are applicable to nearly any web site or page. In addition, the document presents a breakdown of the basic components of the web page and their uses and provides good tips for managing your web pages.
- Identify your target audience and design for their needs. There are four key steps to this: identify the instructional problem; assess the instructional needs, analyze the audience; and develop instructional goals.
- View sites done by others and see what they have done. This will give you many good ideas and also show you what not to do.
- Know what you want to do. Have a clear statement of goals that you want to accomplish for your site.
- For a course Web, do your syllabus first. This will help you to define your goals, to decide what information should be on the Web and what should be delivered through other technologies, and give you a rough idea of the layout of your site.
- Separate curriculum delivered through the Web from curriculum delivered via other means.
- Draw a rough diagram or write up an outline of how the site will be structured. Start with your home page at the top and work from there.
- Developing a Web site is an ongoing commitment. Make sure that long term maintenance and further development are covered in your goals.
- The home page (Default.htm) of the site is the major gateway to the site. It is recommended that this page load as completely as possible within the screen and contain only the major navigational links. Major links are the broadest topic categories within your site.
- Images should only be used if there is sufficient reason to justify their use. Sufficient reason includes:
- Delivery of information in a more effective manner than plain text.
- Creating a graphic identity such as a logo or distinctive navigational features that give visual cues to the visitor.
- Increasing the aesthetic appeal of the site.
- Only good quality images should be used.
- Multimedia should be used only when there is sufficient reason to justify their use. Sufficient reasons include:
- Delivery of information in a more effective manner than plain text.
- Increasing the aesthetic appeal of the site.
- Audio files should never load automatically.
- Navigational elements need to be absolutely consistent throughout the site. Such things as link colors, icons, wording of navigational links must be absolutely the same. Consistency on these points are essential to the ease of navigation for your visitor. Otherwise, you are constantly challenging them to relearn how to move through your site.
- Good, logical "flow" or navigation throughout a site is essential to Web based training. These navigational links differ from others because they take the visitor from one page, one concept, to another. They are also the only true way to structure the Web learning experience. Make the most of this by doing the following:
- Divide the presentation of your core content into logical and linear sections. Content can be divided into weeks, sections, topic categories, and lessons.
- Develop links that take the student from one section to another seamlessly.
- Develop digressions from the main content items off the referring page. Then, develop links to bring them back to the main content item that referred them.
- Look at what others have done to get good ideas about how you should structure your site (and see what bad design you should avoid).
- Always include a link back to the home page in case the student gets lost or needs to skip sections.
- Always include a mailto link and your email address so that your student can contact you with questions.
- Because of the design challenges hypertext presents, Web pages need to be free standing. Make each independent by incorporating three elements: a header, the body or content of the page, and a footer.
- The background color or image, text and link colors, font type and size used should be absolutely consistent throughout the site.
- People are familiar with the default colors of links and their use is recommended. The default colors for links should be used unless there is a good aesthetic reason to change them.
- Pages should be as concise (and short) as possible. Separate content by elemental topics of discussion onto separate Web pages. This includes the separation of digressions, multimedia, and large images into separate pages linked back to the main content item page.
- Pages should fit horizontally into the screen and not scroll off to the right. This annoys students and takes away from the ability of the page to deliver information.
- Text must be easy to read. The easiest way to achieve this is through high contrast between the text and background colors. Be creative but use your best judgment. If you are unsure, the recommended color for all non-header text is black and the recommended background color is white.
- Special features such as frames, animated GIFs, scrolling marquees and all types of active content including Java and JavaScript should not be used unless there is sufficient reason to justify their use. This would include delivery of information in a more effective manner than plain text or unique aesthetic and interactive appeal. They should not be put into a site just because they are cool. Blinking text or graphics should never be used as they are very distracting and annoying to many students.
- Pages should look good on both 640x480 and 800x600 screen display areas, because this is what most people have. Furthermore, elements of the page should be browser independent and should look good at different color depths. Finally, pages should be able to load quickly (under a minute-ten to fifteen seconds is preferable). To accomplish this, the designer can:
- Test the pages in different browsers to see how they look. Browsers are not created equal as to how they display page elements.
- Resize their display area to 640x480 when creating for the web to make sure the pages will look good at the lowest common denominator.
- Set their color depth to 16 colors and then view the pages at that level to see how backgrounds and images appear.
- Access the pages from different computers and connections, including dial-up, to see how quickly the pages will load.
Overview | Before Beginning | Overall
Style
Headers | Body | Footer | Problems | Resources | Credit
Headers concisely and accurately summarize the content of the page and it’s sections. The font size, type, color and other stylistic elements should be as consistent as possible (maintaining the same stylistic themes) throughout a web site.
- Headings and text in large fonts – when reading large fonts, the students can get the feeling they are being shouted at. Also big headers push the links down further on the web page and the students must scroll to the links.
- Headings in extremely bright colors or multiple colors – bright colors are often hard to read. Avoid using red as a heading color, red connotes a warning. Avoid using multiple colors in a heading, it is too distracting.
- Avoid changing the font type and size with in a section of text. Consistency is the key.
- Avoid "noisy" backgrounds for course web pages. These may be very appropriate for personal home pages but not for educational pages. For easy reading and consistency pages should be the same background color. For easy reading by students, light backgrounds with dark text are the easiest to read.
- Color in general: Make sure that your text color can be read over top of your background color. Remember that students will have different settings on their computers and will be using a variety of web browsers and the color settings will vary. It is important to test your web course at a variety of sites and using a variety of browsers to make sure your pages can be read.
- Navigational links not consistent – in the footer of each page there should be a link back to the homepage and to the mailto link.
- Avoid the horizontal scroll.
- Avoid using an underline in your text. It will be mistaken for a link.
- When using tables do not size for pixels but rather for the size of the page.
- Link names – filenames for web pages should be all one word, in lower case, with no spaces or outstanding characters and should be meaningful. Titles should be the same as the header on the page.
Online Web Design and Style Resources
Home | HelpHome
| Overview | Before
Beginning | Overall Style
Headers | Body | Footer | Problems | Resources | Credit
Credit: Most of this page was
obtained from the Dakota State University Faculty/Staff
Handbook page located at http://www.courses.dsu.edu/disted/facstaffhandbook.htm
© 2003 St. Gregory's University Shawnee, OK 74804
(405)-878-5100
Last Modified on:
12/09/2003