Teaching and Learning Center

Cabrillo College Web Style Guide

Developed by the Teaching & Learning Center – www.cabrillo.edu/services/tlc - 831-479-5030 - tlc@REMOVE-BEFORE-SENDINGcabrillo.edu

I. INTRODUCTION
II. USE OF THE CABRILLO WEB SITE
III. OVERVIEW OF THE PUBLISHING PROCESS
IV. CREATING YOUR WEB SITE
V. ACCESSIBILITY

I. INTRODUCTION

The purpose of this guide is to assist faculty and staff in creating and maintaining their own Web sites within the Cabrillo College Web site. These guidelines will help the college maintain its unique identity and positive public image on the Web. The Style Guide is organized into four major areas:

    1. A description of the purpose and appropriate use of the college Web site
    2. An overview of the publishing process and your role as site owners.
    3. What you need to know when creating your Web site
    4. A description of accessibility standards required by law.

It is important that you read this entire guide before creating or revising your Web site. The Teaching and Learning Center staff, is available to help you with the process. Please contact the Teaching and Learning Center staff if you need support during any step of developing your Web site.

A. Definitions

Accessibility: For the purpose of these guidelines, accessibility refers to federal standards that ensure Web sites are accessible to people with disabilities.
Global Navigation: A collection of links that provide access to the top-level areas of the college's main site.
Local Navigation: A collection of links that guide visitors through a specific Web site within the main site.
Main Site: The Cabrillo College Web site.
Main Server: The server that hosts the main, or “live” site.
Publish: To post Web pages on the college’s main server.
Site Owner: The person with the overall responsibility for maintaining accurate information on Web sites within the main college site. The site owner should be a full-time staff member.
Site Editor: The person who performs the hands-on work of creating and maintaining a Web site. The site owner and site editor may be the same person.

II. USE OF THE CABRILLO WEB SITE

Cabrillo College recognizes the World Wide Web as an important electronic resource that will enhance student learning and the teaching, research, marketing, and administrative functions of the college.

A. Appropriate Use

  1. The Cabrillo College Web site may not be used to create Web pages for personal business, personal gain or any purpose other than college or district business.
  2. To facilitate the sharing of information in the support of college departments, programs and functions:
    • Faculty may create and maintain personal Web sites containing their curriculum vitae, office hours, course syllabi and any other information in support of that faculty member’s role in the college. For assistance with Web based instructional development, contact the Teaching and Learning Center.
    • Faculty and staff may create and maintain Web sites for the support and dissemination of information related to the purpose and goals of an educational or administrative department, or other college entity.
    • Students working under the responsible, direct supervision of a staff or faculty member may create and maintain Web sites for the support and dissemination of information related to the purpose and goals of an educational or administrative department.
  3. To promote college programs and activities to the general public:
    1. Faculty and staff may create and maintain Web sites for the purpose of promoting a college program, event or service, or community program or event. It is recommended that such sites be coordinated with the Marketing and Communications Department.

III. OVERVIEW OF THE PUBLISHING PROCESS

A. Creating a New Web Site

The process for developing new Web sites within the Cabrillo site is outlined below.

    1. You (the site owner) must contact the Teaching and Learning Center and request space on the Web server. You will need to designate a person (site editor) who is willing and able to maintain the Web site information.  That person most likely will be you.
    2. The Teaching and Learning Center in conjunction with Computing Resources will:
      1. Determine the site’s location within the information architecture of the main site.
      2. Make page templates available on the TLC web site to assist site editors with creating pages that meet accessibility standards.
      3. Provide you a user name and password.
      4. Provide advice, answer questions and help you build an effective site.

B. Modifying an Existing Web Site

    1. Unless other arrangements have been made in advance, it is the responsibility of the site owner to revise and update their Web site as necessary. Site owners should test their pages on both Mac and PC platforms using both Internet Explorer and Netscape browsers.
    2. Sites may be periodically reviewed for timely updates and accuracy. If a site has not been updated in six months and it contains outdated information, the Teaching and Learning Center will notify the site owner that revisions are needed. Sites that are not updated may be subject to removal until corrections are made. No information is better than wrong information.  If you need help updating your site's content, contact the Teaching and Learning Center.

C. About the Web Team

Cabrillo College Computing Resources, in conjunction with Marketing and Communications, and the Teaching & Learning Center contribute to the management of the main college Web site and the publishing process, which includes, but is not limited to:

    1. Administering server side applications.
    2. Establishing graphic design, look and feel and navigation structure.
    3. Coordinating tracking and measurement of visits to sites.
    4. Managing the overall process of creating, modifying and deleting sites and pages.
    5. Conducting Web site surveys, reviews and usability testing.
    6. Developing and managing content.

