Skip to Main ContentDivision of Information Resources & Technology
ServicesAbout ACMStaff

Web Development

Campus Web Standards


RATIONALE

There are approximately 205 distinct websites representing CSUSB, totaling more than 20,000 pages, and managed by nearly 100 different individuals. With the campus community's growing reliance on the Internet and tens of thousands of weekly visitors to our sites, concerns over a consistent identity, uniformity of design, and accessibility for persons with disabilities have emerged. These concerns primarily revolve around the publication of new and established campus websites. They have also accentuated the need for standards in Web design, usability, development, maintenance, and accessibility of all campus-related websites.

Individuals visiting CSUSB websites often experience a variety of problems. Typical issues include:

  • difficulty navigating between campus Web pages,
  • difficulty locating and accessing information,
  • lack of a clear, consistent, and professional campus identity,
  • encountering broken links,
  • out-of-date information.

Traditionally, Web development at CSUSB has followed a decentralized approach. Colleges and departments have been responsible for creating and managing their own sites without guiding standards or policies. While some departments have benefited from this decentralized approach, others have expressed a need for a set of standards by which they can design, develop and maintain their own site. Still others lack the finances for a qualified Web developer to maintain the complexity of the services and information they wish to publish.

In light of these issues we are recommending campus standards for implementation across all campus websites to ensure accessibility, uniformity of design, layout, and a consistent university identity. With this document we will recommend standards by which the campus community can begin addressing these concerns.

SCOPE

Any website that represents California State University, San Bernardino is expected to follow CSUSB Web Standards. These standards are not intended to apply to instructional materials on the Web. If you have any questions about whether these standards apply to a site, please contact Academic Computing & Media or the Office of Public Affairs.

RELEVANT POLICIES

Currently there are two major policies related to the Internet. The first is the Web Page Accessibility Policy, adopted in January 2004. The other, the Acceptable Use Policy, was adopted in October 1999. Despite the introduction of these important policies, no overarching Web design, layout or university identity policy is in place at CSUSB. This lack of a definitive Web development policy is one of the major causes of inconsistencies between sites. A clear and concise policy that outlines the fundamental procedures and requirements needed for a consistent Web environment would help provide increased ease of use, quality control, and a positive graphical representation of the university.

Web Page Accessibility Policy
Approved: January 2, 2004
Amended: November 26, 2007

This policy maintains University Web Page Accessibility Standards compliance for all Web pages that officially represent California State University, San Bernardino. Any Web page that contains information necessary for students, faculty, staff, and interested parties to conduct business with the University, and employees of the University to complete required work, must comply with the accessibility standards.

Academic Computing and Media will provide training, tools, information and assistance on how to comply with the standards. The administrator of a site (i.e., person who authorizes the publication of a site) is responsible for ensuring that all compliancy corrections are applied to the site in a timely fashion.

Security
Approved: October 18, 1999
The purposes of the University computing and communications resources are to provide a setting and opportunity for members of the academic community to express and explore ideas openly and freely subject to conditions and terms of this policy, to acquire and develop the skills of intellectual inquiry, and to examine critically the values of culture and society. The Acceptable Use Policy assumes as a condition of use the exercise of common sense, common courtesy, and a respect of the rights and property of the University and others.

The Acceptable Use Policy sets forth users' rights and responsibilities and is designed to address related access, use, and privacy issues in a way that meets intellectual and creative needs of campus users. The University's legal responsibilities assures the maintenance of the campus network systems and treats the campus community with respect.

School Colors
Approved: December 2, 1996
Amended: January 16, 2008

Pantone PMS 300 is the shade of blue that is used in the university logo and seal and should be considered the official shade of blue for Cal State San Bernardino for merchandise and stationery (including envelopes and business cards).

A shade of blue that most closely resembles Pantone PMS 300 should be used for athletic uniforms and Web site applications such as in the logo and university banner. The HEX code is 0065BD. If you have any questions about the application of this Web color, contact the Office of Public Affairs.

Black and white continue as secondary colors. A 60-percent shade of black --- or gray (or silver) has been added as an optional secondary color.

A palette of recommended secondary colors is available to use for a variety of publications and other uses. However, the logo and seal must be used in the official school colors, as prescribed in the university's graphic standards manual.

REQUIRED ELEMENTS

The following elements are the key to consistency and uniformity on the Web at CSUSB:

