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.
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.
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.
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.
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.
When the screen size is slightly larger and the search button has been activated, the cancel button appears next to the search button.
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.)
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).
See examples above.
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.
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.