Sample code is provided if you need a starting point. HTML code need not be the same in each website but the visual rendering of the footer should look the same in every website. Your code's visual end result should comply with the Standard Footer specifications.
Link MSU wordmark graphic to http://msu.edu.
Links in line 1 should appear in the sequence indicated and with the indicated link text: Contact Information, Site Map, Privacy Statement, Site Accessibility.
Omit site map link if desired as long as the web user has at least two ways in which to navigate to every page in the website. This is covered in WCAG 2.0 Guideline 2.4.5 Multiple Ways. For more information, see the W3C WCAG 2.0 techniques for providing a site map at https://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS-20071218/G63.html.
Do not combine with any other marks, graphic elements, or words.
7.2 Footer Elements
7.2.1 MSU Wordmark Graphic
The MSU Wordmark graphic is 221 x 47 pixels and is a hyperlink to the MSU website home page. The Wordmark is available in black, white, and MSU Green. It can be downloaded from the MSU Brand website Logos page.
7.2.2 Website Information
Your website information area in the Standard Footer should include:
Call us: (517) XXX-XXXX: the telephone number associated with your office or college. Including this element is recommended but not required. Note: Replace "XXX-XXXX" with an actual telephone number.
Contact Information: hyperlink this text to a page in your website that provides street address, phone and fax numbers, and e-mail address contact information for your website.
Site Map: hyperlink this text to a page in your website that provides an outline structure of every section in your website. In order to be accessible, a site map has certain requirements. For example, every page in the site map must have a link to the site map, and every page can be reached by following a set of links that start at the site map. Site map may be omitted if desired as long as the web user has at least two ways in which to navigate to every page in the website. This is covered in WCAG 2.0 Guideline 2.4.5 Multiple Ways. For more information, see the W3C WCAG 2.0 techniques for providing a site map at https://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS-20071218/G63.html.
Site Accessibility: hyperlink this text to a page in your website that describes and documents the functionality and standards your website uses to provide people with disabilities access to information and services.
7.2.3 Horizontal Rule
The website information and MSU information areas are separated using a 1-pixel, dotted rule (#999999) equal to the width of the website information element.
7.2.4 MSU Information
The MSU information area should include:
MSU Telephone Number: University operator’s phone number
Visit msu.edu: hyperlink to the MSU website home page
Equal-opportunity employer statement
Notice of Nondiscrimination: link to the Office of Institutional Equity (OIE) website, link destination is http://oie.msu.edu
7.2.5 Typography and Color
Font size is specified here in both absolute and relative measurements. Pixels are an absolute size where 1px = 1/96th of an inch. Rems are relative to the root (html) element font size. CSS best practice is to provide both units so that browsers that do not support rem will use the fallback pixel property value.
For example, assuming that a browser's default font size is 16px:
1 rem = 16 px | 0.875 rem = 14 px | 0.75 rem = 12 px | 0.625 rem = 10 px | 0.5625 rem = 9 px | 0.5 rem = 8 px | etc.
IMPORTANT: Colors shown here have been tested for accessibility-compliant color contrast. However, because your website's text and background colors may differ from the colors shown and especially if using a dark background, you should test your website colors for acceptable contrast ratio. This can be done by using an online contrast ratio tool or by manually calculating the contrast ratio yourself. Ideally, the color contrast ratio in your content is 4.5:1 (AA compliance) or higher. Adjust the foreground or background colors as needed until color contrast is acceptable.
Light background footers use CSS class "light-background" to set link colors (dark colors and a specific green for light backgrounds) and a green MSU wordmark image.
Dark background footers use CSS class "dark-background" to set link colors (white and a specific green for dark backgrounds) and a white MSU wordmark image.
Sample code does not include styles that enable responsive behavior (as each website will vary) but can be used for legacy (non-responsive) websites with little or no changes.
IMPORTANT: Sample code is provided as a guideline in implementing the technical requirements indicated in the MSU Web Standards for the MSU Masthead, Search Tool, and Standard Footer. Website owners may have to modify the sample code in order to achieve the desired results and correct responsive behavior.
7.3 Standard Footer for Light-Colored Backgrounds or Images
HTML sample code for light-colored backgrounds with website telephone number: