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



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 e-mail

 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 Document (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 policy manual to learn more. o NO: Click here 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 Admissions

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