Web Services
Web Page Design Standards
In order to maintain a common branding and identity among unit, departmental and other official Web sites of CSU, Chico, Web Services has implemented a basic set of design standards that should be followed for all official campus Web pages. Individual faculty may implement whatever designs they wish for their own personal and course pages.
To see how designs may or may not meet campus design standards, view some examples or visit our Before and After Portfolio.
Page Structure and Layout
Unit and department web pages should follow the basic structure shown below.
- All pages should have a header at the top containing the CSU, Chico logo. The of CSU, Chico logo should not be changed or distorted in any way.
- All pages should link to the CSU, Chico home page.
- All pages should have a navigation bar placed below the header along the left side of the page. There are some exceptions where pages might not have navigation, but if there is a navigation bar, it should be placed on the left side of the page.
- All pages should have a footer containing standard campus links and contact information for the department or unit.
- Main areas of pages have few restrictions, but should at least contain a main content area. A right-hand column is optional. Standard fonts include Arial for text and Georgia for headings.
- A search box is optional and may search the entire campus site or only the department site.
- Pages may be a fixed width of 750 pixels to accommodate smaller monitors or a liquid width.
- All Web pages must meet CSU system, state and federal accessibility requirements.
To better get an idea of how to meet campus designs standards, you may want to some view example pages.
Header
The page header is the main branding region for all Web pages. The standards for the header are as follows:
- The header should appear at the top of every page and be the full width of the page.
- The word "Chico" with the seal background and the words "Today Decides Tomorrow" should appear in the upper left-hand corner of all pages. This graphic must follow the same dimensions and proportions as on the CSU, Chico home page. The background of the logo should be white, but may also be very light colors that do not obscure or contrast poorly with the logo. The approved font for the word "Chico" is Bodoni Bold. The approved font for "Today Decides Tomorrow" is Garamond Italic. Approved colors are "Chico" & "Today Decides Tomorrow": #990033 or #990000; campus seal: #C0C0C0. You can access the official Web header graphic here.
- The olive bar should appear below the logo.
- The red bar containing the words "California State University, Chico" should appear below the olive bar. The font, font size, and bar color should be the same as on the CSU, Chico home page.
- In order to accomodate users with smaller monitors or who use monitor magnification due to limited vision, the total height of the header (logo, olive bar, and red bar) should be kept to less than 100 pixels (93 pixels is the standard height of the header).
- The right side of the header has few restrictions. Web Services often uses this area to identify the department or unit, but can be left blank or filled with photographs or graphic elements.
- The right side of the red bar may be used for a variety of text elements or links, or left blank.
Navigation
The navigation area is where the main navigational links for the department or unit Web site appear. The standards for the navigation area are as follows:
-
The main site navigation should appear along the left side of the page, directly below the header. Other sub-navigation may appear elsewhere on the page.
-
Links should be organized in some sensible order.
-
Sub-menus or pop-up menus may be used in the navigation area, but are not required.
-
Menus should be kept short in order to avoid becoming cluttered and confusing.
-
Menus should be text-based lists rather than graphics-based images, both for easy maintenance and for accessibility reasons.
-
Link color should follow campus standards (#990000).
-
Background colors or images must not obscure or contrast poorly with the navigation links.
-
Other elements (news, alerts, other sub-navigation) may appear below the main navigation area.
Below are some examples of menus that follow campus standards for placement of additional elements below the main menu or use background images.
Main Area
The main area of the page has few restrictions on its layout and appearance. The content area may be broken into sub-areas, including a right-hand column if desired.
Standard fonts for the main content areas are Arial for text and Georgia for headings.
Other fonts may be used, but keep in mind that users may not have the same fonts installed on their computers as you have on yours, and that you should limit yourself to using the "universal" fonts of Arial, Times New Roman, Georgia, Verdana and Trebuchet. San-serif fonts (Arial, Verdana, Trecbuchet) are the most readable for text. Serif fonts (Times New Roman, Georgia) should be avoided except for headings.
Main area with no right-hand column
Main area with right-hand column
Footer
The footer serves to visually close off the page as well as to provide common links and contact information for the department or unit. The standards for the header are as follows:
- All pages should have a footer section.
- Footer design is not set. Sites may follow the basic design used on the top level pages of CSU, Chico site, or follow their own design.
- Footers should be identical on all pages of a site unless there is a compelling reason to use a different footer on some pages.
- The footer should contain the common campus links as defined in the footer of the CSU, Chico home page.
- CSU, Chico
- Admissions
- Athletics
- Bookstore
- Library
- Registration
- Catalog
- Class Schedule
- Distance Education
- Portal Login
- The footer should contain contact information for the unit or department, including building and room number, telephone number, fax number (if available), and campus zip. An e-mail contact may be added, but is not required.
The following footers, despite their varying designs, broadly meet the standards for page footers.
Search Box
A search box is not required on any site, but may be included. Search box standards are as follows:
- Search boxes should be placed near the top of the page, preferably near the upper right corner (either in the header or at the top of the right-hand column, if present).
- If the search box only searches the unit site, the box should say "Search XXXX" (where "XXXX" is the unit or department name). If the search box searches the entire CSU, Chico site, then the box should say "Search Chico State".
- Standard or graphic "Submit" buttons may be used.
- In the interest of saving space, the standard label for buttons is "Go" rather than "Submit" or "Search", though those may be used.
Link Colors
A variety of link colors may be used in order to match specific color schemes of a site. However, the standard approved link colors are #990000 or #660000.