Official University Banner
The official University banner should be applied to all sites. The current banner is shown below. The banner's appearance may change over time, but will not diminish necessity of its use.

Official University Banner

To implement the official University banner, just a few lines of code need to be applied to the body of each site's template. This code will reference the banner and display it on your site. If there are any future changes to the banner, webmasters won't need to do anything. To assist you with applying the banner to your site, Academic Computing & Media has created this resource page:
http://acm.csusb.edu/webdev/resources.html

CSUSB Logo - The CSUSB logo, the university's official identifier, is the appropriate symbol for use on all forms of visual communication. If you are planning to use the logo or the name of the University - in addition to the banner - in some other area in your site, please contact Public Affairs at logo@csusb.edu

Standard Footer
Each page of a site is required to have a footer that contains the following:

  • links to:
    • 1)Disability Resources <http://www.csusb.edu/disability.aspx>
    • 2)Privacy and Security Notice <http://www.csusb.edu/privacy.aspx>
    • 3)The California State University System <http://www.calstate.edu/>
  • and also incluide:
    • 4)the address and phone number of your group/department/center etc
    • 5)the date the site or page was last updated. Please include the text "Last updated:" followed by the date.
    • 6)a method for contacting the webmaster or individual who can answer questions about the site's content.
    • 7)copyright, if applicable.

Title Tags
All pages should include a unique title tag that indicates the name of the site or page. It is recommended, but not required, that each page title tag include the unique name of the page. Providing title tags increases the likelihood of a page turning up in search results.

100% Compliance to 508 Standards
Accessibility standards at CSUSB are outlined in the Web Page Accessibility Policy, November 26, 2007.

  • The policy can be found at <http://policies.csusb.edu/webpageaccessibility.htm>
  • For information on Web accessibility training, standards, and how to make your site compliant with the 508 Standards, visit http://acm.csusb.edu/webaccessibility/

RECOMMENDED ELEMENTS

Architecture
Group broad categories of information on a site according to users' needs.

Design & Layout
CSUSB's standards should pattern themselves after the following norms:

Templates
Templates are sometimes misunderstood when it comes to website development. In Web design, each individual site uses a unique template as a tool for facilitating quick and easy updates. A designer makes an alteration to the template and it applies itself automatically to all pages. In most cases a template applies to the top banner and navigation areas of a site. The remaining areas holds the "content" of a site. Therefore, it is recommended that each unique campus website utilize a template.

Graphics
To maintain a professional appearance, graphics (photos, buttons and other images) should maintain proper scale and proportions. For example, when a 50 x 50 image is made to fit a 50 x 70 space, the image becomes distorted or pixilated, and the quality of the entire site is reduced and should thereby considered unacceptable for campus publication.

Background
Background colors and text colors should contrast between light and dark. For areas designated for content, a white background with black text is recommended. These color contrasts are clearly identified in the 508 Guidelines that our campus follows as a result of the Web Page Accessibility Policy of 2004.

Fonts (typefaces)
Arial is the preferred font for text. Recommended settings (in order of preference): Arial, Helvetica, Sans serif, Verdana. If sizes are set through Cascading Style Sheets, relative sizes must be used in order to comply with 508 Standards. Absolute sizes (i.e. 12pt. or 12px) are not accessible or compliant to the 508 Standards.

Site Width
Due to newer monitor and standardized resolution settings, it is recommended that all campus sites be no less than 680 pixels and no more than 750 pixels in width. If the design permits, it is also recommended that the site be placed in the center of the browser window.

Index
Due to the fact that Web visitors search for information in different ways, a site map should be considered as an additional page.

Page Dimensions
Pages can use flexible or fixed width. Maximum site width should be no greater than 750 pixels wide. If a fixed-width page is meant to be printed, provide a "printable version" with a separate style sheet (for print media) or use a minimum width that is no wider than 670 pixels wide in order to print on a PC without cutting off information. If you choose to have only one version of the page (Web-viewable and printable), be aware that widths greater than 670 pixels will cause information to be cut off in printing.

Meta Tags - Meta Tags enable a search engine to find and index Web pages, providing a brief description of content and keyword search terms for indexing. Meta tags are tags that do not show on the page themselves but do provide information to search engines and to the browser displaying the page. Search engines such as Google will easily be able to find pages, provided these pages contain correct meta tag information. Using meta tags increases the likelihood that people searching for information will find it. Meta code tags are pasted into html documents within the <head> tag. One must treat this information just as one would treat page content; misspelling and other problems in meta data appear on search engines, damaging the credibility and image of both the university and department. The required meta tag attributes are:

