Steps of a redesign

Overview
Goals
Time estimate and team
Content review
Site structure and navigation
Finalize timeline and content
Visual design development
Production and proofing
Launch and maintenance

Campus website style guide 2002

(NOTE: this is an archival document. Because the web evolves continually, these standards will be outdated by the time it's posted, so please treat it as a template, not a set of guidelines.)

Navigation bar

Background: #3366CC
Text (no link) #87cefa
Link colors:
Link: #FFFFFF
Visited: #FFFFFF
Hover: #FFCC99

Pull quotes

big loud important (or short) pull quote: "pullquote"
super long or kinda subtle use: "pullquote2"

Sidebar

Use SIDELINK style
Background: #eeeecc
Text: default (#464c5c)
Link: #993300
Visited: #993300
Hover: #4e303
Bullets: <ul class="sidelink" STYLE="list-style-image: url(../images/sitewide/bulletrustwide.gif)">

Tables (general)

Bordercolor=#CCCCCC
Border="1"

ADA requirements

Use summary tag (example below)
Use caption style (example below)
Use th & id tags (example below)
Use axis tag (on complex tables: example at http://www.rehab.uiuc.edu/cita/courses/2002-02-REHAB711NC/lec10/slide6.html)

example:
<table width="100%" border="1" cellspacing="0" bordercolor="#CCCCCC" summary="This table shows which courses are approved for Gen Ed in specific majors.">
<tr>
<td class="caption">&nbsp;</td>
<td colspan="2" class="caption">General Education Approved Courses<br>
Historical and Philosophical Perpectives</td>
</tr>
<tr>
<th id="courses">Courses</th>
<th id="title">Title and Remarks </th>
<th id="acp"><a href="#">ACP</a> </th>
</tr>
<tr class="oddrow">
<td headers="courses">AFRO 240</td>
<td headers="title">African-American Dance in American Culture<br>
Same as DANCE 240. See DANCE 240.</td>
<td headers="acp">X</td>
</tr>
<tr class="evenrow">
<td headers="courses">AFRO 620</td>
<td headers="title">African-American Dance in American Culture<br>
</td>
<td headers="acp">XY</td>
</tr>
</table>

Title

(use "caption" style!!)
Background: #333399
Text (no link) #ffffff
Llink #eeeecc
Visited #eeeecc
Hover #ffcc99

Column heads

Use TH tag (see above example)
Background: #3366cc
Color: #FFFFFF
Link color: #eeeecc
Hover: #FFCC99

Rows (if more than two or three)

Odd rows background: #FFFFFF
Even rows background: #f2f3df

Bulleted List

On white background
<ul STYLE="list-style-image: url(../images/sitewide/bluebullet.gif)">

On sidebar
<ul class="sidelink" STYLE="list-style-image: url(../images/sitewide/bulletrustsquarelow.gif)">

On tan background
<ul STYLE="list-style-image: url(../images/sitewide/bluetanbullet.gif)">

Nonbulleted list/list of links/semi-table

(see /level2/3columnstanside.html)

Put it in a table: use TH for title and background color (#F2F3DF):

Example:<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#F2F3DF">
<tr>
<th>Community Organizations</th>
</tr>
<tr>
<td><a href="#">Campustown 2000</a><br>
<a href="#">Champaign County Chamber of Commerce</a><br>
<a href="#">Champaign County Humane Society</a><br>
<a href="#">Champaign Park District </a><br>
<a href="#">Prairienet Community Info </a><br><a href="3">Urbana
Park District</a><a href="#"><br>
</td>
</tr>
</table>

Blue background colors

#ebf2f8
#f4faff