1 UW-Eau Claire Web Site Standards
5/25/2011
Contents
UW-Eau Claire Web Site Standards ............................................................................................................................... 4
Introduction .............................................................................................................................................................. 4
Scope ......................................................................................................................................................................... 4
Content Management System .................................................................................................................................. 4
Support ...................................................................................................................................................................... 4
Page Layout at a Glance ............................................................................................................................................ 5
Top-level Pages ..................................................................................................................................................... 5
Official Site Pages .................................................................................................................................................. 5
Official Site Design Standards ................................................................................................................................... 6
Site Navigation Standards ......................................................................................................................................... 7
Primary navigation ................................................................................................................................................ 7
Secondary Navigation ........................................................................................................................................... 8
Other Forms of Navigation .................................................................................................................................... 8
Standards for Formatting Content ............................................................................................................................ 8
Standard Fonts ...................................................................................................................................................... 8
Standard CSS Font Usage ...................................................................................................................................... 8
Standard Margins .................................................................................................................................................. 9
Title Formats ......................................................................................................................................................... 9
Italic Content ....................................................................................................................................................... 10
Links in Printed Publications ............................................................................................................................... 10
Basic Capitalization and Punctuation .................................................................................................................. 10
UW-Eau Claire Color Standards............................................................................................................................... 11
Info Box Themed Colors .......................................................................................................................................... 12
Page Layout Options and Sizes of Content Regions ................................................................................................ 13
2 UW-Eau Claire Web Site Standards
5/25/2011
Division Sizes ....................................................................................................................................................... 13
Image Options ..................................................................................................................................................... 13
Custom Metadata Page Layout Options ............................................................................................................. 14
Page Layout Visual References............................................................................................................................ 15
Customization ......................................................................................................................................................... 18
Additional Information ............................................................................................................................................ 18
Other Resources .................................................................................................................................................. 18
3 UW-Eau Claire Web Site Standards
5/25/2011
UW-Eau Claire Web Site Standards
Introduction
Web site standards have been developed to assist UW-Eau Claire Web publishers meet minimum
standards for Web sites for several reasons—including identity, usability, consistency and accuracy.
Individual Web sites represent a unique part of our campus, yet combined with all sites, create one
UW-Eau Claire Web. Users appreciate predictability and structure when browsing a Web site. Having
common characteristics, such as those outlined here, helps accomplish this.
Scope
The focus of this document is for “official” sites developed using CommonSpot, the UW-Eau Claire
content management system. An “official” Web site is any site that represents UW-Eau Claire and/or
its official units, programs, centers, departments, offices or colleges. All such sites are expected to
follow these standards. Unconverted sites, student organizations and People pages follow the Web
Style Guide.
Content Management System
A Content Management System (CMS) is a collection of tools designed to allow the creation,
modification, organization and removal of information from a Web site. A CMS provides content
contributors a richer, easier-to-use Web publishing environment and enables a more consistent look.
UW-Eau Claire has chosen CommonSpot as its Web CMS. A few of the important features it provides
include:
 No Web editor needed – just use your browser
 No drive mappings required
 A single source of reusable information
 Uniform design via global templates
 Fewer errors
 Ability to schedule elements
 Ability to import/feed data such as blog content and events
All official sites are expected to use CommonSpot or a template approximating the CommonSpot
design.
Support
CommonSpot will be the only supported Web publishing tool for publishers of official sites once all sites have
been converted. Users can expect full support during the conversion process. Workshops and Assisted Work
Time sessions will assist users at all phases of site maintenance. The Help Desk is available for routine help, or
may pass the call on to Web Development Services.
Each unit needs to designate staff member/s for Web publishing. They need to be allocated sufficient time to
attend training, assist during the conversion process and maintain the content into the future.
4 UW-Eau Claire Web Site Standards
5/25/2011
Page Layout at a Glance
Top-level Pages
Most used links and
UW-Eau Claire ID bar 
Horizontal navigation bar 
search options
Featured stories
Sidebar links 
The “wings” 
Motto bar 
The “wings”

