1 UW-Eau Claire Web Site Standards 5/25/2011

creaturewoodsInternet and Web Development

Dec 8, 2013 (3 years and 7 months ago)

107 views

1

UW
-
Eau Claire Web Site Standards


5
/
25
/20
11

2

UW
-
Eau Claire Web Site Standards


5
/
25
/20
11

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 Sta
ndards

................................
................................
................................
................................
...

6

Site Navigation Standards

................................
................................
................................
................................
.........

7

Primary navigation

................................
................................
................................
................................
................

7

Second
ary 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

3

UW
-
Eau Claire Web Site Standards


5
/
25
/20
11

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

4

UW
-
Eau Claire Web Site Standards


5
/
25
/20
11

UW
-
Eau Claire
Web Site Standards

Introduction

Web site standards have been

developed to assist UW
-
Eau Claire
W
eb publishers meet minimum
standards for
W
eb sites

for several reasons

including identity, usability, consistency and accuracy
.
Individual
W
eb 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
W
eb site
. H
aving
common
characteristics
, such as those outlined here, helps accomplish this.


Scope

The foc
us of this document is for
“official”

site
s

developed using CommonSpot, the UW
-
Eau Claire
content management system.
An “official” Web site is a
ny site

that represents UW
-
Eau Claire and/or
its official units, programs,
centers,
departments
, offices
or coll
eges
. All such sites are

expected to
follow these standards.

Unconverted sites, s
tudent organiz
ations and People pages follow the

Web
Style Guide
.

Content Management System

A Content Managemen
t 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
contri
butors a richer, easier
-
to
-
use W
eb publishing environment and enables a more consist
ent 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 event
s


All official

sites are expected

to use CommonSpot
or
a template approximating
the CommonSpot

design.


Support

CommonSpot will be the only

supp
orted
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

W
ork
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 s
taff

member/s for Web publishing. They
need

to be
allocated sufficient

time to
attend training
, assist during the c
onver
sion proces
s and maintain the content into the future
.

5

UW
-
Eau Claire Web Site Standards


5
/
25
/20
11



Page Layout at a Glance


Top
-
level Pages


UW
-
Eau Claire

ID bar


Horizontal navigation bar






Most used


links and
search options





Featured stor
ies







Sidebar links







T
he “wings”





The “wings”







Motto bar








Footer

Official Site
Pages


UW
-
Eau Claire
Global

ID bar




Site ID bar







Most used
links

and search options


Full width 760 image









S
idebar links











Content region








The “wings”





The

“wings”















Ghost seal






M
otto
bar in gold








Footer


Official Site

Design Standard
s

Element

Options

U
W
-
E
au
C
laire

Global
ID

Bar



Presence is
required



This bar is contained in all standard site templ
ates for
official sites
. It is minimized so as not to compete with
the site’s content.

Site
ID Bar




The site’s ID image is created using Giovanni, the
standar
d
UW
-
Eau Claire
font, and placed in the template
at the time the site is set up



Optional right
-
hand element area m
ay
be used for
search
,
quick

links or other

elements



Optional use

may be
discussed and will require
additional setup time
. If an alternate I
D banner is used it
must display the root site name

Horizontal
Nav
igation

Bar



F
or sites with
multiple
layers of navigation



Use recommended navigation methods that maximize
the benefits of CommonSpot



Use broadly accepted terms



Color and other design featu
res can be implemented

o

This will require additional time to develop

Sidebar



W
idth
s 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 ar
e

used, the ghost image may

not be applied

Motto



Presence is
required



Gold or
Blue options are provided
but

the same option
must be
used throughout the site

The “wings”



Color choices for the background color in the “wing”
area are open
but

they

must

follo
w good design
practices

Footer



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 wi
ndow


7

UW
-
Eau Claire Web Site Standards


5
/
25
/20
11

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 intuit
ive.

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 explor
e 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 me
thod, 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 lin
ks



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

8

UW
-
Eau Claire Web Site Standards


5
/
25
/20
11

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 u
sing
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
c
ould be considered for complex sites.



Pull down menus



Quick links



Brea
dcrumb 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



St
andard CSS
Font Usage

font
-
family: Arial, Helvetica, sans
-
serif

font
-
family:

Georgia,"Times New Roman",Times,serif;

font
-
family: Verdana, Arial, Helvetica, sans
-
serif


9

UW
-
Eau Claire Web Site Standards


5
/
25
/20
11

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 titl
e, site name and UW
-
Eau Claire:




More t
o Do, The Eau Claire Advantage, UW
-
Eau Claire

10

UW
-
Eau Claire Web Site Standards


5
/
25
/20
11

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 P
ublication
s




Eliminate the “http://”



You can’t assume “www” is not necessary. Try before you leave it out



Eliminate the default pag
e 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.h
tm



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 UR
L,
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 th
e 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 ema
il



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

11

UW
-
Eau Claire Web Site Standards


5
/
25
/20
11

UW
-
E
au
C
laire

Color

Standard
s


Blue and gold

are the official colors of UW
-
Eau Claire.
A coordinating p
alette of
W
eb 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


Medium blue


Light blue







H
eader

bars

Infobox
header

Infobox header






H2, H3
and


color



color


links













Dark gold


Medium gold



Light gold






H1 font



Infobox


Color of motto bar









header color



and navbar








Dark tan



Medium tan



Light tan





Infobox header



S
idebar

color



Hover color






color








Dark putty


Medium grey

Light grey





Color of sidebar



Infobox

Wing background


font and footer




header color


color


font

12

UW
-
Eau Claire Web Site Standards


5
/
25
/20
11


Info Box Themed

Colors


Shown below is an example of themed colors that are available to you. The Info Box element was
designed
us
ing
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
theme
d

colors, contact Web Development

Services
.



13

UW
-
Eau Claire Web Site Standards


5
/
25
/20
11

Page Layout

Options

and Sizes o
f Content Regions


After review
ing

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 Elemen
ts that may be used to build custom layouts. If you need assistance, contact
web@uwec.edu
.

Division Sizes

The UW
-
Eau Claire
W
eb site templates were designed with readability in mind. A page width of 760
pixels was chose
n 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 plannin
g the images that will be pl
aced

in
content
regions.
C
ategories

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 wid
e 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 image
s
, the height used

for those
and the sidebar images should match or the eye will be distracted as you move from page to page.


14

UW
-
Eau Claire Web Site Standards


5
/
25
/20
11

Custom Metadata Page Layout Options


The Custom Metadata panel provides

a pull down (shown
at right)

with

options for several page
layout
s
.
Visual
reference
s for these options are

shown on the following
pages.


15

UW
-
Eau Claire Web Site Standards


5
/
25
/20
11

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)









16

UW
-
Eau Claire Web Site Standards


5
/
25
/20
11


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)


17

UW
-
Eau Claire Web Site Standards


5
/
25
/20
11

3 Column 190


380


190 Sidebar (without se
al)


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














18

UW
-
Eau Claire Web Site Standards


5
/
25
/20
11

Customization


As described above, CommonSpot provides many page layout an
d 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
av
oided.


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 w
ill be developed and supported as time permits
.




Layout options under Custom Me
tadata 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

M
ay 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

We
b Application Standards

Web Development Services

Web Style Guide