Online Style Guide

To make all of our pages consistent in style and navigation, we follow the following rules:

General

  • All text blocks need to be defined as a heading, normal paragraph, block quote, or an ordered or unordered list, depending on how they are being used on the page. To set a format, click somewhere in the text block, and select it from the format menu for paragraphs and headers, or click the appropriate button for ordered and unordered lists.
  • If you are pasting text from Microsoft Word, if I don't have it setup to do this automatically always use the "Paste as Plain Text" button. This will remove all formatting so your text will match the rest of the site.
  • Do not add blank lines to add spacing to your page. The spacing is built in to the styles. If you would like additional spacing, let me know.

Style

  • Never use ALL CAPS for emphasis- Convert to upper and lower case letters
    • If the text is in a paragraph for emphasis, bold it.
    • If the text is a heading, use the appropriate heading tag.
  • Never use underlining as this could be confused with a hyperlink
    • If the text is underlined because it is the name of a book, etc, italicize it.
    • If the text is underlined because it is a heading, use the appropriate heading format.
  • When entering copy, always use "e-mail" not "email", and "homepage" not "home page".
  • Abbreviations should not be used, if possible, as they are difficult for automatic translators and non-American audiences to understand.

Headings

Headings are a great way to make longer pages easier to scan and helps screen readers as well as search engine rankings. Think of them as an outline for your page.  To create a section header on your page, click on the block of text and select the appropriate heading level from the format menu.

  • Always use header tags in order. The title of the page is generated as a "Heading 1" so this should never be used on the page. Therefore, section headers should start with "Heading 2"s, sub-section headers should be "Heading 3"s and so on.
  • If the text block is a header for a section, use the appropriate header format selection. Do not try to emulate the look by using simply bolding the text. It may look the same on the screen, but screen readers and search engines read it differently.
  • If you have an inline title, like bolding the first part of a paragraph followed by a colon or dash, consider putting it on its own line and using a heading instead.
  • Do not use heading format for a page's subtitle text, since this is just additional information, not a header of a new section. Instead, make the format "Normal" and select the "Subtitle" style.
  • Do not use a heading format just to make something stand out on the page. If it's not the heading of a new section, use a "Paragraph" format and select the "Promotional" style, or another appropriate style.

Paragraphs

Most of the text blocks on your page will be paragraphs. To create a paragraph on your page, click on the block of text and select "Normal" from the format menu.  "Normal (DIV)" is only used when you are using HTML code from another source.

The kind of paragraph a text block is can be changed by using the styles menu.  A good rule of thumb is if you're bolding or italicizing a whole paragraph, you should probably be using a style instead.

  • "Subtitle" - Used for a subtitle that appears under the main title.
  • "Promotional" - Used for promotional text. Typically makes the text bold and centered. Use this for things you want to stand out on the page but are not section headers. Also used if you want a single link text block to stand out, typically at the bottom of your text such as "Download this file now".  Use this sparingly on a page - if a whole page is emphasized, then none of it is visually.
  • "List Header" - Used for lists, see below.
  • "Address" - Used if the block of text is someone's mailing address.
  • "Citation" - Used for citations and creates a hanging indent.
  • "Note" - Used if you have a note about the text, typically for footnote or legal type text.
  • "Sponsor Logos" - Used if you will have a line of small logos on a page.
  • "Centered" - Used to center align a paragraph.  Rarely used as body text should be left aligned.  Do not try to make a webpage look like a flyer by centering all the text.
  • "Right" - Used to right align a paragraph.  Rarely used except to emulate a printed document.
  • "Clear Floats" - this is a special use style to start the paragraph under any images you may have right or left aligned.

Lists

Lists should be used whenever there is a list of items on your page, rather than separate paragraphs, since they are easy for a visitor to scan. To create a list, hilight the text blocks of your items and click on either the unordered list (bullets) or ordered list (numbers) button.

  • If there is a heading for the list, but it isn't actually a section header, such as "The following things are important:", use a paragraph with the "List Header" style which will make it bold and bring it closer to the list.
  • Lists do not need to have a format selected, and shouldn't unless you plan to have multiple paragraphs in a single list item.
  • If it is possible to show information in a list rather than a table, always use a list instead. Lists are cleaner visually, wrap around graphics, and increase handicap accessibility.

Links

To create a link, hilight the text that will become a link, and click the "linkit" button for internal links or "link" button for external links.

  • Don't print a URL on a page. Always find the title of the page it links to and use that for the linking text. This helps blind users as well as search engines and just looks nicer, especially for long URLs.
  • E-mail links: The text of an e-mail link should be the person's e-mail address. Do not use an e-mail link around someone's name. Otherwise, if people print out the page, they will not know the person's e-mail address.  E-mail addresses in your text will become links automatically with spam reduction tricks, so do not try to make them links manually.
  • People's names: If you wish to link someone's name, it should point to that person's personal or professional homepage.
  • "Click Here": Do not use the words "click here" or other similar phrases for links. For handicap accessibility, links should be understandable out of context. Instead, rephrase the text so that you can link text describing what the person will get when they follow the link, preferably the title of the page.
  • Links off-site: Links going to sites outside your own will automatically open in a new window.  Your template will also put a little icon at the end of the link to let people know it will open a new window. Do not use the "Target" settings on the link dialog box to open in a new window as that method is not screen reader friendly.