Content Training

Page Style Guidelines

The page title should only be used 1 time on a page. Its purpose is to provide a useful title for the content on the page.  Following the page title you can use the Intro Text style.  This should only be used at the top of the page to provide a brief introduction to the content on the page.

Page Outline Approach

To make it easy for the site visitor to find information, use headings to outline the content on the page.  Proper user of Headers will allow the visitor to quickly review the content that is on the page to determine if they have found the information they are looking for.

Scanability - left justify content

To make the page easy to scan - always left justify text and headers.  This keeps the eye from jumping back and forth on the page, making it much easier for the reader to absorb the information on the page.

align graphics / photos

If you are adding  any visual graphics or photos and there will be more than one, left or right justify all the graphics/photos.  If you left justify some, and right justify others, you ar breaking the scanability rule making the eye jump back and forth.

Document Lists

When adding a list of documents to your page, use the document type icon to identify to the reader the type of document. This shoud be placed to the left of the link for two reasons:

  • Scanability
  • Visually impaired visitors will hear PDF or WORD document and then the name of the document.

Here is an example of enumerated (numbered) list:

  1. Scanability
  2. Visually impaired visitors will hear PDF or WORD document and then the name of the document.

Font Colors and Sizes

Your website has been designed with specific font sizes and colors to promote uniform content across the website. These colors and sizes are proportional and should be used at all times. All content should be formatted using the styles specific to your website that are available in the format drop list.  This will promote a very professional looking website.

Bolding Text

Use bold text if you want something to stand out.  Please use it sparingly so it does not lose its affect. If everything is "bold" on the page, nothing will stand out.

all caps

Do not use all caps in paragraph content.  All Caps is taken as a form of "screaming" at the reader.  Always used mixed case for all content and then apply the format style.  Some of the heading styles will automatically be in all caps.

Italics Text

Italics text is hard to read on a web page and should be avoided.

Italics text is hard to read on a web page and should be avoided.

Underlining Text

The reader has been conditioned to think that underlined text is a hyperlink. It is important to consider this when wanting to emphasize text in a paragraph.

It is recommended to bold the text instead of  underlining it.  Readers will sometimes be confused or think a link is broken.

Sample Indentation

I want this to be indented.  It places blockquote tags around the element.

Lorem Ipsum Dolor Sit Amet

H4 Intro Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ligula elit, convallis a imperdiet ut; bibendum in ligula. Nunc consectetur, justo ac adipiscing ornare, turpis sem placerat tortor, et feugiat urna arcu ac lacus. Cras scelerisque feugiat turpis ut ullamcorper. Vivamus pretium ornare volutpat. Nulla ultrices venenatis mauris, a convallis mauris.

Morbi at blandit ipsum. Donec porta mi in risus fringilla a sollicitudin elit eleifend. Vivamus erat urna, sollicitudin vitae eleifend at, facilisis suscipit velit. Duis tempor, magna et molestie molestie, orci nunc vestibulum elit, aliquam malesuada mauris libero sed risus. Nulla non tincidunt nulla. Etiam posuere purus vel sem feugiat dignissim. Sed at porta urna. Pellentesque lacinia mauris ut risus ultrices imperdiet.

H2 Lorem ipsum dolor sit amet adipiscing

H3 Lorem ipsum dolor sit amet adipiscing

H5 Lorem ipsum dolor sit amet adipiscing

H6 I'm not usually used, but I'm an H6.

Paragraph bold text link Vestibulum at eleifend mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque sodales mattis vulputate. Curabitur adipiscing dignissim gravida. Aenean ac lacus sit amet tortor aliquet molestie?

Quisque ac justo lectus. Aliquam consectetur ultrices risus, ut iaculis purus semper elementum!

  • Unordered list item lorem ipsum dolor sit amet adipiscing
  • Unordered list item lorem ipsum dolor sit amet adipiscing
    1. Sub-list: Ordered list item lorem ipsum dolor sit amet adipiscing
    2. Sub-list: Ordered list item lorem ipsum dolor sit amet adipiscing
  • Unordered list item lorem ipsum dolor sit amet adipiscing

Pellentesque faucibus scelerisque est, sodales malesuada leo blandit sed. Aliquam sit amet nibh sit amet dolor faucibus tincidunt id non libero. Donec hendrerit eleifend nulla ac convallis.

  1. Ordered list item lorem ipsum dolor sit amet adipiscing
  2. Ordered list item lorem ipsum dolor sit amet adipiscing
    • Sub-list: Unordered list item lorem ipsum dolor sit amet adipiscing
    • Sub-list: Unordered list item lorem ipsum dolor sit amet adipiscing
  3. Ordered list item lorem ipsum dolor sit amet adipiscing

Pellentesque urna orci, rutrum at vehicula eget, tincidunt et nisi. Sed rhoncus dapibus porttitor! In hendrerit, tortor et dictum viverra, ipsum velit vehicula ligula;