Web Services: Western Illinois University

University Web Style Guide

Academic and administrative units represent the University as a whole. Official web sites for these areas must have a professional appearance and reflect the University's identity as well as the unique nature of the individual units (see Levels of Compliance). These web sites must apply the Minimum Web Standards approved by the University's Web Standards Committee.

Required Minimum Web Standards

The name Western Illinois University should appear at the top of each web page.

Why: If a person finds your site through a search engine or through a method other than the University's homepage, the name helps give visitors a sense of where they are.
Application: Spell out the name. Do not abbreviate. People all over the world access your site, so the abbreviation is not clear to people outside this region.

The name of your department, area, or division should appear at the top of each page.

Why: Including the name of your department, area, or division will help a site visitor have a sense of where he or she is on the web site.
Application: The name can be included at the top and can link to the homepage of your area's web site.

The main highlight color should be purple, specifically the web-safe, hexadecimal #663399.

Why: This shade of purple is the web equivalent of the purple used in the University's printed materials, and it is one of the University's identifiers.
Application: Purple should be the main highlight color, and the color palette of your site should compliment that shade. Suggested color palettes are available at www.wiu.edu/web/templates/color.

The University's academic logo should appear on every page.

Why: The academic logo is the University's identifying mark, and it coordinates with other materials produced by the University.
Application: The logo consists of both the bell tower and the name of the University appearing beneath it. The logo cannot be altered.
- The logo should appear to the left or the right side of your design. It can be used at either the top or the bottom. The off-center design of the logo does not lend itself to being centered.
- It is useful to visitors to have the logo function as a link to the University homepage; linking the logo has become an industry standard.
- Specifications on logo use are available at www.wiu.edu/web/guidelines/logos.php
  Note: The Rocky logo is only to be used on athletics pages.

Provide a text link to the University's homepage (www.wiu.edu) on every page.

Why: If a visitor finds your site through a search engine, a link to the University's homepage will help navigate the site. For example, if a person likes your academic program, he or she can find out more about the University and the admissions process.
Application: The link can be integrated into the rest of your site's navigation. You may refer to it as the "WIU homepage," "Western Illinois University Homepage," or other text that clearly indicates that it is a link.

Provide contact information for the department, area, or division.

Why: Contact information provides a way for visitors to contact a department, area, or division to request more information or report problems.
Application: On each web page include the following information or a link to a another page that contains this information:
- Mailing address: 1 University Circle, Building Name Room #, Macomb, IL 61455-1390.
  Note: To comply with postal standards, the room number appears after the building name.
