Wright State University Communications and Marketing

Guides & Standards - Style - WSU-Specific Style Guidelines

Background and Link Colors

Text: #000000 (0,0,0) (Black)
Background: #FFFFFF (255,255,255) (White)
Link: #006633 (0,102,51) (Green)
Visited Link: #996600 (153,102,0) (Gold)
Active Link: #006633 (0,102,51) (Green)

<body bgcolor="#ffffff" text="#000000" link="#006633" vlink="#996600" alink="#006633">

Case Sensitivity

Use lowercase letters for filenames and in hypertext reference links. We use a UNIX-based server, which is case-sensitive. You will have fewer problems with links if you stick with an all-lowercase format.

Table of Contents

Colors

Wright State University uses specific colors for pages maintained by the Web Team. These colors most closely match the Pantone Matching System (PMS) colors used in print publications and the WSU athletic logos.

RGB: 0, 102, 51
Hex (for text): 006633

RGB: 204, 153, 0
Hex (for text): 996600

RGB: 204, 102, 0
Hex (for text): CC6600

Check pages in 256 colors and higher. Use a "Web palette," when creating graphics. The Web palette contains the 216 colors that looks the same on Mac, Windows and UNIX platforms.

Common Information

Explore WSU Web pages for existing university information rather than developing duplicate sets of data or graphic files. Check the Common Pages list and the Images Web site.

Table of Contents

Contact Information

On the initial page of your site, include the department's mailing address, e-mail address, telephone and fax number and office hours. On subsequent pages, include an e-mail address of a full-time staff or faculty member. A phone number is also helpful.

Contact us:

xxxx Department -- E-mail: dept_address@wright.edu
Open Monday - Friday 8:30 a.m. - 5 p.m.
Building Name and Number
Wright State University
3640 Colonel Glenn Hwy.
Dayton, OH 45435-0001

Telephone: (937) 775-xxxx Fax: (937) 775-xxxx

<b>Contact us:</b><p>
<b>xxxx Department</b> -- E-mail: <A HREF="mailto:dept_name@wright.edu"> Open Monday - Friday 8:30 a.m. - 5 p.m.<br> Building Name and Number<Br> Wright State University<Br> 3640 Colonel Glenn Hwy.<Br> Dayton, OH 45435-0001<Br> <b>Telephone:</b> (937) 775-xxxx <b>Fax:</b> (937) 775-xxxx

Copyright Information

Create a link to WSU's copyright information on the initial page of your Web site.

Table of Contents

Document Declarations

Include the following code at the beginning of any HTML documents. The declaration tells the browser which version of HTML is being used and the language declaration identifies English as the language used on this page. Identifying the language is an accessibility requirement.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

<html lang="en">

Include the following META declaration in the head section of the HTML document. The content type declaration tells the browser which character set to use.

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Filenames

Never use spaces in filenames; use an underscore instead.

Don't use special characters in filenames (e.g. ? " &)

Always use 'index.html' as the filename for the initial page of a site.

Font

If you are linking to a style sheet, do not modify the font sizes or colors within your HTML document or FrontPage's font drop down menu. The font will automatically appear in the appropriate format. Please see the Style Sheet guidelines for more information.

Table of Contents

Footer

Using a Server Side Include for Footer Information

Current Local Server Time and Date

On the initial page of your site, the department's mailing address should precede the footer.

Graphics

alt
Always use the alt attribute within an img tag to describe graphics and photos in case viewers are not downloading graphics or are using a screen reader. If a graphic serves as a function, describe the function.

*"bullet" for graphics which precede list items. Use "separator" or "page divider" for graphic lines that provide separations on a page.

Banner Graphics for the top of your Web page
For a customized banner graphic, which coordinates with the overall WSU Web design, send a request to webmaster@wright.edu. Be sure to include the exact name of your department as it should appear in the banner and also provide an e-mail contact name for your department.

GIF Format
When saving graphics in GIF format, try using smaller color depths (bits per pixel) to improve file size.

When using Photoshop, select "Save a Copy." Choose the "Exclude non-image data" option to make the file size smaller. Be sure to choose the "CompuServe GIF" option as the format.

Use interlaced row order to allow the viewer to see entire image as it loads.

