University of Hawaii at Hilo

University of Hawaiʻi at Hilo Website Style Guide

Updated September 25, 2019.

The key words "must", "must not", "required", "shall", "shall not", "should", "should not", "recommended", "may", and "optional" in this document are to be interpreted as described in RFC 2119.

Contents:

I. Policies and Statements

University-wide polices and practices for the use of all University of Hawaiʻi website resources are intended to define and provide protection, access and guidelines to supplement existing laws and regulations. View the full Executive Policy, EP 2.210, Use and Management of Information Technology Resources.

A. Privacy, Usage, and Disclaimer Policies

Websites which do not publish their own disclaimers may link or refer to the UH Hilo Website Privacy, Usage, and Disclaimer Policies.

B. EEO/AA Policy Statement

Websites should indicate that UH Hilo is an Equal Employment Opportunity/Affirmative Action institution. The following statement with link to the UH Hilo EEO/AA website is recommended.

UH Hilo is an Equal Employment Opportunity/Affirmative Action Institution.

II. Institutional Branding

Official academic departments, divisions, and schools, and core university functional units must have a look consistent with the main UH Hilo website. Visitors should be able to instantly tell, when landing on any page within the website, that they are on a UH Hilo property.

Website designs shall have a significant red presence in the header with a UH Hilo logo hyperlinked to the UH Hilo homepage (hilo.hawaii.edu) in a consistent position, above the fold, across all of the site’s pages.

See the Pattern Library below for specific colors used.

This requirement may be relaxed for affiliate and grant programs.

