University of Hawaii at Hilo

University of Hawaiʻi at Hilo Website Style Guide

Updated August 7, 2017.

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.

I. 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.

II. Accessibility

All UH Hilo sites 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. While not accurate, the Section 508 Standards may sometimes be referred to as A.D.A. (Americans with Disabilities Act) for websites.

Some of the guidelines and standards for accessibility are highlighted below as they are particularly noteworthy.

A. Images

1194.22 (a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content). (See also WCAG2 1.1.1.)

All non-text content must have a text equivalent.

Pictures and photos must have alt="...", hereinafter referred to as alt text, which roughly and briefly describes the image as one would to someone over the phone.

If the image is purely decorative, blank alt text, alt="", must be included along with aria-hidden="true" and role="presentation".

B. Audio/Video

1194.22 (b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. (See also WCAG2 1.2.1-1.2.9.)

Videos and live audio must either have synchronized captions. The captions must match the actual content and not the script as performances often vary from scripts.

C. Color

1194.22 (c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. (See also WCAG2 1.4.1.)

Information cannot be conveyed solely with color. For example, instead of saying “required fields are red,” use, “required fields are indicated with a red (required).” People who cannot see the red color can still see the “(required)” marker.

Text must also have a minimum contrast ratio with its background. There are many online tools available, such as Lea Verou’s Contrast Ratio calculator, which determine ratios and indicates if they meet accessibility guidelines.

D. Navigation

1194.22 (o) A method shall be provided that permits users to skip repetitive navigation links. (See also WCAG2 2.4.1.)

Add an in-page anchor before or as the first element of repetitive links such as header and sidebar navigation such as a “jump to content” link. See this technique for building skip navigation links.

III. 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.

IV. 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.

V. Pattern Library

A. Website Colors

Color Description
#d52b1e UH Hilo Red, PMS 485C
#c10202 Alternative UH Hilo Red
#660011 Dark Red
#e3dcca Tan
#fbfaf7 Light tan/alternate tan
#f0eee4 Light tan for element borders
#faf9f5 Light tan for element backgrounds
#f0f8ff Alice blue for alternating table rows
#ffff99 Pale canary yellow for highlighted table rows
#6cbff0 Blue element borders
#e4f3fc Light blue for element backgrounds

1. Notification Colors

Color Description
#ffc237 .notice border
#ffeaa8 .notice background
#418acc .notice.info border
#d0e4f4 .notice.info background
#eb5339 .notice.error border
#fccac2 .notice.error background
#99c600 .notice.success border
#efffb9 .notice.success background

B. Website Templates

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