UMKC Website Style Guide
UMKC Website Style Guide
Abbreviations and Acronyms ................................................................................................. 2
Ampersands .......................................................................................................................... 2
Breadcrumbs ......................................................................................................................... 2
Bullets ................................................................................................................................... 2
Calendar................................................................................................................................ 2
Contact information .............................................................................................................. 2
CSS ........................................................................................................................................ 2
Documents ............................................................................................................................ 2
Headings ............................................................................................................................... 3
Images .................................................................................................................................. 3
Links...................................................................................................................................... 3
Meta tags .............................................................................................................................. 3
Naming Files .......................................................................................................................... 3
Navigation............................................................................................................................. 4
News ..................................................................................................................................... 4
Pages .................................................................................................................................... 4
Page title ............................................................................................................................... 5
Readability ............................................................................................................................ 5
Resources .............................................................................................................................. 5
Search ................................................................................................................................... 5
Special Characters ................................................................................................................. 5
Styles .................................................................................................................................... 5
Titles ..................................................................................................................................... 5
Validation ............................................................................................................................. 6
1
UMKC Website Style Guide
Abbreviations and Acronyms
The first instance on a page should be spelled out with abbreviation in parentheses afterward. Every
other instance on the page should use the acronym.
o
School of Computing and Engineering (SCE)
Ampersands
All ampersands should be spelled out as “and.”
Breadcrumbs
This secondary navigation item is necessary if there are any pages on the site that are more than one
click from the home page. They should appear at the top of the content section of the page and list every
page between the home page and the current page.
o
Home : Section name : Page name
Bullets
All bullets should be formatted as unordered lists (ul) and numbered lists should be formatted as ordered
lists (ol). Do not manually enter bullet characters.
Calendar

Request a sub-calendar from the UMKC calendar page: http://www.umkc.edu/calendar/contactus.cfm

Place a calendar feed on home page of site after choosing a spud from the Trumba example
page: http://university.trumba.com/online_calendars/promo_spuds.aspx

Create a page on the site in the Our School/Department/Office/etc. section for the full calendar.
Contact information
In addition to a Contact us page, contact information specific to a section of the site should be placed in
the Resources column on applicable pages. All Contact information should appear in the following format:
Name, Degree
Title
Address
Phone: 816-235-xxxx
Fax: 816-235-xxxx
E-mail [this word will be hyperlinked to the e-mail address]
CSS
See Styles.
Documents

All documents should be saved in a folder labeled “documents.”
2
UMKC Website Style Guide

Documents should be converted to PDF where possible.

If there are more than twenty forms and documents on the site available for download, consider
adding a Forms/Documents/Resources Index page.
Headings
Each page should only have one h1 tag.
Images
Alternate ID (Alt. ID), height and width attributes must be defined for every image. Do not scale images in
Dreamweaver or Sharepoint Designer.
o
<img src="image.jpg" width="100" height="100" alt="Students at orientation">
Links
When creating links, the following rules should be followed:
 E-mail: To lessen the risk of spam, use the word “e-mail” as the link text instead of spelling out the
address. Subject lines can also be customized for e-mail links to help with workflow.
o <a href=”mailto:address@umkc.edu?subject=Note from website”>e-mail</a>
 Documents: Documents should be converted to PDF format wherever possible, and links to the
documents should always open in a new window. If the link appears in the Resources column or in a
list of links, include “(PDF)” after the text of the link.
o <a href=”document.pdf” target=”_blank”>Document</a> (PDF)
 Language: To improve search engine optimization and usability, avoid creating links with the words
“click here” as the hyperlink. The link text should describe where the hyperlink will take them.
o YES: Read the <a href=”policy.asp”>policy manual</a> to learn more.
o NO: <a href=”policy.asp”>Click here</a> to read the policy manual.
 External links: Any links to pages outside of the website, even pages on other UMKC websites,
