University of Minnesota
University Relations
Our Brand: How to Convey It
http://www.umn.edu/brand

Our Brand: How to Convey It.

 


Web Templates

Responsive (mobile) header and footer requirements

The responsive (mobile) header and footer have been developed for units to use when building fixed-width mobile or responsive websites.

Responsive header

The responsive header has been coded to display in three different ways, depending on the size of the device being used.

On screen sizes above 660 pixels, the responsive header includes the same features as the standard web header; the block M, wordmark and Driven to Discover combination, search, myU and One Stop buttons, and the campus links.

Example of full-sized header and footer. Click on the image for a larger version.

responsive header and footer.

 

For screens between 520 and 660 pixels, all the header elements remain, but the search field becomes smaller to accommodate multiple screen sizes and still display all header elements.

Example of mid-sized header and footer. Click on the image for a larger version.

Responsive header and footer at mid-size.

 

For screen sizes below 520 pixels, the size of the block M, wordmark, and Driven to Discover have been reduced to the smallest size allowable by University logo standards. The campus links and the buttons for One Stop and myU have been removed.

See examples below.

Search

There are two options for search when the screen size is below 520 pixels. You may use whichever option works best for your site.

Option one—For this option, the header includes a search button that, when activated, displays a search field below the header. In this option, the search button moves down next to the search field and a “Cancel” button replaces the search button in the header.

phone-sized reponsive header and footer. Phone-sized header and footer.

When the screen size is slightly larger and the search button has been activated, the cancel button appears next to the search button.

Responsive header and footer with cancel by search.

 

Option two—This option removes the search button from the header and has a search field and search button always open below the header. (This option was favored by mobile focus groups.)

Responsive footer

On screen sizes above 660 pixels, the responsive footer includes the same features as the standard web footer; the regents copyright, equal opportunity statement, last modified date, and campus-specific links to things like maps, parking, and directories (links vary based on campus).

For screen sizes below 660 pixels, the campus-specific links have been removed. The footer requires a shortened copyright and equal opportunity statement, and a link to the University’s privacy policy. A modified date is not required.

See examples above.

Link recommendations

University units should decide when and how to offer links that have been removed from the small screen versions of the header and footer. For example, units that have a lot of student traffic may want to continue to provide links to One Stop or myU. It’s up to the individual unit as to where these links may best fit with their mobile site design.

A secondary footer is the recommended location for these links.

Graphics

Use the graphics included with the template downloads. Never alter the graphics or change the color of the block M, wordmark, Driven to Discover, or background. Never create alternative versions of the template header.

Required—Do not alter the graphics or change the color of the block M, wordmark, Driven to Discover, or background.

Download and Branding Requirements

Downloads for the mobile header and footer graphics and code are available on the Web Templates download page and through the University’s GitHub.

 

download Responsive Header and Footer

Includes HTML, CSS, images for a responsive web header and footer and usage instructions.

Go to download.