Description - This is the paragraph displayed in most search engines that summarizes the page. For example, <meta name="description" content="California State University, San Bernardino - Office of Admissions and Student Recruitment - Provides enrollment and application information and resources to the students of California State University, San Bernardino.">

Keywords - An extended list of keywords (with no duplicates) helps search engines hit a page. The words in the list do not appear on the page themselves. <meta name="keywords" content="prospective, students, transfer, international, application, articulation, apply, admissions, recruitment, financial aid, university, California, San Bernardino, CSUSB">.

Naming Conventions
There are two basic naming types that are recommended for the sites:

Examples
acm.csusb.edu - Academic Computing & Media (abbreviated name) inthepublicinterest.csusb.edu - In The Public Interest with Al Mariam (full name)

and

www.csusb.edu/pcc/ - Psychological Counseling Center (abbreviated name) www.csusb.edu/healthcenter/ - Student Health and Counseling Center (full name)

We recommend that each site maintain an address that is easy to convey to visitors, includes the campus identity of "CSUSB", and prevents confusion with other site names.

Navigation
Providing navigation should allow visitors to browse a site without getting lost. The two standard locations for site navigation are vertically, in a column along the left hand side, or horizontally, in a row near the top of the page, just below the banner of a site. A single-tiered site may utilize one location, whereas a multi-tiered site might utilize both. In most cases, a site should be designed to allow visitors to get anywhere from anywhere, without having to use their browser's "Back" button.

Site Structure
Awareness of conventions in Web design will help you to plan your site's structure, navigational elements, and page design so that your site visitors can quickly and accurately find what they're looking for.

Photo Usage Permission
Photographs displayed on the California State University, San Bernardino Web pages are property of the university and not for duplication or reproduction without the permission of Cal State San Bernardino. Before using a photograph on your site, you are required to gain permission from CSUSB or from the photograph's owner (if not CSUSB). Photographs contained in the CSUSB Web photo archive are available for download at http://campus-images.csusb.edu. Photos should not be manipulated. To request permission, please contact the university's Office of Public Affairs at sidr@csusb.edu.

Professional Development
Become familiar with a Web development tool such as Dreamweaver. Professional Development classes are offered through ACM's Professional Development Center. For more information visit the Professional Development website or email prodev@csusb.edu

User Focus vs. Internal Focus
Try to organize sections and content according to users' needs, not necessarily by departmental organization or hierarchy. Try to identify what items a user would logically want, even if it means grouping functions from different areas together.

CAMPUS RESOURCES

Academic Computing & Media (ACM) will continue to provide services related to Web development. For detailed information on these services, visit acm.csusb.edu.

Accessibility
ACM will continue to provide the campus community with Web accessibility resources, training and support. For more information, visit the Web Accessibility Website at http://acm.csusb.edu/webaccessibility/default.html.

Consultation
ACM will provide on-going consultation for the campus community. The ACM Web Development Team is available to answer any questions the campus may have about Web standards, including questions about accessibility, design, layout, functionality and use of graphics.

Templates
Templates, once approved, will become available through ACM's Website as soon as Web standards and/or guidelines have been approved.

Training
ACM will provide on-going workshops for Webmasters and the general campus community on best practices for following and implementing the campus Web standards.

Web Development Services
ACM's Web Development team offers services in the following areas:

  • Web Design
  • Web Development
  • Site Hosting
  • Web Accessibility

To schedule an appointment, please call x75086, or email us at webdev@csusb.edu

SECURITY

While it is outside the scope of this document on Website standards, it is important to mention that secure Web application requirements may apply to sites that employ certain technologies. These technologies may include online forms, which require visitors to enter in personal information that is then processed by the university. We recommend that a draft of security guidelines be created separate from any Website standards policy. Currently, the Information Security Office recommends use of standards set by the Open Web Application Security Project (OWASP) (http://www.owasp.org/index.html) and the Web Application Security Consortium (WASC) (http://www.webappsec.org/).

IMPLEMENTATION TIMELINE

Due to the complexity of these reform efforts, setting priorities and deadlines at the onset is essential. These priorities outline the sites that will be required to follow the new Web Standards. The process should take place in phases. A criteria for determining which sites receive priority will be determined by the WMS committee.