Web Services

Style Guide - SUU Units

This page outlines the web page requirements for the following SUU units:
Colleges, Schools, Departments, Divisions, Administrative offices, committees, and faculty/staff home pages.

A template file will be provided to each unit to help facilitate conforming to the following requirements.

1. Title

Every page must have a title within the HTML title tags. The page must begin with "SUU - " and be followed by a content appropriate title, similar to the following examples:

1. SUU - Admissions Office
2. SUU - Admissions Office: Registration Form
3. SUU - News & Information *ARCHIVE*

Note: All pages that have an archive must indicate that it is an archive within the title. This is for searching purposes.

Illustration: Showing where the title bar is

2. Banner

Every page must have the standard SUU banner, placed at the top of the page.

Insert the following line of code into the page, directly after the opening <body> tag.

The navigation bar provides the following links: "SUU Home" "Site Map" "Contact Info" "Search"

Illustration: Showing where the banner is

3. Information Bar

Every page must have the standard SUU Information Bar, placed second to the bottom of the page.

Place this block of code just before the closing <body> tag and the Footer include code.
<div id="infofooter" class="clearfix">
<hr />

<div id="askquestion"><p><a href="contact.html">Looking for Answers? Ask this Department.</a></p></div>
<div id="date"><p>Last Update: </p></div>
<hr />
</div>

The Information Bar provides the following information:

"Report an Error on this Page"
"Last Update"
"Looking for Answers?"

Note: The "Looking for Answers" link needs to point to a contact page for that specific department.

Illustration: Showing where the info bar is

4. Footer

Every page must have the standard SUU footer, placed at the bottom of the page.

Insert the following line of code just before the closing <body> tag.

The footer includes the SUU address, phone number, copyright, and disclaimer.

Illustration: Showing where the footer is

5. SUU Core CSS

Every page must reference the core cascading style sheet (CSS) placed in the HTML head section with the following code:

This stylesheet controls the overall page margins, banner and footer structure.

A secondary stylesheet (basics) should be used if a department does not have their own styles defined. This is placed in the head section of the code, just after the core CSS.

The basics CSS defines the font type and size, link color, and other environment settings to provide a consistent look and feel throughout the SUU site.

- Get a visual guide to see how SUU's stylesheets affect standard web elements

6. Compliant with Accessibility Laws

All pages should be compliant with accessibility laws. Accessibility checking is a crucial part of our website development. Content needs to be accessible to users with many differing disabilities. WebServices has many years of experience in checking for all of these different areas. If you would like help with accessibility issues, contact Web Services.

Two of the easiest steps you can take toward accessibility: put alt text on all of your images and avoid using the words "Click here" on your page.

STRONGLY Recommended

Provide CSS files for screen, print and handheld displays
Use semantically correct XHTML or HTML. No tables for layout and use CSS for all design/placement purposes.
Validate the site to ensure it meets code validation and accessibility validation.