Standards & Guidelines

Web Guidelines

Writing for the web involves two basic principles:

  1. Semantic accuracy
  2. Scannable content

Semantic accuracy refers to using markup as it was intended to be used. Bold, italics, lists, tables, headings, etc. all have specific ways they are meant to be used. When they are used in that manner, the page content should display correctly for all users, and the content is more meaningful for search engines. Semantic Accuracy also ensures that the content will be interpreted by those with screen readers, which helps us to stay compliant with Section 508 requirements for accesibility.

Scannable content ensures that content can be consumed quickly and efficiently. There is an overwhelming amount of content available on the Internet, and users have grown accustomed to scanning first until they find what they need, and THEN reading. We must write our content concisely and provide adequate breaks between sections, using prominent headlines and sub-headlines, so that a user can quickly surmise whether or not the page they are viewing is what they need to know.

Be Concise

Keep all content clear, focused, and direct. If the page must include a large amount of content, be sure to effectively use headings and consider using an internal navigation (via "section anchors") to make the document easier to browse.

Use Headers

Effective headers make the text more visually scannable, which makes it easier for users to find the information they are looking for. In large documents, easily-scannable text is critical.

Screen-reader software such as "JAWS" also allow the user to quickly navigate through the document using the Heading tags, so a solid heading hierarchy makes the JAWS-user's experience much more pleasant.

For Contribute Users: In the Contribute "Style" menu, at the bottom of the list is a series of choices labeled "Heading 1", "Heading 2" ... "Heading 6".

  • The page title should be "Heading 3"
  • Any section titles within the page should be "Heading 4"
  • Any subsection titles underneath should be "Heading 5"
  • Heading 1 is reserved for the "Indiana University East" banner, and should never be used elsewhere. Heading 2 should not be used either.

Text Accents: Bold & Italics

Bold and italic styling should be used to provide impact or attract attention to a word or phrase, to make it stand out from the surrounding text.

Avoid using Bold & Italics for section headlines (use Header 4 or Header 5 -- see above). To call attention to an entire block of text, instead of using bold, place a meaningful header above it and format the text normally.

For Contribute Users: The style menu in Contribute includes "Bold" and "Italic" styles. Please use these sparingly for emphasis.

When creating links in your document, try to make the links intuitively blended into the sentence rather than explicitly labeling them. For example:

  • Ideal: "Please refer to our advising forms for more information."
  • Avoid: "Click here for our advising forms."

For an explanation as to why "click here" is not a useful link text, go to [google.com] and type "click here" and see if you can guess why the first two search results are there.

Only link directly to documents for which you are the maintainer. If you are not the person primarily responsible for uploading / updating / maintaining the document, do not link directly to it. In these cases, link instead to a page where the document resides. (eg. When linking to the schedule of classes, point to http://www.iue.edu/registrar/scheduleofclasses.php, and not http://www.iue.edu/registrar/view_schedule.php?semester=fall&year=2010 )

Appropriate Formats

When including a document attachment, there are a number of formats that can be used (.doc, .pdf, .ppt, etc.). To keep our content viewable by the largest number of people, we should try to avoid using proprietary formats, or at least offer non-proprietary alternatives where possible. In order of preference (highest to lowest)

Documents
  1. Acrobat (.pdf) (exception: forms may sometimes need to be in Text/Word format)
  2. Text (.txt) or Rich Text Format (.rtf)
  3. Word (.doc) / Excel (.xls) (Office 2003 or earlier)
  4. Word (.docx) / Excel (.xlsx) (Office 2007)
  5. Publisher (.pub)
  6. Powerpoint (.ppt / .pptx) – (Contact us if you are wanting to put up a slideshow)
Images

Images should always 72 dpi, RGB format, preferably no wider / taller than 400 pixels). Using Photoshop's "Save for Web" feature should accommodate this.

  1. JPEG (.jpg) / GIF (.gif)
  2. PNG (.png) / SVG (.svg)
  3. Acrobat (.pdf)
  4. Publisher (.pub) / Photoshop Document (.psd) / AutoCad (.dwg)
  5. Embedded in a Word Document (.doc)

Use Lists where appropriate

The list feature should be used whenever you have a series of related items. If list items are consistently long enough (over a sentence long each) you may want to consider just writing them out as paragraphs instead, and using bold to accentuate the key words in the paragraph.

For Contribute users: The List button is located to the right of the style menu.