The Teaching and Learning Center’s role includes helping site owners make sure their information is presented well and that content is edited and presented optimally from an academic standpoint. The TLC can provide templates, clip art and other resources to help site editors develop and maintain their Web sites. The TLC is available to review and edit pages after they are developed.

The goals of the Teaching and Learning Center are to:

    1. Maintain a functional, attractive and easy to use TLC Web site that promotes
      instructional technology integration at Cabrillo College and is accessible to all audiences.
    2. Make the best use of the Web site as an instructional tool, providing online information for internal and external audiences by:
      1. providing up-to-date information on the instructional uses of technology
      2. supporting Cabrillo's academic mission and College Master Plan
      3. addressing the instructional needs of all primary users of the Web site, including current and prospective students, faculty, staff, community members and businesses
    3. Support faculty and staff in developing their Web sites
    4. Make use of the latest web technologies while meeting the requirements of the Americans with Disabilities Act, as well as the needs of users with slower modems and older or text-only browsers

Any staff member of the Teaching and Learning Center can provide you with general information about publishing your Web site. Contact:

David Warren, ext. 6270, email dwarren@REMOVE-BEFORE-SENDINGcabrillo.edu or
Francine Van Meter, ext. 6191, email frvanmet@REMOVE-BEFORE-SENDINGcabrillo.edu

IV. CREATING YOUR WEB SITE

This section is designed to help site owners and editors develop Web sites that are easy to maintain and use, as well as project a positive image of Cabrillo College. It contains important information you need to know before you begin your Web project. Helpful hints and links to useful Web design sites are also included here.

A. Directory Structure

If you have a large number of files compromising your web site, please keep your content in subdirectories named according to the list below. A general principal to follow is to group similar items into their own directories. If your site is small, all files can be grouped together in the same directory.  All directory and file names should be lowercase.

If your sites are complex, consider the following:

C. Visual Appearance

We encourage you to develop a site that is creative and stimulates visual interest. We also encourage the use of design elements that will establish a thread of continuity throughout the Cabrillo Web site. It is important to make it easy for a visitor to recognize that he or she is exploring a site that is part of Cabrillo College. To accomplish this goal, we ask that you work with the Teaching and Learning Center to help you build a Web site that identifies with the message of the college.

    1. All content should reflect the positive image and reputation of Cabrillo College.
    2. Designs and images must not display any illegal or unauthorized copyrighted material.
    3. A consistent look and feel should be maintained throughout your site.
    4. The official Cabrillo College logo should be displayed prominently on your home page.
    5. When a person views any Web page on the Cabrillo College Web site, he or she should immediately be able to answer these questions:
      1. Is this page part of the Cabrillo College Web site? (Please use logos from the Logo Library.) The Logo Library is located at: http://www.cabrillo.cc.ca.us/instruct/tlc/image_library/index.htm
      2. What is the page title?
      3. Where is the local navigation?
      4. Where is the global navigation?
    6. Design your pages to be viewed correctly at a screen resolution of 640x480. If a visitor to your site will need to scroll down the page to answer any of the questions in #5 above, the design needs to be modified.

D. Navigation

  1. To enable visitors to find information easily, each site must contain an organized navigation structure appropriate for its size and scope. This navigation should allow the visitor to return to your site’s home page from any page within your site and should be placed in a consistent location on each page. Your site's navigation should:
    1. tell people what is available on the site,
    2. help them quickly get to the parts they want, and
    3. make it easy to request additional information.
  1. Every page should contain the following elements:
    1. An e-mail link to the site owner
    2. A last updated message
    3. A navigation component linking back to the home page of the main site
  1. If you would like assistance in making sure that your navigation scheme is user-friendly, please contact the Teaching and Learning Center.

E. Content

  1. The content of each site is created and owned by the department or individual who has requested the site, or who is responsible for that area of the college, unless other arrangements are made in advance with the Teaching and Learning Center.
  1. All hyperlinks must be functioning.
  1. A Web page, including all images, should load easily for users with slower connections and older equipment. Many HTML editing programs can tell you the total size of your page. If you need help determining the size of your pages, please contact the Teaching and Learning Center.

F. Helpful Hints

Keep the following points in mind when developing your site:

  1. Make your site easy to use.
  2. Keep your Web site current and accurate.
  3. Assist people who link to your site.
  4. Test your site on more than one browser, more than one platform.

