Web Standards Guide
1. Required Elements
a. Breadcrumb Navigation
i. Visitors must be able to see how they reached a particular point so they can understand a site’s architecture and get back to where they were
ii. Breadcrumbs must follow the current style of the University’s top tier Web site.
b. Standard Template: Header Variant, Footer, and Navigation
i. Any variation of the official University header must be approved prior to publishing and/or linking from the University Web site. This includes the main University navigation structure. Headers must be consistent with University branding efforts.
1. Official University logo (interlocking T's) for the Web and Link to Home Page
a. The University’s logo is comprised of the interlocking “TTU” logo as well as the Tennessee Tech University word mark or department name. It cannot be modified, reshaped, or skewed to fit material.
b. The logo must appear at the top left.
c. The logo must always be linked to the University’s home page.
d. The logo must appear on a light background, providing high-contrast visibility
e. Official units may replace the word mark with their unit's name, provided it is in the appropriate font.
a. The official University search function should always appear in the top right corner of all pages unless there is:
i. A conflicting search.
ii. Permission has been granted in writing by the Web and Digital Media Director.
iii. Authorized academic colors are TTU purple (#660099) and TTU yellow (#ffcc00). The word mark and interlocking TTU may be used in the official two-color version (purple and black), or in single color version of purple or black. The images may also be reversed from a dark color.
c. Descriptive Head Tags
i. Title Tag
1. The title tag should function as a reverse breadcrumb, with specific page information displayed first, unit second, then University tagline last.
2. Example: Game Schedules, Intramural Sports, Tennessee Tech University
1. A brief but detailed description of the unit is required, but unique page information is suggested.
i. The author/maintainer of the unit should identifiable by administrators. Please set the author or use an alias in TechCMS.
ii. Do not display a ‘last updated’ or ‘published’ date unless it is a news item. This information is available to administrators.
2. Pages Without Information
a. Pages without information cannot use any 'under construction' graphic or say 'under construction.' Standard languages for pages that fall in this category is 'More information coming soon.'
a. User Focus
Organize and market your unit. Design your layout and sections based upon the users’ needs, not by departmental organization. Try to identify what items a user would want logically.
Use a validator to ensure your site’s accessibility functions and Web standards. E.g. http://validator.w3.org
c. Logical Structure
Be aware of Web design conventions to plan your site’s structure, navigation, and page layout. Page levels should be organized to provide increasing degrees of detail (generic to specific) for those needing more information.
The University makes available a ‘print’ media format CSS file that you can toggle on your Web page. This CSS file is automatic for all departments using the University's CMS. This allows users to print the information on your Web page without having to print the unnecessary items such as the navigation.
Many visually impaired users reply on text reading devices to make content available to them via audio
i. Use language that is simple and as clear as possible.
ii. Usetags on all main paragraph sections as to make browsing through the page easier.
iii. Do not use tables unless its tabular data.
b. Provide Text Equivalents to all Non-text Content
i. Provide a description of all images and elements in an ALT tag. The ALT tag allows for text readers to provide a description of any elements and to convey the content and meaning of the page
ii. If your content is dynamic, such as flash, provide text equivalents
iii. If you page cannot contain text equivalents, consider creating a text-only version
c. Make Sure that Text and Graphics Make Sense Without Color
i. People who cannot differentiate between colors will not understand information that relies on color for its main message. Choose backgrounds that contrast with page text and don’t interfere with content.
d. Do not under any circumstance use frames
i. Frames are not accessible
ii. The content within frames typically are not indexed by search engines
iii. iFrames are acceptable when gathering information from an outside product or non-PHP script, including VB.
e. Avoid Image Maps
i. Navigation using image maps requires a mouse, which renders the page inaccessible to most visually impaired users, as well as most mobile devices
f. Use Descriptive Links
i. Avoid using ‘click here’ or similar phrases for links. Be descriptive when providing links, as in linking titles and other pertinent information in the flow of the content to other sections
g. Test Sites in Multiple Browsers, Operating Systems, and Connection Speeds
i. Suggested browsers are Internet Explorer 7 and 8, Firefox, Opera, Safari
ii. View your pages as ‘text only’ or ‘no style’ to see how content flows