Footer
Official Site Pages
Most used links
and search options
UW-Eau Claire Global ID bar 
Site ID bar 
Full width 760 image 
Sidebar links 


Content region
The “wings” 
The “wings”

Ghost seal 
Motto bar in gold 

Footer
5 UW-Eau Claire Web Site Standards
5/25/2011
Official Site Design Standards
Element
Options
UW-Eau Claire Global ID
Bar


Site ID Bar



Horizontal Navigation Bar 



Sidebar



Motto


The “wings”

Footer




Presence is required
This bar is contained in all standard site templates for
official sites. It is minimized so as not to compete with
the site’s content.
The site’s ID image is created using Giovanni, the
standard UW-Eau Claire font, and placed in the template
at the time the site is set up
Optional right-hand element area may be used for
search, quick links or other elements
Optional use may be discussed and will require
additional setup time. If an alternate ID banner is used it
must display the root site name
For sites with multiple layers of navigation
Use recommended navigation methods that maximize
the benefits of CommonSpot
Use broadly accepted terms
Color and other design features can be implemented
o This will require additional time to develop
Widths are standard and the layout is provided by
choices in the Custom Metadata panel
Color choices are open but must follow good design
practices
If alternate sidebar colors are used, the ghost image may
not be applied
Presence is required
Gold or Blue options are provided but the same option
must be used throughout the site
Color choices for the background color in the “wing”
area are open but they must follow good design
practices
Presence is required
The footer format cannot be modified
The content in the footer is developed at the time the
site is set up
Changes to footer content require an administrator to
implement during the weekly maintenance window
Site Navigation Standards
Good navigation design is an essential ingredient for any successful Web site. Navigation should guide
visitors along a path to all page destinations and back. It must be well constructed, consistent, easy to
use and intuitive.
At a glance, visitors should have an idea of what your site offers. Sticking to standard navigation
methods provides familiarity and assures the visitor that when they click on something, nothing
unexpected will happen. This encourages them to explore your site.
Primary navigation
There are two basic types of primary navigation: Sidebar, and Horizontal Navigation Bar (Navbar).
Sidebar primary navigation should only be used for a shallow site, consisting of a small number of
separate pages that is not expected to grow. Use this method when all pages in the site can be linked
in this space, normally on the left side of your page.
The Horizontal Navbar should be used for all other sites that have collections of interrelated pages. In
order to use this method, you must break your site’s subject areas into categories using clear,
recognizable names. Each category will have its own subsite where pages are housed.
Advantages:

Easily recognized method of navigation

Takes little space, allowing more space for content

Frees up the sidebar area for secondary navigation

When CommonSpot subsites are used as categories, the subsite navigation can be automated,
using a Page Index in the Sidebar
Guidelines for use:

Limit the number of categories to around 6 or 7 links

Categories can be audience-based, topical or a combination

Investigate similar sites at other universities for ideas

Keep navigation to pages not in your site separate from your site’s navigation
7 UW-Eau Claire Web Site Standards
5/25/2011
Secondary Navigation
If you use the Horizontal Navbar for primary navigation, you need a way to allow visitors to get to all
pages in each category. CommonSpot provides a way to conveniently do this. When using the Page
Index element, as soon as a page is added to a subsite, it will immediately appear as a link in the
Sidebar in a predetermined order.
Other Forms of Navigation
There are many ways to enhance the primary and secondary navigation methods of a Web site. Not
all are necessary, but could be considered for complex sites.

Pull down menus

Quick links

Breadcrumb trails

Site searches

A-Z lists

Info boxes to showcase special links

