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.
Link to the UNH ADA disclaimer here: http://www.unh.edu/about/ada.html
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.
Exceptions to this rule are occasionally allowed. Pleasc contact the webmaster.
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.
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.
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 below the wordmark. Font specifications outlined below. 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.
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/unhedutop/images/favicon.ico" type="image/x-icon" />
There are no variations for the logo and wordmark. They must not be stretched, shortened, or otherwise altered in any way. Color variations are acceptable to a certain degree, and are outlined below.
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 version of University blue (#000066) has been retired as it reflected web-safe standards for older monitors.
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 (official / masthead)
002566 (official / masthead)
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.
May be used to enhance elements below the masthead and horizontal nav bar.
UNH is currently in the process of rebranding. There will be new graphics available for use in late fall of 2013.
Current masthead logos are not appropriate for print and should not be used. Appropriate logos for print usage only 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.
The UNH web-safe font families are Verdana and Arial for body text, Georgia is used for headlines. The use of Google Fonts 'Droid Sans' and 'Droid Serif' for body text and headlines, respectively, has been approved - contact us for more information regarding their usage. Use of these fonts supports a unified look and feel across the University's online communications.
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.
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.
The latest version of the Powerpoint .ppt template can be downloaded here.
All UNH websites must link to the USNH Privacy Statement. The footer is an approptiate place to place this link.
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 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
Your site should only have original content. Do not duplicate information that is present on other sites.
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."
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.
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.
An accurate site map should be available.
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