Make your site easy to use.

    1. Remember to name your home page "index.html." If you don't, people may connect to your directory and get a raw directory listing or error message instead of your starting page.
    2. Keep the home page as short as possible. Don't put everything into one huge page because people won't read it.
    3. Visitors often come to your site via a search engine, bookmark or link. They don't always come through your "front door." Remember to put a link on every Web page in your site back to your home page and to the Cabrillo home page. Using the page template will help you organize the navigation on your site.
    4. Keep image file sizes relatively small. Many people are using modems from home. Something that loads quickly on a machine on campus could take several minutes to load on a machine using telephone connections. Is the picture really worth frustrating someone?
    5. Be careful with background colors and background images. Not all background colors are displayed equally across browsers. Some background images may decrease readability of the page.
    6. Break up your text into small paragraphs, or "chunks." Make text lines short. If you use tables to control layout, limit text from spreading more than 400 pixels (5.5 inches) across the page. Visitors scan rather than read Web pages. Long lines of text are tiring on the eyes.

Keep your Web site current and accurate.

    1. Routinely check your Web site for links that no longer work and fix them.
    2. Routinely check the content on your Web site for accuracy. Remove any outdated information and add new information as appropriate.

Assist people who link to your site.

    1. Don't change the file names of published pages. Changing the name will break all links and bookmarks that point to the old file name. For example, if you revise your site, don't change the file "staff.html" to "staff_list.html" because this will break everything linking to "staff.html." With this in mind, please choose file names that are easy to understand so that you will be satisfied with them for a long period of time. If you need to change a file name, especially with the intent of making your URLs easier to use and remember, please contact the Teaching and Learning Center in order to have a pointer from the old page to the new page created. This way, if you must rename or move a Web page, users will still be able to find it and other site owners will have a chance to update their links.

Test your site.

    1. Test your site with different Web browsers. Check it out on different monitors, smaller screens and different platforms.
    2. Search engines cannot index text that is found in images. Therefore, test your Web pages on both Mac and PC also using Internet Explorer and Netscape Navigator. This will show any difficulties that search engines will have indexing your site and will also show problems that disabled people may have using your site. Ideally, your Web site should be usable without images. When images are used, remember to use ALT tags and adhere to other required accessibility standards.

Helpful HTML and Web Design Links

V. ACCESSIBILITY

A. Required Standards

  1. The Section 508 Federal Acquisition Regulations (FAR) Final Rule published on April 25, 2001, stipulates that all Web pages created or modified on or after June 21, 2001 must conform to the Priority 1 guidelines as set forth in the Web Content Accessibility Guidelines Document 1.0
    http://www.w3.org/TR/WCAG10/full-checklist.html
  2. All areas of the college Web site shall attempt to conform to Priority 2 and Priority 3 guidelines in the Web Content Accessibility Guidelines Document 1.0, when it does not significantly interfere with the page design, the presentation of information, or the use of other technologies. Web pages should meet Section 508 standards.
  3. The accessibility of each Web site is subject to the review of the college Web coordinator.

B. Ways to Make Web Sites Accessible

1.      Page Design

  1. An important step in creating accessible pages is to validate your HTML for section 508 compliance. Bobby analyzes Web pages for accessibility. Bobby can be found at: http://www.cast.org/bobby/
  2. Make sure the HTML titles of your pages are unique. Titles are an important navigational tool for users. Document titles are more important than people realize. Browsers bookmark titles and search engines often look for and index titles.
  3. When possible, use only technologies defined in a W3C (World Wide Web Consortium) specification and use them in an accessible manner. When this is not possible, provide an alternative page that is accessible and based on standards.

2.      Images

  1. All images and image map coordinates should have an ALT tag that specifies alternative text that will be shown if image display is not possible or disabled by the user. This gives the user some indication of what’s missing.
  2. ALT tags should be properly punctuated to allow various screen readers (software for the visually impaired) to work more effectively.
  3. Judiciously use the appropriate amount of text in ALT tags. ALT tags should sufficiently describe the image in as concise a manner as possible. If your image includes text, the ALT tag should reflect that text.
  4. ALT attributes such as “image” or “photo” are uninformative. Make your ALT text specific and meaningful. Using transparent GIF spacers is fine, but they need to have ALT text. For non-essential images, you can use a blank ALT tag; for example, ALT=”” is acceptable for spacer GIFs or other non-critical or content-devoid images.

3.      Color

  1. If you use a colored background, make sure there is high contrast between the background and text. Avoid backgrounds with busy patterns, since these can make text difficult to read.

4.      Frames

  1. When using frames, provide sufficient information to determine the purpose of the frames and how they relate to each other. When a screen reader encounters a frameset, it will read the filenames for each frame and allow the user to choose between them. Therefore, each frame must have a descriptive file name or title such as “main navigation”, “main menu”, or “body text”. Also, use the <noframes> tag to provide an alternative when it’s not possible to make the frameset accessible.

5.      Tables

a.       When using tables to represent data, rows and columns should be clearly labeled and the summary attribute should be used in the table tag. This does not apply to tables used for layout.

Helpful Accessibility Links

Web accessibility for section 508:
http://www.jimthatcher.com/webcourse1.htm

Bobby is located at:
http://www.cast.org/bobby

Revised 12/3/01 dw