Kingswood Communications Web Style Guide

The intent of the Kingswood Communications Web Style Guide is to provide a consistent style on all web pages.

Active Web Technologies

Active technologies requiring a plugin (such as Java, Flash or Silverlight) must not be used.  Instead, Javascript and HTML5 must be used.

Breadcrumbs

Breadcrumbs must show how a user can arrive at a given page from the menu.  Top level menu items with no associated page (e.g. QuickLinks) should not be shown in the breadcrumb.

Calendars

Calendars should be embedded as a Google Calendar iFrame.  PDF Calendars should not be used as they will be printed and quickly out of date.

Contact Blocks

Use a “Contact Block” at the bottom of a content page to indicate who can provide additional information.  For example:

Website Contact
Ima Webmonkey – Executive Director of Making the Website Go
Phone: 506.432.4400 or 888.432.4400
webmonkey@kingswood.edu

Fonts

Fonts should not be specified within WordPress pages.  Instead, they must be defined in CSS defined by the template.

The <strong> and <em> tags may be used.

The <u> tag should not be used as it may be confused with a web link.

Font colors should not be defined within pages.

Font rules do not apply to banners or event advertising blocks.

Forms

Wufoo should be used for all online forms.

Images

Images should have no border and not link to anything unless they are a button.

In general, images within  WordPress pages should be no larger than 300 pixels in either dimension.

General images of campus life should be used where no specific images are available or applicable.  However, these images should be limited to one or two on a page.

Images of current students, faculty or staff are preferred over stock images or former students, faculty or staff.

Images must present the institution in a positive light.  A such, they should not depict any damaged property or overly inclement weather.

Links

When possible, local links should be relative to the current location.

The <a> tag should not span any more text than is necessary.

Email addresses should not be obscured by link text (e.g. myaddress@kingswood.edu not “email me here“)

Links to Forms

Links to online forms that in-line to text, should use “PDF” or “online form” in brackets between the <A HREF> tags.  PDFs should always open in a new page.  For example:

Use the super useful form (online) for doing something especially useful.  There is also a paper copy you can print (PDF).

When links to forms are not in-line, use a colon followed by “PDF” or “online form”.  When both are provided, use a pipe “|” between the two.  For example:

Super Useful Form: PDF | online

Links – External

External links should include the full URL without the protocol (http, https, or ftp).  For example:

Find the super-secret information at someone else’s site: www.google.ca

External links must not be used inside menus.

Lists

Bulleted lists should be preferred for any list where quantity or order aren’t represented by the list.  Images should not be used as bullets.  For example:

The following are colors:

    • Blue
    • Red
    • Yellow

Numbered lists should only be used when the order of list items is specific or where the list is demonstrating a quantity (e.g. the following three items must be provided:).  For example:

To add a widget to the do-dad:

    1. Click the button
    2. Drag the slider
    3. Press “OK” to save

Logos

Only the Kingswood logo approved by the communications department may be used on the website.

Menus

All on-site links should be linked in one of the following ways

  • Directly from the main menu (preferred method)
  • Directly from a parent page for larger volumes of subordinate information (to be used sparingly)

Links should not be included in more than one menu.

Links inside menus should be no deeper than 3 levels below home (e.g. Home > Academics > Programs > TESL).

When no order is needed, alphabetic order should be used.  Some menus will be ordered by importance or other means.

Number formats

Phone numbers should include an area code and be separated by periods (e.g. 506.432.4400)

Unless decimals are required, dollar amounts should be specified as whole dollars and use commas when above $9999 (e.g. $25 or $10,000).

Tables

Tables should be used sparingly for layout purposes.  They may be used to present data in a tabular form.

Tables should not include borders.

Titles and Subtitles

Titles Should be Presented in Title Case with no Punctuation

For WordPress pages, use the Page Title without duplicating it within the text.

When only a single set of sub-headings is required, use bold text for sub-headings.

When multiple levels of headings are used, use <h1>… <h5> tags.

Title should be left justified.

Wufoo Forms

Use the “Wufoo Embed Form Code” for WordPress inside a page to present a form.

Titles for Wufoo forms should be hidden in favor of the WordPress page on which it is embedded.