CSS/Style Sheet

The University uses Cascading Style Sheets (CSS) to apply a consistent look and feel to text and visual elements on pages which use CI templates.

Names and locations of style sheets

Common styles used by all pages with CI global template

http://www.csuci.edu/_common/css/_global/main.css
http://www.csuci.edu/_common/css/_global/print.css (defines how Web pages should print)

CI Home Page styles

http://www.csuci.edu/_common/css/homepage.css (only used on the CI home page)

Top Level Page styles

http://www.csuci.edu/_common/css/toplevel.css (only used on top-level pages such as "Prospective Students" or "Alumni." Requires sublevel.css as base style sheet)

Sub Level Page Styles

http://www.csuci.edu/_common/css/sublevel.css (only used on CI sub-level pages/sites)
http://www.csuci.edu/_common/css/minimal.css (alternate style sheet for CI sub-level pages/sites. Requires sublevel.css as base style sheet)

Browsers

Supported Browsers

CI officially supports the following Web browsers:

Mac

Firefox 1.5 and above
Safari 2.0 and above

Windows

Internet Explorer 7 and above
Firefox 1.5 and above
Safari 2.0 and above

Browser testing

CI has made reasonable efforts to ensure that design templates are compatible across browsers and platforms.

All Web pages should be tested on multiple browser and multiple platforms prior to launch to ensure appropriate compatibility.

While slight visual differences of Web pages may occur in different browser versions, Web pages should aim to provide the same core experience across all supported browsers.

Layout

Template

CI has created templates for use by all officially recognized University organizations.

All officially recognized University organizations should use these templates in the creation of their web sites to ensure a consistent, and professional visual identity. The consistent use of these templates also increases site usability while minizing visitor confusion and/or frustration due to constantly changing page elements.

The templates have been designed with a number of variations to enable more choices for display of content, while maintaining the consistency needed to create a unified digital identity.

Schools and academic deparments/programs, such as Business School, School of Education, Art program, biology, computer science, etc., may have their own template, but it still must retain most common branding elements (as defined in this Style Guide).

Exceptions to template usage as indicated here must be approved by the Vice President of Technology & Communication prior to implementation. 

Page width

Minimum page width should be set to: 768 pixels
Maximum page width should be set to: 1024 pixels

Scrolling

Web sites should be designed such that:

  • vertical scrolling of the page is minimized
  • horizontal scrolling of the page is eliminated (or minimized)

Relative sizing of window and page elements

The design of a Web page should facilitate graceful resizing of layout, navigation, and content when a visitor resizes their browser window.

Web page elements should be designed to support the user's ability to adjust image and text size through the browser settings.

Sizes of page elements (fonts, containers or bounding boxes, images) should be specified in relative units (percentage or em units) whenever possible.

Bandwidth (File Size)

Page elements should be optimized for maximum download speed.

150KB is recommended as the total download size for all elements of a single Web page (text, images, graphics, stylesheets, etc)

Frames

It is not recommended to use <frame> elements in any Web site design, due to added navigational and maintenance complexity.

Inline frame elements <iframe> may be used if required to accomplish a specific technical goal; however, use of <iframe> elements is generally discouraged to ensure maximum compatibility across platforms and browsers.

Pop-up Windows or Graphics

Pop-up windows or graphics in web pages are strongly discouraged.
Pop-up windows or graphics should never spontaneously appear or otherwise appear without a visitor's explicit request to open the window or graphic.

Multimedia

All videos provided on Web pages must be captioned and be accompanied by a text transcript.

All audio recordings provided on web pages must be accompanied by a text transcript.