Required Design Elements

Required Design Elements

The core of the CSU Stanislaus Web Standards is a flexible template system. The primary content of any page should be developed to meet the needs of its users. In keeping with established usability practices and adopted CSU Stanislaus style, all college, department, and unit pages on the CSU Stanislaus Web are expected to meet the following criteria as they are applied to the University templates. View University Template.

When used consistently, these primary elements help create a unified look and brand image for the CSU Stanislaus Web sites.

There are a number of other standardized elements that can be used to enhance usability and visual consistency. These elements include:

Nomenclature

First reference to the University’s name should be “California State University, Stanislaus.” Subsequent references may be “CSU Stanislaus.” “Cal State Stanislaus” is reserved for referring to Warrior Athletics. Use of the initials CSUS is strongly discouraged. Avoid referring to the University as “Stan State” or “Stanislaus State.”

University Banner

The basic, required element of the template is the CSU Stanislaus seal positioned inside a red banner at the top of every Web page, with the full name of the University spelled out to the right of the seal in Georgia typeface. It is the Web equivalent of standardized letterhead for print. This identifies your unit and your site as being part of CSU Stanislaus. The University banner uses the primary University color (red), seal, and name in a consistent format. Other logos may not be placed near or in the banner. The banner must link to the University’s home page (www.csustan.edu).

Typography

HTML text
HTML text should be the primary choice for your site's content. HTML text is fast loading, easier to edit than graphical text (text as image), and fully accessible. The Web site developer can gain some control over the text by using style sheets to define relative sizes and weights. One can also specify preferences for a particular font. See complete section on Style Sheets for further details.

The hexadecimal value for the required text color is #424242.

Links
Embedded text links should always appear in a color that contrasts with the rest of the text. Primary links appearing in a distinct navigation zone (commonly left sidebar in the University templates) do not need to be underlined or appear in a contrasting color. A bulleted list of links should appear in the link color but do not need to be underlined (this can impede legibility, especially in long lists).

The hexadecimal value for the required link color is #A72D08.

Style Sheets
The CSU Stanislaus Web Templates use cascading style sheets to define the appearance of HTML text. Style sheets separate the content of a Web page from its appearance. This allows Web editors to update content without affecting the presentation and allows Web designers to change the presentation without affecting the content.

In the CSU Stanislaus Web sites, sans serif fonts are preferred because they are more legible in the Web environment than serif fonts. The sans serif font set used in the CSU Stanislaus style sheets (in order of preference) is: Verdana, Helvetica, Arial, Sans-Serif.

View style sheet used for University template.

Text as an image
Graphical text is used selectively for content within a Web page. Appropriate uses of graphical text include primary navigation links, site titles, and decorative headers. Graphical text allows you to precisely control the presentation of the text. This precision is important in some aspects of site design, but site developers should avoid overuse. Graphical text takes longer to download than HTML text. Users who cannot (or have chosen not to) view graphics on their browsers will see no content without the use of special alternative text (ALT tags).

Approved Colors

The official colors of CSU Stanislaus are red and gold. Use of the University colors is critical when reproducing the CSU Stanislaus banner, which must appear on every CSU Stanislaus Web page. Use of the required banner ensures correct reproduction of the CSU Stanislaus seal and colors.

Web colors are defined as a hexadecimal value. The University colors for the Web site are Red #CC0000, Gold #E4BC51, Grey for text #424242 and Link Red #A72D08.

Navigation elements

A link to the CSU Stanislaus home page on your unit pages is important, in addition to a link back to your unit home page from internal pages. These will give visitors the opportunity to find out more about your unit and the University. The University banner provides a built-in link to the CSU Stanislaus home page. The navigation panel and the breadcrumb navigation should provide links back to your unit home page.

Navigation panel (left sidebar)
The home page navigation on your unite Web site should contain main category headings that clearly define what information is available on the site. Headings should be inclusive, definitive, and unambiguous. Be sure there is a link to every page you create and that each page links to one or more other pages so readers can get to the next appropriate site. If your site consists of multiple pages and invites users to move around and explore, consider using the same links from your unit home page on each internal page. This common set of navigation elements that appear on every page within a site is called global (or persistent) navigation.

Breadcrumb navigation
As visitors get deeper into your site, the breadcrumb navigation illustrates the path they may have taken to get to the current page. The breadcrumb allows for easy access to previous pages without using browser buttons. The following example is for the Admission’s Forms & Publications page:

CSU Stanislaus > Admissions > Forms & Publications

Accessibility and Usability

Official University Web sites are required to meet accessibility standards for people with disabilities by using the templates or following the proper specifications and guidelines laid out in the Web Standards. Web sites should make use of the industry-standard technologies, such as those defined by the World Wide Web Consortium (W3C), and use the technologies according to specification.

All new sites and pages outside of the University template must be submitted to OIT for an accessibility compliance check. Please e-mail your URL to WebDesign@csustan.edu for accessibility testing. OIT will work with the Office of Communications & Public Affairs to seek approval or denial for any design that varies from the template.

Materials should be developed with proper regard for the generally observed principles of electronic etiquette ("netiquette"). For more information, visit http://www.albion.com/netiquette. Also, see section on Writing for the Web.

Site Titles - Search Engine Functionality

HTML page titles are crucial to your site. The title will be the text for any bookmarks the user makes on your pages. Choose something that will help the reader remember what the page is. In addition, many search engines use the title as a factor in determining how to list the page.

Proper <title> tags enhance functionality with search engines and promote University identification. Official University Web pages should include a meaningful, unique <title> tag that includes the text "CSU Stanislaus." Example for the main page of the College of Business Administration:

CSU Stanislaus | College of Business Administration

Official University Web pages should also include accurate <meta> description and <meta> keyword tags. Examples of <meta> tags used on University home page:

<meta name="description" content="California State University, Stanislaus: An exceptional public university that, because of its student-friendly size and commitment to excellence, is able to offer all the benefits of a private education." />

<meta name="keywords" content="CSU Stanislaus, California State University, Stanislaus, CSU, Cal State Stanislaus, California, Stan State, academics, small classroom" />

Remove old, outdated, unused data off of the University Web server, as it will come up in search results. Manage your Web directory; do not use as storage.

Contact information

All official University Web sites must include contact information. The contact may be a specific individual, a generic contact, or a link to a page of contacts for the unit. The contact(s) must include an e-mail address(s) and/or a telephone number(s). Providing both is strongly encouraged. Be sure you keep content current.

Web Images

The use of images for the Web requires different formats and modifications than when used for print publications. GIF (Graphics Interchange Format) is probably the most common image format used on the Web. The major disadvantage, though, to GIFs is that they only support up to 256 colors.

This means they are not good for photographs or any other images that contain several different colors. The main advantage of JPEG (Joint Photographic Experts Group) over GIF is that it can display up to 16 million colors. JPG, thus, is a much better choice for images with many variations of color, but with that comes some drawbacks. Most images, especially digital camera photos, have very large file sizes and must be reduced for Web use.

To reduce the image size, you can crop, resize the image, and save for the Web. You can save an image as a JPG or GIF and set the JPG quality or GIF number of colors. As a general rule of thumb, image size should be small enough to load quickly. Total page load should be taken into account.

An image should never be dragged to be smaller in the HTML editor since the page will have to resize it every time it loads. Resize an image in a photo editor and then save it into the Web site.

Be sure to provide ALT tags for all images to describe their graphical content. This is a crucial element to accessibility design. Flash files must be made accessible. Any information presented in an image format, such as an image of a manuscript, should include a link to a text description of the information. If you are unsure of the importance of an image, remove it from the page to assess the impact.