Web Standards and Visual Identity Guidelines

The UNH website is complex. Visitors know they are at an official University of New Hampshire site when the school, college, department, or organization's information appears below its UNH-approved masthead. Learn more about UNH on the web.

Americans With Disability Compliance

The university, (along with UNH-System), endorses the guidelines of the World Wide Web Consortium (W3C) as the standard for World Wide Web accessibility and compliance with the Americans with Disabilities Act. W3C is composed of over 400 member organizations worldwide (public and private) developing common protocols to promote the evolution of the World Wide Web and ensure its inter-operability. As part of its work, the W3C has developed accessibility guidelines for World Wide Web sites and pages. The standards of the Federal Rehabilitation Act (Section 508) are consistent with the W3C Guidelines and provide achievable, well-documented guidelines for implementation. Report violations.

ADA Best Practices Tool Kit for State and Local Governments

Link to the UNH ADA disclaimer here: www.unh.edu/main/americans-disabilities-act

Branding

Domains

Named colleges and schools at UNH are permitted to use the domain name COLLEGENAME.unh.edu. An example is paulcollege.unh.edu

Unnamed colleges and schools are to use the domain name ACRONYMFORCOLLEGE.unh.edu. An example is ceps.unh.edu

Other units at UNH should use the domain structure unh.edu/NAME. The name should have meaning to the user. Acronyms are not recommended for this type of domain name unless the acronym is universally recognized. An example of this is unh.edu/hr or unh.edu/research.

Drupal Templates

UNH now uses Drupal, an open source content management system, for its top-level pages. Drupal is available for UNH sites via Web Solutions. There are several themes available using Drupal similar to the Marine, COLA and Campus Rec websites. For those few sites continuing to use traditional HTML programming, a toolkit will soon be made available for public use.

Homepage

Content for your homepage should be informative, well written, lively and meaningful. Try to maintain a balance of professional looking visuals with appropriate text. Welcome messages should be brief if included at all. Long-winded welcome letters are not appropriate on the web. Keep in mind who your audience is and why they are visiting your site.

Masthead Specifications

All UNH sites must meet the current masthead specifications. Secondary logos, departmental identities, and/or graphic identities unrelated to UNH are not allowed within the masthead.

Navigation Bar Specifications

The primary site navigation should feature a horizontal display below the masthead.

Footer

In addition to standard footer information, UNH websites must contain the following line:

TTY Users: dial 7-1-1 or 1-800-735-2964 (Relay N.H.)

This is in accordance with the Americans with Disabilities Act, which requires that where public entities, such as  the UNH, communicate by telephone with applicants and beneficiaries, text telephones (TTY), or equally effective telecommunications systems, shall be used to communicate with individuals who are deaf or hard of hearing or who have speech impairments.
 
An equally effective alternative to having a TTY in UNH offices is to make use of the Telecommunications Relay Service (TRS) that is available in all 50 states, the District of Columbia, Puerto Rico and the U.S. territories for local and/or long distance calls. Relay calls are free and ensure real-time communication by telephone for people with hearing and speech disabilities. Learn more (pdf)

 

Favicon

A favicon (short for "favorite icon") is also known as shortcut icon, which is a small image (16px x 16px, .ico file) used to represent a site. Depending upon the browser used, the image may appear in any of the following places: browser tabs, browsing history, bookmarks, or browser address bar.

To include the UNH favicon, the following meta tag must be inserted into the head code:

<link rel="shortcut icon" href="http://www.unh.edu/favicon.ico" type="image/x-icon" />

Variations

There are no variations for the logo and wordmark. They must not be stretched, shortened, or otherwise altered in any way.

Color

UNH Blue

Official University Blue is based off the Pantone 287 palette, which converts to hexadecimal value: #003591, or RGB value: 0 53 145.

003591

Accent Colors

Complementary palette tones for use as accent colors are listed within the visual identity guidelines.

f77a05

263645

a3a9ac

d7d1c4

ffffff

000000

 

Digital Assets

Logos

Use of the UNH institutional wordmark and corresponding visual identity guidelines can be found at unh.edu/logo.

The use of the University seal is reserved for the UNH President's office and may not appear on any webpage without the permission of the President's office.

The UNH family of athletic logos are reserved for use by UNH athletics.

Photography and Video on the Web

The Web is a highly visual medium in which text and images work together to attract and hold viewers' attention. Scanners and digital cameras have made it easy to upload images to websites. Photographs must be vivid and of high quality. Today, technology has also made posting of video relatively simple. As with photography, any video clips should be of the highest quality.Resource Space is a searching tool that allows you to browse through UNH Photo Services images.

Images shot with cell phone cameras or other amateur images are best used in social media venues such as Facebook, Twitter and blogs. Spontaneity can be more important than quality in these venues.

Social Media Icons

To find the correct UNH social media channel, visit the Social Media Index.

Powerpoint Template

Powerpoint .ppt templates can be found in the 'downloads' section of the UNH logo page: unh.edu/logo.

Regulatory Compliance

Privacy Policy

All UNH websites must link to the USNH Privacy Statement. The footer is an approptiate place to place this link.

Navigation Standards

Links

UNH home, college home, map, calendar, search and directories are all appropriate links for the UNH masthead.

Links within the horizontal or vertical navigation bars should be used exclusively for navigation within your website. External links should exist within the content of the site.

External links should open in a new window. Internal links should open in the same window.

Keep Your Pages Current

Owners/administrators of websites hosted on the UNH server and those affiliated with the University of New Hampshire and hosted elsewhere are responsible for keeping their pages updated and accurate. Websites must be reviewed by the owner or administrator every six months to ensure the accuracy and relevance of the content displayed. Out of date pages must be deleted or archived. Websites that have not been updated within 18 months will be archived. These sites will not be searchable.

Advertising

Advertising from groups not affiliated with the university is not allowed on UNH web pages without the permission of Editorial and Creative Services. Sponsorships are allowed. Paid advertising is not permitted. Outside links within the footer are not allowed.

Search Engine Optimization

Content

Your site should only have original content. Do not duplicate information that is present on other sites.

Titles

Your webpage title is the most important clue for search engines to locate your page. Be sure that the title accurately reflects what is on the page.

Headlines (H1)

The second most important clue for search engines are headlines. There should only be one headline on a page that is coded with H1 tags. Be sure that the headline accurately reflects the content of the page. Avoid clever language that to a search engine would be meaningless. Clear and simple are always the best approach.

Meta Tags

Keywords and descriptions can be added to the head section of your pages to increase their searchability. They should be relevent to the page content.

Other types of keywords related to social media sharing or mobile sites can also be added.

Alternate Text for Images and Links

All images must have well written alt tags. Alt tags should be brief descriptions of the content of the image or descriptive of where the link is going. For example, an image of a headshot could be the person's name but doesn't need to include a descriptor of that they are wearing unless it is relevant to the article.

ADA compliance mandates the use of alt tags. Tags also increase searchability.

Technical Compliance

Drupal

UNH Web Solutions maintains the UNH implementation of Drupal. Wherever possible, UNH websites should be built in Drupal in collaboration with UNH Web Solutions.

There are many advantages to being part of the UNH Drupal community:

  • Easy updates toWeb content by non-technical staff
  • Enhanced ADA compliance
  • Universal style changes are easily made
  • Uniform UNH look and feel
  • Drupal Training by UNH Staff
  • No software updates, all maintainance updates are done by Web Solutions