The images directory ( located at http://www.wright.edu/images/ ) is organized according to the following list:

athletics	Graphics, logos, and wordmarks for athletics
athleticsphotos	WSU athletics photos
common	Common elements that are used on WSU pages, including bullets, arrows, etc.
logo	University logos, wordmarks, and seals
photos	Photos used on various pages.
third	Header graphics specific to third level and department pages.

JPEG Format
Use JPEG format for photos, and when color depth is important.

When using Photoshop, select "Save a Copy".; Choose the "Exclude non-image data" option to make the file size smaller.

Don't make changes to a JPEG file and then resave. Use the original image (usually eps, tiff or Photoshop format).

Be sure 'baseline' (standard) is chosen for the format options.

Use level 4 or 5 compression unless quality is compromised. Try using smaller levels of compression for optimum quality vs. file size.

Size
Graphics should be 580 pixels wide or less. Always include the correct image size, width and height attributes to improve load time.

University Logos and Wordmarks

Images for use on WSU Web pages are available on the university Web server in the images directory (/images/)
University wordmarks, logos, and seals are available on the server in the "logo" subdirectory (/images/logo/)
Common graphics (bullets, arrows, etc.) are available on the server in the "common" subdirectory (/images/common/)

Table of Contents

HTML - proper use of

In preparation for XML:

use lowercase tag names and attribute names
use ending </p> tags

Hyperlinks

Navigation (link) list
As noted in the WSU World Wide Web Policy, link each page to one or more previous pages; include a a link to "WSU Home" on your site's "top-level" page.

NOTE: The Web Policy also states, "The words 'Wright State University' must appear at or near the top of the top-level page of the department/unit Web site as text or a graphic image (be sure to include a text alternative -- see the Accessibility Guidelines). In addition, academic area Web sites must clearly identify with which college they are associated. Spell out the college name rather than using the acronym. Subsequent pages of the site must identify, minimally, the department name."

Because you've written out "Wright State University" at the top of your page, using "WSU Home" for the bottom link is acceptable. The abbreviated "WSU" should not be used on its own on a page -- we need to initially identify our institution as "Wright State University" to avoid confusion for the user.

Navigation (link) list format
When providing a series of links (e.g. at the bottom of a page), use the following format, which provides space between each link, making it more accessible:

[ About WSU | Academics & Research | Admissions | WSU Home ]

Server Absolute or Relative Paths
When linking to pages that reside on the www.wright.edu server, ALWAYS use server relative paths. For example, linking from this document to the Web Resources page, use:

<a href="/web/resources/">Web Resources</a>

Trailing '/' on Directory Links
When linking to a directory, always include a trailing slash in the path name. This speeds up response time and ensures access.

Onmouseover and Onmouseout events
You may choose to use onmouseover and onmouseout events to change the status bar text in the viewer's browser. For example, for this link to the CaTS Web site, use the following anchor tag:

<a href="http://www.cats.wright.edu/" onmouseover="window.status='Computing and Telecommunications Services';return true;" onmouseout="window.status='';return true;">CaTS</a>

The text for the window.status in the onmouseover event should be the same as the link text for the anchor tag, or describe the link text better, as the above example does for describing the acronym CaTS.

Table of Contents

JavaScript Information

To use the WSU rollover seen on third level pages, include the following code in the head section of the HTML document:

 <script language="JavaScript1.1" src="/web/js/wsurollover.js"></script> 

Creating Graphic Rollovers using JavaScript

To create a rollover effect, where one image changes to another when the mouse is rolled over it, follow this three-step process.

The javascript used to create the rollover effect works in both Netscape and Internet Explorer on Windows and MacIntosh machines and is located on the university's main Web server. FrontPage, Dreamweaver and other Web publishing software will create javascript for you; however, be sure to test the effect on various browsers and versions, as it doesn't always work consistently or properly across browsers and platforms.

This example assumes that your image is also being used as a hyperlink to another Web page and that your image is located in the same directory as the html page which references it. Make appropriate changes as needed.

Don't forget to add "alt" attributes to the <img> tag. For information, see Web Accessibility Guideline 3.

The initial image is oftentimes referred to as the "standard" or "off" image; the second, or rollover image, is oftentimes referred to as the "highlighted" or "on" image.

Add these lines to the <head></head> section of your document:

 <script language="JavaScript1.1" src="/web/js/wsurollover.js"> </script> 

This information tells the browser where to find the javascript to make your rollover work.
Use this format for the hyperlink which uses the rollover image effect, where "xx" is a common name for your image. For example, if the rollover image is the Wright State University logo, you may want to call it "wsu_logo." This common name must match the name attribute of the image in the <img> tag.

<a href="http://www.wright.edu" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('xx','','image_rollover.gif',1)"> <img name="xx" border="0" src="image.gif" width="10" height="10" alt="Description"></a>
Add the following code in the <body> tag, where "image_rollover.gif" is the name of your rollover image.

<body onLoad="MM_preloadImages ('image_rollover.gif'')"> This will cause the browser to load the rollover images as it loads the Web page. Then, when the user rolls over the image, the rollover image automatically appears instead of taking time at that point to download the additional image.

If you are using a series of rollover images, use this format: <body onLoad="MM_preloadImages ('image_rollover.gif','image2_rollover.gif', 'image3_rollover.gif')">

Meta Tags

Use meta tags to provide a description and keywords for a page. Meta tags help search engines find your Web page. For more in formation on meta tags, including how to use them and how they affect search engine returns, see Search Information for WSU page publishers.

Example:

<html> <head> <title>WSU - Web Style Guide</title> <meta name="description" content="Wright State University Web Style Guide"> <meta name="keywords" content="Web, style guide"> </head>

Only when absolutely necessary, you can use a meta tag to redirect a viewer from one page to another. Redirects can confuse the Web visitor.

<meta http-equiv="Refresh" content="N; url=pagename">

Where PAGENAME is the URL to the new page, and N equals the number of seconds before the page is redirected. Allow enough time to display and read a message similar to this, "The page for [add title of page] has been relocated to http://new_web_address.edu. You will be redirected to this site if your browser supports meta tags." The message should also include a link to the new page. This allows viewers using older browsers that don't recognize the meta tag to manually forward to the new page.

Table of Contents

Server Side Includes (ssi)

A server-side include is a file that is included in an html file. Server-side includes are helpful for information that is often repeated (e.g. contact or heading information).

Just before an include, use these lines (substituting the proper responses in the bracketed areas).

NOTE: You must include the proper bullet or spacing as needed in your particular instance.

  

Example:

To use a server side include for your footer information, use this syntax on your Web page:

  < !-- end include file -->

Your footer.html file would contain the following information:

<div align="right" class="footer"> Last updated .<br> Please send comments to <a href="dept@wright.edu">dept_email@wright.edu</a><br>

Be sure to load the footer.html file in the main directory where the department/unit Web pages are stored. Also be sure to change the path to the footer file if using it on a page that's stored in a different directory.

Global Banners:

Many of the second level web pages have a universal banner which has been coded as a server-side include file. Use the following code to utilize this banner. It should appear immediately following the BODY tag.
  < !-- end include file -->

Style Sheets

Templates and Web pages maintained by the WSU Web Team use a style sheet to define font face, size and color and other items. Use the Third Level Style Sheet Definitions Web page to learn about the style sheet and what it can do to help you maintain consistency.

When using the Third Level Style Sheet, do not modify the font sizes or colors within your HTML document or FrontPage's font drop down menu. For heading size fonts, use H2, H3, etc. to create boldface, larger type. For example, if you use an <h2> or <h3> tag, it will appear as follows.

What you see:

This is an example of H2

HTML: <h2>This is an example of H2</h2>

What you see:

This is an example of H3

HTML: <h3>This is an example of H3</h3>

Table of Contents

Tables

Remember that speech synthesizers, like Jaws for Windows, reads tables beginning with the top, left cell and then proceeds to the right.

Using tables as a layout tool can cause your page to be inaccessible for those using a screen reader or a text-only browser. Check your pages with Bobby -- a Web-based tool for analyzing Web pages for their accessibility.

Table width should not exceed 580 pixels.

Use the <th> tag, not <td> for table headings.

Center your table, so high-resolution monitors won't have excessive 'white space' on the right-hand side of the screen.

If you specify a table width, also specify widths for each table cell.

<table border="0" width="580" cellpadding="0" cellspacing="0"> <tr><td> Page content... </td></tr> </table>

Title

All Web pages must include a descriptive title within the <title> tag. The title appears in the bar across the top of your browser -- it doesn't appear on the Web page itself. The title of a Web page is indexed by search engines and used as the title that's displayed on the search engine "results" page.

The HTML coding looks like this:

<title>WSU - Page Name</title>

Where Page Name is the title for the page.

Within FrontPage, in the "Normal" view, right-click on your Web page; choose "Page Properties." Click on the "General" tab. Type the title into the "Title:" window.