Home
o The established place to link to home is using the site banner graphic in the top-left
side of your pages. Users now expect graphics in this position to behave in this way.
Standards for Formatting Content
Standard Fonts
H1 – Georgia 20px, #af944c
H2 – Arial 14 px, #000066
H3 - Arial 12 px, #000066
Body text – Arial 13px, #000000
Standard CSS Font Usage
font-family: Arial, Helvetica, sans-serif
font-family: Georgia,"Times New Roman",Times,serif;
font-family: Verdana, Arial, Helvetica, sans-serif
8 UW-Eau Claire Web Site Standards
5/25/2011
Standard Margins
Elements (images, text, boxes, etc.) placed on a CommonSpot page do not have margins
automatically applied. This is by design. There are cases where you would not want a margin. The
content contributor must apply margins whenever adding a new element to a page. This is done using
the Style option found within the element. The effect of the selection is illustrated below.
Title Formats
Display titles
Page names that appear within the content of a page should use the ‘initial caps’ only format.

More to do
Title Bar Caption
The title used for display in the browser’s caption bar and for bookmark/favorites should use the
‘formal caps’ format.

More to Do
The full caption should include the page title, site name and UW-Eau Claire:

More to Do, The Eau Claire Advantage, UW-Eau Claire
9 UW-Eau Claire Web Site Standards
5/25/2011
Italic Content
Text in italics is difficult to read on a computer screen. We recommend you use it sparingly, for
footnotes or short special notices.
Links in Printed Publications





Eliminate the “http://”
You can’t assume “www” is not necessary. Try before you leave it out
Eliminate the default page name. Index.htm or index.html does not need to be explicitly stated in
a URL
o Do: www.uwec.edu/athletics/
o Don’t do: www.uwec.edu/athletics/index.htm
If you have an important page with a long URL under several subsite levels, move its location
closer to root. You may have to alter your site categorization, but the benefit of a shorter URL for
print may outweigh the disadvantage
For a really long URL, you may want to use this technique for linking text:
o “You’ll find more by going to the XYZ home page at www.uwec.edu/xyz where you’ll find
an image link/text link to this information.”
o This is helpful since if the page moves or the name of the page changes, the print item will
not become obsolete as long as the link on the home page is kept up to date
Basic Capitalization and Punctuation

e-mail addresses — Do not underline or boldface. Also, it’s e-mail, not email

Internet — Capitalize the word Internet. In later references, the Net is acceptable

online — one word

phone numbers — Include area code and hyphen before phone numbers. Write in following
manner: 715-836-2031

room — Capitalize the word room if followed by a number or preceded by an actual name: Room
143 or Ho-Chunk Room

Web site – not website or web site

UW-Eau Claire — Use only this abbreviated form
10 UW-Eau Claire Web Site Standards
5/25/2011
UW-Eau Claire Color Standards

Blue and gold are the official colors of UW-Eau Claire. A coordinating palette of Web colors has been
assembled for use throughout the site. These colors are found in images, font colors, sidebars, hover
colors, info box themed elements and more.
Dark blue
Header bars
H2, H3 and
links
Medium blue
Infobox header
color
Dark gold
H1 font
Medium gold
Infobox
header color
Dark tan
Infobox header
color
Medium tan
Sidebar color
Dark putty
Color of sidebar
font and footer
font
Medium grey
Infobox
header color
11 UW-Eau Claire Web Site Standards
Light blue
Infobox header
color
Light gold
Color of motto bar
and navbar
Light tan
Hover color
Light grey
Wing background
color
5/25/2011
Info Box Themed Colors

Shown below is an example of themed colors that are available to you. The Info Box element was
designed using a theme system of styles so that a simple setting can be used to easily change
background, text and borders with adequate contrast for readability. If you need a different set of
themed colors, contact Web Development Services.
12 UW-Eau Claire Web Site Standards
5/25/2011
Page Layout Options and Sizes of Content Regions
After reviewing many existing pages, we developed the following layout options that should satisfy most, if not
all, of your design needs. If you need a different layout, there are additional layouts available in the Custom
Layout Elements that may be used to build custom layouts. If you need assistance, contact web@uwec.edu.
Division Sizes
The UW-Eau Claire Web site templates were designed with readability in mind. A page width of 760
pixels was chosen to accommodate an 800 pixel wide screen allowing 40 pixels for a scroll bar. The
extended bars at the header and above the footer give filling to those with wider screens.
The width of the rest of the content area has been divided as follows:
 Full width region