should open in a new window.
o <a href=”http://www.umkc.edu/admissions/” target=”_blank”>Admissions</a>
Meta tags
Both keywords and description should be customized to match page content.
Keywords can be phrases and are separated by a comma. Fifteen to twenty keywords is a good number
for each page. These should include common misspellings of content words.
Description should be written in sentence format. Search engines will often display part of this in their
results.
Naming Files

Name files with no spaces. Dashes and underscores are okay.

File names should be lowercase.

Avoid abbreviations unless the file name is more than 5 words.
3
UMKC Website Style Guide
Navigation
When creating links, the following rules should be followed (see Figure A.):

First item is a link to the parent site home page.
o
For the Ucomm website, the top item is a link to the Provost’s website.

Second item is a link to the site home page.

Third item is a link to a section of the site called Our School/Department/Office/etc.

Last item is a link to a Contact Us page.

Capitalize the first letter of each word.

The top level of every rollover menu should link to a page that lists all rollover options.
If a section of the navigation needs a rollover menu that would go two levels deep, then that section can
be expanded and listed under a heading.
o
Cashiers and Collections Home [top level navigation item]
Tuition and Fees [heading]
--------------------------------------------Fee Estimator [navigation item]
Tuition and Fee Rates [root of rollover menu]
> Undergraduate [rollover menu item]
> Graduate [rollover menu item]
Tuition Payment Information [root of rollover menu]
> Financial Responsibility [rollover menu item]
--------------------------------------------Discounts and Assistance [top level navigation item]
News

If the site will have frequently updated news items that need to be archived and tagged, create a
Wordpress site on info.umkc.edu: http://www.umkc.edu/ia/its/infodot/

Create an RSS feed for home page using Feed Informer. Login information is available on the
server.
Pages
Parent site home


Our School/Department/Office/etc.
section should include About Us,
any information about mission or
vision, welcome messages, the full
site Calendar and a People page
that includes all faculty and staff.
Contact Us page should include
general contact information, key
contacts for departments or
subgroups, a link to the UMKC maps
page or an embedded google map.
See Figure A. for suggested page order In
navigation.
Figure A.
Department home
Our Department (Office)
About Us
Page1
People
Page2
Calendar
Contact Us
4
UMKC Website Style Guide
Page title
Every page needs a customized page title. The title appears at the top of the browser window and will be
used for saving the page as a bookmark. The page title should follow a similar logic as the breadcrumbs
except that it works in reverse, most specific information to most general.
o
Page name : Section name : Website name : University of Missouri-Kansas City
If the title gets to be too long, the Website name can be combined with University of Missouri-Kansas City
to be UMKC School of Nursing, for example.
Readability

Consider shortening or breaking up paragraphs longer than four sentences. In some cases, these
paragraphs might work better as bullet points.

Use accordions, tabs and dialog popups to minimize page length and eliminate the need for extra
pages.
Resources

Any important links to forms, documents or external sites from body of page should appear in the
Resources column. Additional links to external sites and forms can also appear here.

The information in the resources column should appear in the following order:
Resources, Contact information, Additional information
Search
If a site has more than twenty pages, you might considering adding a custom search that searches within
the site. This can be set up using the Google custom search engine tool. Login information is on the
server.
Special Characters
All special characters (e.g. curly quotes and apostrophes) and punctuation (expect for commas and
periods) need to be embedded. Codes can be found on this website: http://leftlogic.com/projects/entitylookup/
Styles

Do not use inline styles or within the header. All styles should be organized within an external CSS
file located in a folder labeled CSS.

When the site is ready to publish, all unused styles should be removed from the file.

List site colors in comment format at the top of CSS file.
Titles
At the beginning of the progress, a decision should be made with the client regarding the format of titles
so that they can be treated consistently throughout the site.

Dr. Jane Doe
OR
5
UMKC Website Style Guide

Jane Doe, Ph.D.
Validation
Validate all pages through validator.w3.org and fix errors.
6