The California State University’s website, www.calstate.edu, is its most visible
communications asset, a critical tool to
reach key constituencies of the nation’s
largest system of higher education. The goals of the website are:
To convey the extraordinary impact that the CSU has on the education,
economy, culture and intellectual life of the state;
remendous positive impact on the lives of its
students, faculty, staff and friends;
o make the case why
CSU is the best choice for prospective students,
potential donors, business partners, community agencies
The website is
CSU’s primary customer service interface and
be easy to navigate,
include relevant, timely content presented in an easily
accessible manner. This Web style guide aims to achieve that goal by:
of CSU Web pages
understand how to
create consistent, useful
Ensuring all official CSU pages are profes
sionally presented, easy to use
convey a positive image of the CSU.
This document is intended for the fol
CSU employees that manage websites for their department, division or CSU
Contractors and outside programmers that develop official CSU websites
These web guidelines are a
guide to creating and maintaining a website in the CSU
assume a basic level of understanding and
eb design and theory
and do not contain tutorials
Submit a new project request through Communications at:
Be ready to discuss
the following questions
with the Communications staff
WHO is the target audience for the site?
Is this information for
employees, the public or both?
message do you want to convey
and what is the call to action?
WHERE will your site live on the calstate.edu site?
need a website? Is it the best
solution or would a blog or
ewsletter work better?
update the site going forward?
WHEN do you need the site launched?
The Communications Department will contact you to schedule a meeting to
The Communications Web t
eam will provide design, content strategy and
production services to help you create your site.
team will program the site to your specifications.
owners have access to make minor updates to the websites
they manage. All changes are made on the staging server, which is different from
live server. Pages on the staging server (staging.calstate.edu
) cannot be seen by anyone outside of the CSU (unless they have
been configured by CITS). This prevents pages in progress from being seen by
search engines and the general public, and ensures nothing is posted on the live site
in draft form or
Sites Created by Third
Sometimes the Web requirements of a department exceed the capacity of the
resources at the CSU.
In partnership with the Communications Department, t
party vendors may be hired to create, facilitate and manage Web sites that aren’t
handled internally. If a department contracts with a third
party vendor, that
department and third party must consult with the Communications Department to
ensure that t
hey comply with standards.
When using a third
party developer, please note:
The third party must adhere to the CSU’s Web
site will still be an official CSU site, even though an outside vendor created it.
Maintaining a consist
ent visual identity
complying with accessibility
are development requirements.
The Communications Department
be included in the original site planning
to familiarize the third party with the guidelines and help set a framework for
Final signoff on the design and integration of the site within the main CSU site
will be handled by the Communications Department.
All website names should follow the naming convention of
. Since all
departments and programs are under the California State University system, the
respective department or initiative name in the URL
should follow the calstate.edu
In addition, a website's home page name should include
www.calstate.edu/department/index.shtml). This will direct visitors to the home
page if a specific page within the website is not specified in the URL.
Virtual sites, such as
, should not be used to maintain
site names. Virtual
site names may be used for non
applications, or for those applications that are for internal use only.
Communications Department for guidance on using the appropriate naming format.
Design and Style
ct consistent navigation, information flow and presentation. Adhering to
these standards provides them with a familiar experience:
They know what to expect.
They have an idea of where to go.
They know how to get there consistently.
The calstate.edu website should be predictable, conventional and consistent. Users
be able to find what they need
quickly resulting in
a positive experience.
Repetition and simplicity gives the site a consistent graphic identity that creates and
the CSU brand
and makes the CSU site memorable.
For these reasons,
common CSU W
template for their site and use the
same template for each page in the secti
ensures a consistent identity and message for the user. For example
the Student Academic Support website (
a Student Academic Support banner
throughout the entire site.
designed Web pages portray a strong, consistent image of the CSU.
consistent colors, fonts, photos and logos is important to deliver that message to the
A family of colors has been developed specifically for use across the full range of CSU
communications materials, including websites. The color palette offers primary,
secondary and neutral colors chosen to express the brand of the CSU. Using these
ors, and the color combinations or “families,” on all website pages, helps to create
a consistent, distinctive look and feel for all CSU
olors (in PMS/Pantone Values):
Each Web page must contain the
The CSU website has its own distinctive banner that should be used at
the top of each page. It contains the CSU seal and other CSU identity elements
that cannot be altered in any way.
For consistency, CSU banners will appear on
all CSU sites.
Name of d
epartment, division or initiative
: Each section should identify the
department, division or initiative to which it belongs, as well as identify that this
is an official CSU site. Users don’t always enter the site from the main page
if a search engine guides them to an inside page, or if another user sends them
a URL to an inside page, the user should be able to navigate from that page.
: All pages must have navigation to other areas of the site
visible on the
screen without scrolling. Be sure to have navigation to other areas
within a section on the left or embedded within the copy. For best results, have
links in both the navigation (on left) and embedded in the text.
: Make your contact informati
on clearly visible in the footer of each
Contact info. should include
name and phone number and/or e
enhance content presentation. Make the effort to provide photo captions, as
they provide context t
o the user. Use the following guidelines for integrating images
on Web pages:
.jpg or .png format and condensed for the Web.
8 pt. Verdana Bold.
Flush left underneath photo.
“Alt” tag description:
Use for all photos. Example: <alt=“Photo of
Insert text in place of graphics for non
graphical Web browsers and
The only photos that should be linked are those that link to a
photo gallery. Ph
otos should not link to content.
Copyrighted photos owned by anyone other than the CSU may not be used on
an official CSU Web page unless the proper copyright agreements are
obtained. Stock photography may require multiple licenses (one for print, one
for online use) or only allow for lim
ited licenses (usage for a specified time
Photos taken for use on the website that feature identifiable faces can only be
used if a
photo release form has been signed, granting permission to use the
photo. (This includes teachers, students,
It is the responsibility of the website content owner to secure the necessary
rights and licenses.
Obtain signatures on a photo release form for use on the Web.
Photo release form:
Stock photo images are available from the Communications Department, as well
as an assortment of campus shots. For more information, contact t
Communications Department at
For more information about Copyright Law, see the section
later in this document.
Logos and graphics should be officially approved by
to be included on a CSU website.
Graphics and logos should be 72 dpi and in .gif or .jpg format. The .gif
format works best when using a few colors, such as logos or graphics. The
.jpg format is the preferred method when saving files with lots of colors,
such as photos.
Use “alt” tag des
cription to identify images to disabled users or those
Using the CSU S
The seal of the California State University is the official
mark of the system. It cannot be altered, reshaped,
colored or distorted in any way on a web
proper use of the seal, refer to this guide from General
Permission must be obtained to use the seal for an
official publication. Contact the Communications
Department for more information.
Using the CSU Wordmark
The CSU wordmark is the core
component of the CSU visual
identity system. The wordmark
must be used in its entirety on
all CSU print and electronic communications. The wordmark does not need to be
the dominant element on the page, but the name of the university should appear
For more information on proper usage of the CSU Wordmark, please refer to the
Branding Standards Guide at
All uses of the graphic header on calstate.edu page
s (including e
eb surveys) should be approved by the Communications Department. If your
department has a conference or program that needs a branded header specific to
that event, the Communications Department can create one that incorporates the
look and feel of the even
t, while staying within CSU design standards. If a
department creates a header, the Communications Department reserves the right
to revise or replace it to comply with
branding and accessibility
ng to standards creates an image of professionalism and academic integrity for
the CSU. The website is an extension of the CSU and reflects other official
communications that come from the office. To that end, avoid "gimmicky" Web
features such as scrollin
g marquees, blinking text and visible hit counters. In each of
these cases there are better, more professional ways to achieve the desired goal:
can be confused with links. Never use underlined text.
Bold, italics and subheadings t
o emphasize text.
“Coming soon,” “Under construction,” etc.
should be avoided. If the
Web pages are not ready or being built, they should not be linked.
Offer more explanation of the information coming.
“Registration information will be
available June 30,” can be placed on an
existing Web page.
such as “Welcome to the CSU website” are
unnecessary. (You never see “Welcome to my press release,” or “Welcome to
my brochure.”) The user knows what the website is, the ext
ra words clutter
the page, and it takes the user longer to get your message.
should be avoided.
he words and phrase
for persons with disabilities
since the user may not ‘click’ to navigate.
Keywords of information in the text link such as: “More information: Cal
State Teach” as the link.
use must be preapproved by the Communications Department. Flash
can be difficult to make ADA compliant, and can block content from being
seen by a sea
Communications Web Development
team. Pages with scripting need to be
usable when scripts are turned off or not supported. Contact
to make arrangements.
requirements need to be coordinated through
. SQL is the preferred method when creating Web
pages that require the use of a database.
such as sound effects and background music can distract
and are unnecessary.
Audio for functional purposes such as “Listen to the Chancellor’s
Preferred audio file format is .mp3.
must be designed to allow assistive technology to access
information within the forms.
All content on CSU websites should be timely, accurate and of interest to the end
user. A user judges the value of a Web page based upon the appropriateness and
usefulness of the content it provides. Content should drive the design of the Web
page. The two
primary questions to ask when planning a website are:
1. What do the users want (or need) to know?
2. What do we have (or need) to say?
The organization of inf
ormation should be well thought
out before construction on
pages begins, and the Communicatio
ns Department is available to help with the
At least one
person in each department will
need to be designated to
Each Web section or Web page must have someone assigned to it. (Others
can contribute and help update, but one person needs to be the sole owner.)
When a new Web page or website is created, a production plan
Users tend to scan text online rather than reading word for word.
Place important information first:
Place the most important information or
content at or near the top of the page, preferably in the first two paragraphs.
This is the information
the user will see first when the page downloads.
Start subheads, paragraphs and bullet points with
down the left side of your content.
Provide descriptive text:
When providing information on other services or
programs, include brief descriptive text so a user doesn’t have to click on a
link to find out what it is.
Develop an information hierarchy:
Arrange content so it follows a logical
order of general informatio
n to specific. Categorize or group similar pages of
information together. Initial Web pages should begin with index pages that
are broad and cover all lower
level documents; subsequent pages should
have more precise information in greater detail.
on about the layout
of the site (i.e., site map) should be readily available on the site.
“Chunking” is the process of dividing up large portions of text into smaller portions,
making text easier to read. Large portions of text
and lengthy text
Keep copy short, since Web users prefer to scan.
Use bulleted lists to make copy "scannable."
Use simple, easy
Keep to one idea per paragraph.
Break paragraphs into sections
d utilize anchor links for long
pages of information that are broken into subsections.
When using icons, graphics or bullets, make sure the text links, not just the
Avoid using acronyms and other terms that are internal to the CSU. Acronyms
uld be spelled out on first reference.
Don't separate users from the information they need and want. Present
information in a logical format and recognize that
people will take the
time to read lengthy copy or "filler" material.
Content should be presented with the target audience in mind. Place the most
pertinent information prominently. (As a general rule, the most important
information should be placed high enough on the page so that the user do
not have to scroll to see it.)
Content must be accurate. Any errors (grammatical, factual, typos, etc.) or
outdated information should be corrected within 24 hours of notification
seems like a long time)
Failure to keep sites current and
compliant with CSU Web guidelines (after
notification) will result in the removal of pages and/or sections from the site.
Content must be accessible. If you cannot create an accessible page, provide
a link to an alternative page with equivalent information
that is accessible.
more information on accessibility and a list of resources, please see the
on page 14 of this document.
, feedback, surveys and other
from your users to
help guide content decisions.
If content is difficult to find or not presented in
an optimal format, visitors are less likely to use the information.
The goal is
to make information easy to find
, relevant and useful
Events and T
hange wording that promotes an upcoming event (“Annual conference
coming in May”) to past tense no later than 24 hours after the conclusion of
the event (“Annual conference a success”). Think of event websites as having
event with details, keynote speakers,
Continue to provide pertinent information
Recap event with key highlights, photos
Be as specific as possible with time indicators. Avoid using nonspecific words
such as today, tomorrow, soon, Wednesday, etc. (“Updated financial aid
information will be available June 30.”)
When a new section is created for the Web, the departm
ent website content owner
should create a production schedule that will help track timeliness of content, update
requirements, technical needs and more.
Keep track of posting information that changes regularly, including student
fees, financial aid inform
ation, academic majors, enrollment numbers,
statistics, etc. (“The CSU
students and 44,000 faculty and staff”
will need to be updated yearly.) When posting dated material, specify the
date or time period. (“Student fees accurate as of June 30,
“Academic majors updated each January and July.”)
Web content owners are responsible for keeping site content current. For
some this will mean every day or several times during the day. If a site has
not been updated or verified in more than a y
ear, the Communications
Department, after notification to the site's maintainer, will remove links to the
The calstate.edu website contains links to other Internet sites and resources, and
links to the CSU website from third
a. Notes on L
Linking provides users with additional related information.
Links include those pointing to related areas within the CSU website
and those to an unrelated third
Links are most valuable when they enhance the
information on a site
and should not be used to replace it.
The link should go to a site that provides additional, related, relevant
information that is useful and of value.
The link should not express or imply an endorsement
to any third
party business or service.
The CSU cannot link to any politically related sites (even for bond
campaigns supported by the CSU Board of Trustees) because state
resources cannot be used for partisan purposes.
Links should go to specific informa
tion on a website, rather than just
the home page. The idea is to directly take users to the relevant
Avoid using an entire URL in a link, as they can be long and unwieldy,
and aren’t helpful to search engines. If a URL needs to be used, avo
http:// and link to
Avoid “click here” and “more.” Use keywords and names in the link
text so the user and se
arch engines know what they are.
When linking to an area on the
and names in the link text so the user and search engines have an
idea of where the links are going. In the HTML
relative links, which do not include
start with the directory name. For example:
Community Service Learning
When linking to an area outside a CSU site,
rovide details on the
information a user will be getting on
bsite, as well as the
name of that site.
xplain the r
elevance of the linked material
Contact your senator
Under “Feedback,” locate contact information for Senator Smith
and Senator Jones to voice your support for
open in a new window.
Adding links to a Web page requires maintenance by the Web page
manager. Since links often become outdated and files move, each link
should be checked at least
month to ensure it still works.
Broken links must be fixed within 24 hours of notificatio
n, or the page will
be removed from the site.
Audio files should be in .wav or .mp3 format, and link to the CSU
which will link to Windows Media Player or Real Player.
When posting audio clips, provide a transcript as well for disabled
users. Transcripts need to be updated when audio clips are updated.
Use of audio files on the site should be approved by the
eb content owner must obtain permission to use any music
(even if background music) to avoid copyright violations.
When posting video clips, provide captioning
for disabled users.
Captioning needs to be updated when video clips are updated.
Use of video files on the site should be approved by the
to a Site F
In order for items to be posted on
the home page of calstate.edu, the
following criteria must be met:
Information must be of
interest to the public and/or
ink must be timely and have a predetermined date when it will
Intuitive wording for the general public (non
CSU) user must be
used. The wording should explain the content of the page and
use of CSU insider terms and acronyms.
All events listed shall have a predetermined removal date agreed
upon prior to posting.
What is Copyright?
Copyright is a federal law (17 U.S.C. 101 et.
allows authors to control the
use of their
works for a limited time
. Copyright law gives the owner the right
to protect copies of his or her work. It also protects the author by preventing others
from making derivative works, distributing the work to the public in writing or
through digital means, and performing the
work in public. Once that time period has
expired, the pu
blic is allowed to use the work
without paying royalties or obtaining
permission from the copyright holder.
CSU employees must ensure all content used on any CSU website does not violate
Copyright, Public Domain and Fair Use
CSU employees who wish to copy or post copyrighted material (including, but not
limited to text, photos, graphics and documents) to the Internet are responsible for
adhering to state and federal laws respect
ing copyright. Copyright laws protect
materials recorded in any form, including written and digital records. For more
information on copyright laws, visit
. To see the entire
t, go to
. If you have specific questions
regarding using materials on your website, please contact the Communications
r Approval and Migration
To submit changes for migration to the live site, please follow these steps:
Before submitting pages to be migrated to the live server
), make sure the pages have been
a. Appropriate style:
Editorial and design.
b. Current Browsers:
Internet Explorer, Firefox, Google Chrome, etc.
c. ADA compliance:
text for images and other ADA rules
. (See Section
IV for complete information.)
ct information and “update” date.
Keep track of when the site will need to be updated. If the
content becomes outdated, the site will be removed.
Look at pages on
staging server to make sure form
layout and design are correct.
All appropriate department heads must approve pages for
content, clarity and format before submitting pages for migration.
2. Submit for migration:
Once pages have been checked and are ready for
posting on the live site,
a ticket through Service Now, the online IT
ticketing system available on the home page of the intranet. In the ticket,
include the following:
Your name and department.
The URL of each page to be migrated.
Clear, accurate instructions to help expedite the migration process.
any files (images, documents, etc.) through Service Now
If changes are required, you will be asked to make them and then
resubmit the pages for approval.
Ensure the file submitted for migration is in its final format. For example,
rather than sending a Word document asking for it to be posted as a .pdf.,
rt the document to .pdf format, and then
You will be contacted with any requested revisions.
require no changes, the pages will be migrated to the live site
and you will be
If changes are required, you will be ask
ed to make them and then
resubmit the pages for approval.
The Web was created to be accessible to everyone regardless of disability.
been created with accessible design in mind, so, to the best of
our abilities, CSU websites are available to all users. The basic rule in designing
websites for accessibility is if information is provided in any medium other than plain
text, an alternate
version should also be provided. Examples include:
Alternate text describing images
Transcripts of multimedia clips
only versions of graphics
laden pages or .pdfs
People with disabilities use a variety of assistive technology to help them navigate
Web. These include:
Visually impaired users have specially designed software that
allows Web pages to be read to them (via synthesized speech). This is why it is
important to use “alt” text
ince the user can’t see the image, the screen r
lets them know there is an image and what it consists of.
These browsers display no graphics, images or photos and will
see the alternate text in place of the visual content. If you use graphic menu
systems for navigation, these
based alternate menus are an especially
important aid to users who cannot see your graphics.
Navigating without a mouse:
Users with mobility disabilities may not be able to
navigate by pointing and clicking a mouse. Therefore
the tab key can be used
navigate to links.
Cascading Style Sheets (CSS) allow users to easily apply
personalized formatting to Web documents. The contrast between text and
lors may be difficult for color
blind users to see, so if pages are
blind users can manually set their browser preferences to
override the settings and apply their own style sheet to the page instead.
1. Serving all constituents:
One of the missions of the CSU is to prov
to all. Making
small adjustments in Web pages helps create an environment that
supports all members of the CSU community.
2. Saves money:
Inaccessible websites are a liability that can permanently
damage the CSU brand. Not complying with these
guidelines can lead to
complaints, lawsuits, intervention by regulatory agencies, negative publicity and
expensive site redesigns.
3. New technology:
As Web access expands beyond the desktop computer,
accessible design makes it easier to deliver resource
s and services through
various forms of new technology such as:
Mobile devices (i.e., smartphones, PDAs, handheld computers, etc.)
oice access services
ssistive and adaptive technologies
4. Easier search:
Search engines will be able to index the site more easily
because of well
structured design and text alternatives to multimedia content.
5. The future:
Since the site will be structured with accepted and established
Web applications wi
ll be able to access the site, keeping the
CSU ahead of the curve as HTML and XML continue to evolve.
6. It’s the law
he Americans With Disabilities Act (ADA) and Section 504 of
the Rehabilitation Act require that public institutions have accessible resources
and services, including websites.
Section 508 of Title II of the Americans with
Disabilities Act of 1990 sets "sta
ndards for accessibility and establishes
requirements for electronic and information technology ... to be accessible to
people with disabilities, including employees and members of the public."
In fall 2003,
Governor Davis signed SB 302, the
extends the requirements of Section 508 of the 1973 Rehabilitation Act to the
CSU. Section 508:
denial of equal
programs or activities conducted
on the basis of race,
national origin, ethnic group identific
sex, color or disability.
Requires accessible websites.
Requires accessibility in other technology areas (online instruction,
student services, etc.).
Requires consideration of accessibility in all IT purchases. (It does not
trofit of existing technology or sites.)
Official Section 508 site
World Wide Web Consortium's Web Accessibility Initiative
Using .pdfs on a CSU
Portable Document Format files (.pdfs) need to be available to users with
disabilities. First, determine if a .pdf is the only format that will work for posting the
document. Usually, conve
rting the .pdf to
HTML will work better for all users (easier
to download, doesn’t require a plug
in, quicker to get information, searchable),
especially those with disabilities.
Suggestions for A
1. Is it absolutely necessary?
Decide whether posting a .pdf is necessary. If
it’s being posted as a shortcut, it may be easier and more user friendly to post it
as HTML, or post both options so users can choose the format that best suits
2. Structure, structure, structur
Converting documents for accessibility
compliance requires well
up documents. Use real headings rather than
larger, bolder fonts. Consider structure, not just visual output. (Use the
” options in Word, for example.)
3. Text only:
hit pages on the site, or a respective section site, consider
creating a text
only version of the home page for easier navigation. When using
only documents, ensure that they are updated when the dynamic content
4. Quick load:
ld be made to ensure fast downloading Web pages.
Break up large documents into smaller sections.
5. Additional resources:
"How to Create Accessible Adobe PDF Files"
"Advanced Techniques for Creating Accessible Adobe PDF Files"
San Luis Obispo
Departments are responsible for ensuring their pages are ADA compliant. The CSU is
legally required to ensure all of our online materials are accessible to everyone. If
your site is found to be
compliant, it will be flagged for changes. Changes will
need to be made within 24 hours or pages will be removed from the site.
newsletters are a great way to send your information in an attractive format to
users. Just like the websit
e, certain standards should be adhered to when creating
and distributing an e
Download “Communications Planning Guidelines” from the Communications
to help develop objectives, define target audience, etc., for an e
Submit a new project request through Communications at:
to develop a “branded” masthead and layout for
Compile content areas for the newsle
tter. What will the recurring sections be?
Will there be links to other sites? Will photos be used? Some examples of e
Upon approval of the e
newsletter layout and content areas by your
department head/vice chancellor, use templates for importing/entering
Dreamweaver. Basic Dreamweaver production skills include:
Entering content into main page with story synopses and links
Creating story pages
Adding links to internal sections of newsletter and link to external
Cascading Style Sheets (CSS), header
s, footers, coding
Photo, illustration usage
file size and formats (.jpg, .gif)
Creating and maintaining archives
set up a staging server folder for files and
graphics. Once your e
Newsletter is ready to launch, the Web team will then
move your files from the staging server over to the live server.
newsletters should contain links to:
The department’s website
The archive/past issues
taging server links of all new files created
through Service Now, the online
IT service request system available on the home page of the Intranet. T
Chancellor’s Office Web tea
will review, approve
to the live server.
Distribution and Migration
to set up list
serv for specialty groups or
develop an e
mail distribution list in Outlook.
When mailing the e
newsletter, it needs to be viewed from the
the staging server) in your browser.
Distribute an HTML newsletter via e
by copying the live Web page and pasting into an HTML format e
Internet Explorer, go to File
/ Send/ page by e
mail for best results.