Standards and Best Practices for UNH Websites

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. For more information about UNH on the web go to "About this Site."

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: http://www.unh.edu/about/ada.html

Branding

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 COLSA site and the CHHS site. For those few sites continuing to use traditional HTML programming, a new toolkit has been made available with complementary styles for the new UNH home page.

All UNH sites must meet the masthead specifications listed below.

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 masthead specifications listed below.

The University logo and wordmark must be featured prominently in the upper left portion of the masthead in white as shown above. The masthead must be the prominent feature at the top of the page extending across the balance of the content area. The sub-entity name should appear in Myriad Bold or Verdana type below the wordmark. The type size of the sub-entity name is not to exceed 30 pixels in height (may be smaller). Acceptable colors for the masthead are blue (#002c77) with white (#ffffff) lettering.

No additional logos or graphic elements are allowed within the masthead.

This page is an example of the correct masthead and navigation bar specifications. Exceptions are not allowed. Please contact us with any questions.

Navigation Bar Specifications

The primary site navigation will be a horizontal display below the masthead. The preferred color for this bar is gray with a slight gradient. Sites may or may not have both a side navigation or a top navigation.

Variations

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

Color

UNH Blue

Official University Blue is based off the Pantone 288 palette, which converts to hexadecimal value: #002c77, or RGB value: 0 37 102. The original web-safe version of University blue (#000066) has been retired due to no longer needing to cater to web-safe standards.

Provided the hue is maintained, blue tones with varying brightness and/or saturation may be used with discretion. Listed below are some examples of UNH blue variant tones:

002c77 (masthead)

002566 (masthead)

0f316c

011942

306395

2a4474

Provided are some suggestions for color tones to complement UNH blue. While they are defined within web-safe palettes, their hues may be adjusted according to need.

Complementary Tones

May be used to enhance elements below the masthead and horizontal nav bar.

600f00

b3401a

d68300

edb600

a7be1a

0d9481

5b77a4

c45ea4

5e3763

cccccc

999999

333333

Logos

Masthead logos are not appropriate for print and should not be used. Appropriate logos for print usage are available here: www.unh.edu/creative/graphicid/downloads.html

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.

Fonts

The UNH font families are Arial and Verdana for body text; Georgia is used for headlines. Myriad Pro may be used provided the font is safely and properly embedded or derived via a third-party web-font resource such as Typekit. Other fonts may be used, but the UNH family of fonts should be set as the default. Use of these fonts supports a unified look and feel across the University's online communications.

Type Size

The University recommends the use of the scalable em unit for font sizes wherever possible. When used with fonts on the web, an em unit is used to measure fonts in relation to the specified browser font size.

Font sizes will be proportional to the specified font in a browser's preferences, which is controlled by the user and is adjustable by the user. For example, 1 em is 100 percent of the specified font. This will account for sight-impaired users who need to set their font sizes larger than most.

Type Color

Be sure to use type colors that are easy to read. Darker colors for body text on a white background is the easiest to read. UNH prefers black text on white for body text. Do not use colors that traditionally indicate links for body test. Do not highlight, underline or bold non-link words within your body text as that may indicate a link to a user.

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. UNH Photographic Services is an inexpensive resource for high-quality UNH images. Resource Space is a searching tool that allows you to browse through UNH Photo Services images.

UNH Video Production Services offers high quality video production at a reasonable cost.

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

Please view our array of downloadable icons for UNH social media channels including Facebook, Twitter, Google+, LinkedIn, Foursquare, YouTube and Vimeo.

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

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. For example, this page is called "Best Practices for Website Design" and not "New and Emerging Media."

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 and links must have well written ALT tags. ALT tags should be descriptive of the content of the image or, in the case of links, descriptive of where the link is going but not the link URL itself. For example, and image of a head shot 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. An ALT tag for a link could be "go to more information."

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

Site Map

An accurate site map should be available.

 

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