o 760 pixels
 Sidebar regions
o 190 pixels (standard) or 210 pixels
 Content regions
o 570 pixels (with 190)
o 550 pixels (with 210)
o 285 (2 columns evenly split with a 190 pixel sidebar)
o 390 (1 middle column with 2 sidebars on each side of 190 pixels)
o 360 (1 middle column with 2 sidebars on each side, one 190 pixels, one 210 pixels
o 253 (3 evenly split columns with no sidebars)
o 190 (4 evenly split columns with no sidebars)
Image Options
Keep the division sizes in mind when planning the images that will be placed in content regions.
Categories found in the Image Gallery have been created with these sizes in mind.
Image Widths
For example, images placed in the sidebar should be 190 pixels wide if you choose a 190 sidebar
layout option or 210 pixels wide if you choose a 210 sidebar layout option.
Image Heights
A standard height for a 190 pixel wide sidebar image is 144 pixels for a landscape layout and 216
pixels for a portrait layout. If you have other pages using full width images, the height used for those
and the sidebar images should match or the eye will be distracted as you move from page to page.
13 UW-Eau Claire Web Site Standards
5/25/2011
Custom Metadata Page Layout Options
The Custom Metadata panel provides a pull down (shown
at right) with options for several page layouts. Visual
references for these options are shown on the following
pages.
14 UW-Eau Claire Web Site Standards
5/25/2011
Page Layout Visual References
Full 760
2 Column 190 – 570 Sidebar (with seal)
2 Column 190 – 570 Sidebar (without seal)
2 Column 570 – 190 Sidebar (with seal)
2 Column 570 – 190 Sidebar (without seal)
15 UW-Eau Claire Web Site Standards
5/25/2011
2 Column 550 – 210
3 Column 190 – 285 – 285 Sidebar (with seal)
3 Column 190 – 285 – 285 Sidebar (without seal)
3 Column 190 – 380 – 190 Sidebar (with seal)
16 UW-Eau Claire Web Site Standards
5/25/2011
3 Column 190 – 380 – 190 Sidebar (without seal)
3 Column 190 – 360 – 210 Sidebar (with seal)
3 Column 190 – 360 – 210 Sidebar (without seal)
3 Column 253 – 253 – 253
4 Column 190 – 190 – 190 – 190
17 UW-Eau Claire Web Site Standards
5/25/2011
Customization
As described above, CommonSpot provides many page layout and color options through the use of theme
colors, Custom Elements and Custom Metadata options. Most sites will find their needs can be met with these.
Providing custom options often require substantial personnel time to deliver to end users and should be
avoided.
The following are custom options that are currently supported. Requests for additional customization will be
logged. Requests that are found to have a widespread need will be developed and supported as time permits.






Layout options under Custom Metadata and Custom Layout Elements
Standard horizontal navigation or pull down horizontal navigation
Standard horizontal navigation bar color or custom color
o Must carry through to entire site
Sidebar color
o May choose different sidebar color
o No ghost image
o Must carry through to entire site
May request theme color changes that give you different options for info boxes, highlight colors, etc. as
long as the color choices reflect good design taste
Miscellaneous custom elements such as carousel, image gallery, blog and event feed, embedded widgets,
etc.
Additional Information
For questions about the details presented in this guide, contact:
Lillian Hillis
University Web Coordinator
hillislf@uwec.edu
715-836-4214
Other Resources
Graphics Standards Guide
Training Registration System
Web Application Standards
Web Development Services
Web Style Guide
18 UW-Eau Claire Web Site Standards
5/25/2011