Centenary College logo
English / 中文 / Español

Centenary College Web Site Style Guide

1. Approved Web Site Colors

 

#002740 - Centenary - 0,39,64 - Pantone 296 C

 

#707277 - Grey - 112,114,119 - Pantone Cool Gray 10 C

#b4b4b9 - Light Grey - 180,180,185

2. Writing for Readability

  1. Always write with the active voice.
  2. Serve your reader specific and relevant content.
  3. Use simple words with clear meanings.
  4. One sentence paragraphs are okay on the Web.
  5. Use search engine keywords and phrases where appropriate.
  6. Keep your sentence length to 20 words or less.
  7. Avoid commas and conjunctions. Split the sentence instead.
  8. Break long paragraphs into smaller paragraphs or bulleted lists.
  9. Test your copy for readability. Go to www.standards-schmandards.com to use their online readability tool.
  10. In matters of grammar, usage, and style on the Web site the Gregg Reference Manual (McGraw-Hill Book Company) is the final authority. Click here to learn more about the Gregg Reference Manual.

 

3. Styling Text for Readability

  • All text on a page not within a table is left-aligned.
  • Bold text works best next to something that isn't bold.
  • Capitalize proper nouns, the first letter in a sentence, and the first letters of proper nouns, places and verbs in headline text. Example: Student Code of Conduct Upsets Students
  • Use all caps ONLY for emphasis.
  • Italicized text is hard to read on most computer screens and people will often ignore it.
  • Don't underline text unless it is a hypertext link.
  • Don't use red text unless it is an EMERGENCY.

 

4. Hypertext Links

1. All hyperlinks will contain an appropriate URI within the tag. Links to other Web pages must be approved by the receiving Web site manager as well as the Centenary College Web site manager.

2. Link text should describe the destination. Example: Click here for a calendar.

3. All hypertext links will include the title='Link' property. Example:

<a href=/calendar.htm" title="Link to calendar">Click here for a calendar.</a> 

4. For hypertext links leading to content outside the Centenary College Web site, please use the target='_blank' property so new content clearly opens inside a separate browser window. Code sample:

<a href='http://www.website.com' title='Link to Web site'
target='_blank'>Visit www.website.com</a>. 

5. Using Images

Images should be optimized (image resolution = 72 pixels per inch) for Web use. Approved files formats are .jpg and .gif.

The maximum screen width for an image running across the top of a page is 580 pixels.

The maximum dimensions for an image on the right of the page is 250 pixels wide by 375 pixels tall. Ideally, the actual image size will be the same as its properties in the image tag.

Left handed images may be used with text aligned to the right of the image. The maximum dimension for left-handed images is 200 pixels wide by 250 pixels tall.

All photographs will have a border.

All photographs and graphics will be assigned alt and title properties. A description may be added that is pertinent to the image.

All photographs that are hyperlinks will use the alt='Link' property within the image tag. Photographs will use the border='1' property within the image tag so visitors can clearly see the image is also a hyperlink.

Code sample:

<a href='http://www.website.com' title='Link' target='_blank'>
<img src='/images/myimage.jpg'width='260' height='100' border='1' 
alt='Link'></a>

6. Using Tables

Layout for the Web site is automatically maintained by our content management system. Do not use tables for page layout. Use them to display data like names, telephone numbers, hyperlink buttons, and course lists.

If you are using an HTML editor to create data tables, do not specify the widths of columns. Let the content management system handle cell and column widths.

Be sure to set the width of tables to no more than 90%. This will prevent the table from pushing page content to the bottom of the navigation bar.

7. Approved HTML Typefaces

Font sizes will be measured in ems or by percentage so letters scale with user browser settings.

Page Headings - Heading 1

Font-family: Georgia. Font-size: 1.5em. Color: #002d55. Font-weight: normal.

Secondary Page Headings - Heading 2

Font-family: Georgia. Font-size: 1.2em. Color: #002d55. Font-weight: bold.

Tertiary Headings - Heading 3

Font-family: Verdana. Font-size: 1em. Color: #004b5a. Font-weight: bold.

Paragraphs and Body Text -
Font-family: Verdana. Font-size: .9em. Color: #000000.

Contextual Hyperlinks

Font-family: Verdana. Font-size: .9em. Color: blue. Text-decoration: underline.

8. Bullets and Widgets

For uniformity, please use the &bull; (& amp bull;) character or the &middot; (& amp middot;) character. Use the same bullet within a selection. Be sure the bullet list is indented.

Non-HTML documents such as MSWord, Excel, and Adobe Acrobat files should be indicated with a symbol next to the downloadable item.

Examples:

Click here to download the document in MSWord format  DOC

Click here to download the new Style Guide  PDF

Click here to download the Excel File  XLS

Click here to visit the Web-based resource  PDF