UH units and affiliated units must include a link to the UH Hilo home page (https://hilo.hawaii.edu/) in their site template as either a linked UH Hilo logo or text.

A. Institution Name

The University shall be referred to with one of the following names:

Improper names include “UH-Hilo,” “UHH,” and “University of Hawaii-Hilo” and shall not be used.

B. Logos

There are only two official logo groups for UH Hilo: the seal with wordmark set and the Vulcan Athletics set.

See the UH System Graphics Standards for the seal logo downloads and usage requirements.

Contact the Vulcan Athletics Sports Information Director for logos and usage of the Vulcan Athletics logos.

Images, including logos, must have appropriate alt text (alt="University of Hawaii at Hilo"). The word “logo” shall not be used in a logo’s alt text. E.g., alt="University of Hawaii at Hilo Vulcan Athletics" is the proper alt text for the Vulcans logo, not alt="Vulcans logo".

Logos may only be scaled proportionally. Logos may not be cropped, truncated, stylized, or otherwise distorted unless being used purely as a design element and after other branding requirements are met.

C. Secondary Marks

As stated in the UH System Graphics Standards,

Individual unit logos are not allowed. Although the drive to “have our own identity” is pervasive, proliferation of such marks dilutes the university’s integrity and creates confusion on the part of the public.

This doesn’t mean everything has to look alike. Schools, colleges, departments and programs may develop design themes and elements, including use of color and graphic images, to provide continuity to their print and electronic communication. Media Production, ur@hawaii.edu or (808) 956-8856, can assist units in developing and implementing appropriate design elements in conjunction with the official seal and/or signature.

This means that the UH Hilo logo should be the primary identifying mark on each website. Secondary graphic elements can supplement the design and should not replace or overshadow the UH Hilo logo.

D. Language

See the UH System Style Guide for a complete list, but here are a few highlights and additions.

Correct Incorrect
email e-mail; eMail
Hawaiian Hawaiʻian
hilo.hawaii.edu www.hilo.hawaii.edu, www.uhh.hawaii.edu
home page homepage
login (as a noun) log in
log in (as a verb) login
log out (as a verb) logout
Maunakea Mauna Kea
Maunaloa Mauna Loa
sign up (as a verb) sign-up; signup
UH Hilo UHH; UH-Hilo
University of Hawaiʻi at Hilo University of Hawaiʻi-Hilo; University of Hawaiʻi, Hilo
Web page webpage
website web site

Normal text shall not be presented in all caps except abbreviations and when appropriately honoring brand names.

1. Hawaiian Language

Use of proper diacritical marks and letters for Hawaiian words is strongly recommended, particularly in graphic elements. It is recognized that not all technology, such as screen readers, are compatible with extended unicode characters, often the ʻokina, so alternatives may be used or diacritics dropped when greater compatibility is warranted.

While UTF-8 encoding should be used along with using the actual UTF-8 encoded characters or HTML entities, alternatives may be used.

Character HTML Entity Alternatives
Ā Ā Ā A
ā ā ā a
Ē Ē Ē E
ē ē ē e
Ī Ī Ī I
ī ī ī i
Ō Ō Ō O
ō ō ō o
Ū Ū Ū U
ū ū ū u
ʻ ʻ ʻ ‘ but avoid tick ' and backtick `

jquery.komohua is an optional jQuery plugin which will add buttons allowing users to inject these characters into an input field or textarea tag. See the jquery.komohua demo.

2. Website URLs

Website URLs should not be used at the link text unless explicitly stating the URL. Link text should instead contain the context of the link so the visitor knows what the link leads to without the surrounding text. This is particularly helpful for people using accessibility technologies. Also, when read aloud, such as by screen readers, URLs are very difficult to understand.

Do: Visit UH Hilo for more information.
Do not: Visit UH Hilo at https://hilo.hawaii.edu/ for more information.

The correct full URL for UH Hilo is https://hilo.hawaii.edu/. The old URL, http://www.uhh.hawaii.edu/ shall not be used, nor shall http://www.hilo.hawaii.edu/ be used, but the URL may be shortened to just hilo.hawaii.edu for legibility.

III. Accessibility

All UH Hilo content must adhere to the requirements set forth in Section 508 of the Rehabilitation Act. You may refer to this helpful WebAIM Section 508 Checklist. Note that on January 18, 2017, Section 508 adopted the WCAG 2.0 levels A and AA standards, henceforth referred to as WCAG2. The Section 508 Standards may sometimes be referred to as A.D.A. (Americans with Disabilities Act) for websites, but this is technically inaccurate.

See Meeting Accessibility Requirements for Web Pages for details on why and how to meet the required standards.

Some of the most common compliance issues are highlighted below.

IV. Web Technologies

A. Structure

Pages should use the HTML5 Doctype and UTF-8 encoding.

Styling shall be done with CSS and pages should be responsive (natively supported by multiple screen widths).

B. HTML Tags

1. Heading Tags

Pages shall be coded using proper HTML hierarchy (H1-H6). In most cases, the content of the first H1 should be the same as the content of the page <title>.

Headings should not end with a colon :.

2. The <i> Tag

In accordance to the HTML5 specification, the i tag should be used in the following cases.

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.

For example, when including non-English words or phrases in an English sentence, use the i tag.

Welcome to our ʻohana (family).

3. Images

Images should be optimized using the following methods and formats where applicable.

Some recommended opitmization tools are:

C. WAI-ARIA

Pages shall be coded with WAI-ARIA landmark roles roles when semantic HTML5 tags with built-in landmarks are not used.

D. Toggled Menus

Studies show that utilizing icon-only menu triggers such as the hamburger button decrease usability and engagement and should be avoided; or, at the very least, include the word “Menu” on or next to it.

V. Pattern Library

A. Website Colors

Use the contrasting color as the background or text color for the highest contrast ratio, as required for WCAG 2 standards.

Color Description Contrasting Color
#d52b1e UH Hilo Red, PMS 485C white (5:1)
#b60101 Alternative UH Hilo Red white (7:1)
#660011 Dark Red white (13:1)
#373737 Dark gray for backgrounds white (12:1)
#e3dcca Tan black (15:1)
#fbfaf7 Light tan/alternate tan black (20:1)
#f0eee4 Light tan for element borders black (18:1)
#faf9f5 Light tan for element backgrounds black (20:1)
#f0f8ff Alice blue for alternating table rows black (19:1)
#ffff99 Pale canary yellow for highlighted table rows black (20:1)
#6cbff0 Blue element borders black (10:1)
#e4f3fc Light blue for element backgrounds black (18:1)

1. Notification Colors

Color Description Contrasting Color
#cccccc .notice background black (13:1)
#000000 .notice border white (21:1)
#dbf5f9 .notice.info background black (18:1)
#1ca4b9 .notice.info border black (7:1)
#f6d8db .notice.error background black (15:1)
#a72834 .notice.error border white (7:1)
#e4f7e8 .notice.success background black (18:1)
#31ab4c .notice.success border black (7:1)
#fff4d3 .notice.warning background black (19:1)
#ffc107 .notice.warning border black (12:1)

B. Website Templates

Several website templates are available for use. Please contact the UH Hilo Web Office for more information.