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 title must include information about the page, the department and the university. Examples:
- Admissions Office | SUU
- Staff Directory | Admissions Office | SUU
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.
<!--#INCLUDE file="/includes/ban.inc"-->
The navigation bar provides the following links:
- "SUU Home"
- "Site Map"
- "Contact Info"
- "Search"
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 />
<!--#INCLUDE file="/includes/error.inc"-->
<div id="askquestion"><p><a href="contact.html">Looking for Answers? Ask this Department.</a></p></div>
<div id="date"><p>Last Update: <!-- #CONFIG TIMEFMT="%A, %B %d, %Y" --><!--#ECHO VAR = "LAST_MODIFIED" --></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.
The Last Update uses Server-side coding to automatically update upon page save.
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.
<!--#INCLUDE file="/includes/footer.inc"-->
The footer includes:
- SUU contact information
- copyright
- disclaimer
- USHE link.
5. SUU Core CSS
SUU Required
Adding this line to the head of a document will add the SUU Required stylesheets. These stylesheets control the appearance of the Banner & Footers, basic print and handheld styles and add visual cues to links that point to PDF or several non-web file types (.doc, .xml, .ppt, etc.)
<!--#INCLUDE file="/includes/css-suurequired.inc"-->
Departmental stylesheets are not allowed to have any styles applied directly to the <body> tag as this disrupts the required stylesheets appearance.
Basics CSS
A secondary stylesheet (basics) should be used if a department does not have their own custom styles defined. This is placed in the head section of the code, just after the core CSS.
<link href="/styles/basics.css" rel="stylesheet" type="text/css" media="screen" />
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.
Visual guide of SUU's basics stylesheet for 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.
7. Coding Practices
- 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.
8. DOCTYPE
Pages created on the SUU site are encouraged to be coded in XHTML. Using the standard DOCTYPE at the beginning of the page is strongly encouraged to ensure proper display of standard elements.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
9. Links
Links that fall in the flow of regular body copy will follow the standard set forth by the core SUU style. They will be a red shade (HEX - 990000) and underlined.
Underlined text in body copy is reserved for links only, due to the nature of the web environment and user expectations.