- Contact phone number with the area code.
- Departmental e-mail address (not an individual's e-mail address). You may request a departmental e-mail address through UCSS.

Conform to the Illinois Web Accessibility Standards (IWAS).

Why: The State of Illinois requires Illinois agencies to apply the Illinois Web Accessibility Standards to their web sites to better insure persons using alternative methods to access your web site can find information and navigate your site.
Application: Implementation guidelines are available at online.

Preferred Web Standards

The Preferred Standards are recommended for all official University web sites. The Preferred Standards are designed to assist unit-level web managers in creating sites that reflect the University's identity and to apply good web design practices.

Title tags should contain a brief page description and either "Western Illinois University" or "WIU."

Why: The title is a window identifier and also serves as a title when users save the page as a bookmark ora favorite site. Most search engines also heavily weight the title.
Application: <title>Graduate Admissions - Western Illinois University</title>

The name of the department should follow University naming standards.

Why: Following University naming standards provides consistency throughout web sites as well as with other materials.
Application: "Department of Geography" not "Geography Department."

Department or division names appearing at the top of a web page should be in a serif font. If represented by a graphic, the font used should be Adobe Perpetua as indicated in the University Style Manual.

Why: This formatting will align the web site with the University Style Manual, and it sets off the department or division name from the rest of the document. The larger size of these elements can better handle the serif fonts.
Application (CSS Reference): h2 { font; Times, "Times New Roman", serif }
University Graphic Titles can be found at www.wiu.edu/web/guidelines/logos.php.
Note: Serifs are the decorations on the ends of strokes within each character, such as the little lines at the top and bottom of lowercase "r". Sans-serif means those decorations are not included.

Web pages should include meta tags.

Why: Meta tags assist search engines in accurately indexing a web site. There are several types of meta tags available. We recommend you include a "description" field, which is a one sentence overview of the page or web site often displayed in search engine results. The other type to include is "keywords," which should contain common terms used to find information related to your site as well as common misspellings.
Application: <meta name="description" content="The Department of Kinesiology offers courses in physical education, athletic training, and body mechanics" /> <meta name="keywords" content="physical education, pe, athletic training, kinesilogy, cinesiolgy" />

Web pages must fit a horizontal space of 600 pixels. Pages can dynamically stretch wider, but they should be readable at 600 pixels.

Why: While larger screens are becoming more common, a substantial number of site visitors use smaller monitors. Many users with large monitors often shrink their browser windows to smaller sizes instead of using the full screen.
Application Example (CSS): body { width: 600px; }
Note: Computer screens are measured in pixels per inch. Screens are typically either 72 or 75 dpi. Because the number of pixels per inch does not change, we can set the width using a fixed measurement.

Presentational layout should be controlled through Cascading Style Sheets (CSS) rather than through the HTML markup.

Why: When layout is controlled by CSS, pages are smaller, load more quickly, are easier to update, and are accessible by more devices.
Application Example (CSS Reference):
<style> p {font: .8em "Trebuchet MS", Verdana, Geneva, sans-serif; } </style>
This is the text. This is more text.
Replaces HTML Example:

This is text.

This is more text.

Your pages should be compatible with the following browsers.

Internet Explorer Windows: 6.x and greater
Internet Explorer Macintosh: 5.2 (IE 5.2 is the final version of the browser that Microsoft will make for the Macintosh, so it does not comply the latest industry standards and will be phased out.)
Safari for Macintosh: 1.x and greater
Netscape for both platforms: 6.x and greater
Mozilla-based browsers (Netscape 7.1, Firefox, Camino, etc.): Mozilla engine 1.x and greater.
- Why: Official University web sites accessible to a wide variety of modern browsers will be available to the widest audience possible.
- Application: Test your site in multiple browsers on multiple platforms. There are PC and Macintosh labs available throughout campus, if you do not have a specific computer or browser available in your office.

Use of JavaScript, DHTML, Flash, QuickTime and other plug-ins should be limited to situations where they significantly enhance the value of a web page or site.

Why: Plug-ins require additional software to be downloaded, installed, and run before the content can be viewed or used.
Application: If used, they must meet IWAS guidelines.

The use of frames is strongly discouraged.

Why: Frames are not easily accessible by people using text readers, they present problems when printing, and they have consitently shown to cause usability problems.
Application: Do not use frames.

Formatting such as bold, italics, and all caps should be used sparingly, such as to highlight key information.

Why: Excessive use of such formatting is difficult to read.
Application: Use logical styles of IWAS compliance.

Use a sans-serif font for the main text of a web page. Headings (H1-H6 tags) can be either serif or sans-serif.

Why: Sans-serif fonts are easier to read on a computer screen. Because headings are bold and typically have additional spacing, serifs are more readable in paragraph text.
Application (CSS Reference): { font: "Trebuchet MS", Verdana, Geneva, sans-serif; }

Main font size should range from 0.8-1.0 em.

Why: An em is a relative font size that scales to fit the user's needs, so it better meets IWAS requirements. A pixel (px) is a fixed-width size; it should be avoided if possible when formatting text.
Application (CSS Reference): body { font: .8em "Trebuchet MS", Verdana, Geneva, sans-serif; }

If you have a list of links, it is recommended that links not be underlined so the display is easier to scan. Within paragraphs where links are more difficult to identify, underlining is recommended.

Why: A link underlined in a paragraph is easier to distinguish from the rest of the text. A list of underlined links can become more difficult to read because of screen clutter.
Application: CSS can be used to turn off link underlining within a list item or turn on underlining within a paragraph.
a li {text-decoration none;}
a p {text-decoration: underline;}

The appearance of a site's sub-pages should be consistent with a site's homepage (including layout, graphics, fonts, and styles).

Why: Not only does it give your site a more professional appearance, it makes it easier for users to navigate.
Application: Server side includes (SSI) or other templating options will facilitate creating and maintaining a consistent layout.

Guidelines for Images on Official University Sites

The University's academic logo should appear on every page. It is the University's identifying mark, and it coordinates with other materials produced by the University.
Photographs should be uniformly professional and high quality. Whenever possible they should emphasize core values of the University, cited in the University Strategic Plan, as well as reflect the unit.
We prefer you contact the Visual Production Center rather than purchase stock photos from a company so that the people on your site truly represent the University.
Animated gifs should be avoided because they are inconsistent with the University's professional appearance and accessibility goals.
As a general rule of thumb, images should be kept under 30K; strive for the smallest file size possible that retains the quality of the image.

Applying University Elements

Several elements currently exist that can help you apply the University standards to your site. You are welcome to incorporate these elements, but please be aware that their appearance may alter over time to reflect changes in the University's web presentation.

Cascading Style Sheet: Apply the CSS in the "head" tag of your web pages (you can add additional style sheets after the University style to overwrite and customize your site): <link href="/wiu.css" rel="stylesheet" type="text/css">
Include the University header:
Server Side Include (file extension must be .shtml or .shtm):

PHP (file extension must be .php or .sphp):
<?php include ("/header.inc"); ?>
Include the University footer (including logo):
Server Side Include (file extension must be .shtml or .shtm):

PHP (file extension must be .php or .sphp):
<?php include ("/footer.inc"); ?>

Please direct questions and suggestions to webstaff@wiu.edu or call (309) 298-1993.

University News