The University of Massachusetts Amherst

Websites

Every UMass Amherst website contributes to the user's perception of the university. When a user visits our website, they form an impression of the university and its schools, colleges, departments, programs, centers, institutes, and administrative offices. To ensure a unified web presence, official pages of the UMass Amherst web presence should be visually related to help promote usability and to reinforce UMass Amherst’s brand identity. The guidelines presented here are designed to ensure a cohesive brand for the university and to optimize university websites for organic search results.

The UMass Amherst brand is a valuable asset that is critical to the success of all the university’s websites. As such, all UMass Amherst websites and social media platforms are required to follow the UMass Amherst website brand architecture guidelines.

General guidelines are as follows:

  • All UMass Amherst-related websites must include the UMass Amherst wordmark.
  • The UMass Amherst wordmark always links back to the UMass Amherst homepage.
  • All UMass Amherst-related websites must include the official top banner.

 

This style guide applies only to official UMass Amherst pages. Official UMass Amherst pages are defined as web pages on a UMass Amherst web server that have been created by UMass Amherst, its schools, colleges, departments, programs, centers, institutes, and administrative offices. It does not apply to web pages created by individuals, such as students or faculty members.

Responsive Design

Mobile traffic accounts for more than half of all Internet traffic and search engines boost the ratings of sites that are mobile friendly. This means responsive web design is fundamental to UMass Amherst’s brand performance and success on the web. UMass Amherst-related websites have a responsive web design mindset – an approach to web design that makes web pages render well on a variety of devices, screen sizes, and viewer proximities. We encourage the design and development of great online experiences for multi-devices layout patterns such as smartphones, tablets, desktops, and laptops. This means all UMass Amherst wordmarks must be appropriate for any device format and scale to a size that is clearly legible by the user.

Top Banner

The website header is a branded strip that offers a simple way to connect all of our sites and lets users know where they are at all times. The top banner brands your page as part of UMass Amherst, links your page to the UMass Amherst home page, and provides access to the UMass Amherst calls to action and sitewide search.

In order to provide a consistent user experience across all of our university properties, the top banner should correspond to the banner found at www.umass.edu/brand. Our guidelines require that there be no changes in width, color, font size or element positioning.

Top banner design will utilize the full name of the university as a white wordmark on UMass maroon background. Calls to action links will be white.

University Communications has developed a Drupal module that can provide a drop-in replacement for your existing top banner. Contact us for details.

Desktop version:

Mobile version will substitute the short wordmark:

For the mobile version, the global menu links will appear within the site “hamburger” menu. Site-specific mobile navigation should appear lower on the screen, below any wordmark, and should not have a "hamburger" menu to avoid confusion with the global menu links. Instead, site navigation should bear the title "Menu."

Banner Requirements:

  • The top banner should correspond as closely as possible to the banner found at umass.edu/brand. Our guidelines require that there be no changes in width, color, font size or element positioning.
  • For schools, colleges, departments, programs, centers, institutes, and administrative offices, the banner is a required element on every UMass Amherst website. It is always located at the top of the page and spans 100 percent of every website’s width regardless of device or size. Top banner content will be constrained to nominal page maximum width (1200px).
  • The primary wordmark that includes the words University of Massachusetts Amherst (for desktop) or UMass Amherst (for mobile) is required within the banner and is reserved for use on sites that are within the UMass Amherst domain, meaning the site’s address ends in umass.edu.
  • The height of the banner measures 60 pixels tall. The banner has a background in the official UMass Maroon color. Text is white.
  • The wordmark is aligned with the left side of the page content, as opposed to the far-left side of the main body page.
  • The file name for the wordmark must always, and only, contain the following keywords in order to optimize search engine performance: University of Massachusetts Amherst.
  • Only University of Massachusetts Amherst/UMass Amherst appears in the bar, along with utility links. The name of the school, college, department, program, center, institute, or administrative office does not appear in the top banner, neither does any other content other than the global links.
  • The top banner must never be replaced with individual website headers when scrolling down the page. "Sticky headers" are not permitted.
  • No content of any kind may appear above this bar.
  • No links to information on the website (for example, “Admissions”) should be added to the top banner.
  • Site search functions are not allowed in the top banner, only UMass Amherst enterprise search function. Site search functions may appear elsewhere on the website.

 

Contact University Communications with any questions or assistance in implementing the UMass global branding.

Favicon Usage

UMass Amherst provides a favicon by default on all websites on the umass.edu domain. The favicon appears in the top border of your web browser to the left of the page title. See example below:

UMass Favicon example

If your site is on another domain, you will need to define the favicon in the head section of your HTML code or place the favicon in the website’s root. You can find the UMass Amherst favicon at www.umass.edu/favicon.ico.

Page Title

The page title displays in the top border of your web browser and is an additional way to identify your site.  It also helps with search optimization to make the site identifiable in search results. 

Title tags must exist on every page. Title tags should contain the unit name, department, or program followed by "UMass Amherst." The following format is mandated for reasons of accessibility:

Page Title : Site Name : UMass Amherst

See example below:

UMass Page Title example

Outside of the page title, you may include other relevant keywords important for your specific department. Keep in mind, however, that Google search results will only display up to about 66 characters. It is recommended to adhere to meta keyword tags only.

Standard Footer

The page footer shows site ownership, both as part of UMass Amherst and within the specific entity within the university.

All UMass Amherst websites must have the official UMass Amherst footer, which includes the long form version of the UMass wordmark, the copyright year and links to University of Massachusetts Amherst, Site Policies, and Accessibility information.

The required link format is: ©YYYY University of Massachusetts Amherst • Site Policies • Accessibility

Footer Requirements: 

  • The long form version of the UMass wordmark and "University of Massachusetts Amherst" must link to https://www.umass.edu.
  • "Site Policies" must link to https://www.umass.edu/site-policies.
  • "Accessibility" must link to https://www.umass.edu/diversity/our-commitment-accessibility.

 

No other graphics or text should be included in the footer. This includes wordmarks other than the long form version of the UMass wordmark or text crediting site designers or hosts.

 

Standard Footer in web context:

Desktop version:

UMass standard desktop footer

Mobile version

UMass standard mobile footer