Skip navigation links
Michigan State University
Michigan State University

University Communications
University Communications > Resources > MSU Web Standards >

MSU Footer

MSU Footer

The standard MSU Footer is designed to enable the text links, standard text, and MSU wordmark to display over the top of any web page background or image.

 

Standard Footer with website Telephone Number
Figure 7-1. Standard Footer with website Telephone Number - view full resolution

 

Standard Footer - no website Telephone Number
Figure 7-2. Standard Footer - no website Telephone Number - view full resolution

 

7.1 Use

  • Use approved, unaltered versions of graphics. (See Resources and Downloads)
  • 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.
  • Privacy Statement: hyperlink this text to a page in your website that describes and documents information collected via your website, how the information is used, and how visitors can opt out. For sample language, visit Using Google Analytics with Web Sites at Michigan State University - TB15485 (login required).
  • 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
  • SPARTANS WILL.
  • Notice of Nondiscrimination: link to the Office of Institutional Equity (OIE) website, link destination is http://oie.msu.edu
  • Copyright statement

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.

In this example, the resulting CSS is:


html {
    font-size: 16px;
    font-size: 1rem;
}
.size1 {
    font-size: 32px;
    font-size: 2rem;
}
.size2 {
    font-size: 14px;
    font-size: 0.875rem;
}
...

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.

W3C Techniques for Testing Contrast Ratio:
https://www.w3.org/TR/WCAG20-TECHS/G18.html

MSU Web Accessibility Evaluation and Validation - online tools:
http://webaccess.msu.edu/Help_and_Resources/evaluation-validation.html

7.2.6 Sample Code Notes

HTML code for light-colored and dark-colored backgrounds is identical except that:
(use HTML character code "©" for the copyright symbol)

  • 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

 

Standard Footer with website Telephone Number
Figure 7-3. Standard Footer for light-colored backgrounds or images - view full resolution

 

HTML sample code for light-colored backgrounds with website telephone number:


<div class="MSUwrapper light-background" id="MSUstandardFooter" role="contentinfo">    <!-- class ’light-background' sets link colors -->
    <div class="fourMSUcolumns" id="standard-footer-MSU-wordmark">
        <a href="http://www.msu.edu">    <!-- Use green MSU wordmark -->
            <img alt="Michigan State University Wordmark" class="screen-msuwordmark" src="/render/file.act?path=/_files/images/msu-wordmark-green-221x47.png" height="47" width="221" />
            <img alt="Michigan State University Wordmark" class="print-msuwordmark" src="/render/file.act?path=/_files/images/msu-wordmark-black-221x47.png" height="47" width="221" />
        </a>
    </div>
    <div class="twelveMSUcolumns">
    <!-- change the css to using nth child instead of classes!!!!!!-->
        <div id="standard-footer-site-links">
            <ul>
                <li>Call us: <strong>(517) 355-7505</strong></li>
                <li><a href="/contact">Contact Information</a></li>
                <li><a href="/site-map">Site Map</a></li>
                <li><a href="/privacy-statement">Privacy Statement</a></li>
                <li><a href="/accessibility">Site Accessibility</a></li>
            </ul>
        </div>
        <div id="standard-footer-MSU-info">
            <ul>
                <li>Call MSU: <span class="msu-phone"><strong>(517) 355-1855</strong></span></li>
                <li>Visit: <strong><a href="http://msu.edu">msu.edu</a></strong></li>
                <li>MSU is an affirmative-action, equal-opportunity employer.</li>
                <li><a href="http://oie.msu.edu/"><strong>Notice of Nondiscrimination</strong></a></li>
            </ul>
            <ul>
                <li class="spartans-will">Spartans Will.</li>
                <li>© Michigan State University</li> </ul> </div> </div> </div> <!-- ================================================== -->

 

7.3.1 MSU wordmark graphic

  • Image size 221 x 47 pixels, color Color sample for #18453B #18453B (MSU green)

7.3.2 Website Information - footer line 1 (above horizontal rule)

  • Text ("Call us:"):
    • font-size: 12px, 0.75rem
    • font-weight: 400 (Gotham Book, also called "Normal" or "Regular")
    • color: Color sample for #18453B #18453B (MSU green)
  • Telephone number:
    • font-size: 12px, 0.75rem
    • font-weight: 700 (Gotham Bold)
    • color: Color sample for #18453B #18453B (MSU green)
  • Hyperlinks and separator bars:
    • font-size: 12px, 0.75rem
    • font-weight: 500 (Gotham Medium)
    • color: Color sample for #18453B #18453B (MSU green)

7.3.3 MSU Information - footer lines 2-3 (below horizontal rule)

  • Text ("Call MSU:", "Visit:", Affirmative Action statement, and Copyright statement):
    • font-size: 9px, 0.5625rem
    • font-weight: 400 (Gotham Book)
    • color: Color sample for #18453B #18453B (MSU green)
  • MSU Telephone Number:
    • font-size: 9px, 0.5625rem
    • font-weight: 700 (Gotham Bold)
    • color: Color sample for #4C7E00 #4C7E00 (green)
  • MSU URL hyperlink:
    • font-size: 9px, 0.5625rem
    • font-weight: 700 (Gotham Bold)
    • color: Color sample for #4C7E00 #4C7E00 (green)
  • Non-Discrimination hyperlink:
    • font-size: 9px, 0.5625rem
    • font-weight: 700 (Gotham Bold)
    • color: Color sample for #4C7E00 #4C7E00 (green)
  • Text "SPARTANS WILL." (all upper case):
    • font-size: 9px, 0.5625rem
    • font-weight: 600 (Gotham Bold)
    • color: Color sample for #18453B #18453B (MSU green)

 

7.4 Standard Footer for Dark-Colored Backgrounds or Images

 

Standard Footer for dark-colored backgrounds or images 
Figure 7-4. Standard Footer for dark-colored backgrounds or images - view full resolution

 

HTML sample code for dark-colored backgrounds with no website telephone number:


<div class="MSUwrapper dark-background" id="MSUstandardFooter" role="contentinfo">    <!-- class ’dark-background' sets link colors -->
    <div class="fourMSUcolumns" id="standard-footer-MSU-wordmark">
        <a href="http://www.msu.edu">    <!-- Use white MSU wordmark -->
            <img alt="Michigan State University Wordmark" class="screen-msuwordmark" src="/render/file.act?path=/_files/images/msu-wordmark-white-221x47.png" height="47" width="221" />
            <img alt="Michigan State University Wordmark" class="print-msuwordmark" src="/render/file.act?path=/_files/images/msu-wordmark-black-221x47.png" height="47" width="221" />
        </a>
    </div>
    <div class="twelveMSUcolumns">
    <!-- change the css to using nth child instead of classes!!!!!!-->
        <!-- "Call us" and Telephone are removed --> 
        <div id="standard-footer-site-nocall-links">
            <ul>
                <li><a href="/contact">Contact Information</a></li>
                <li><a href="/site-map">Site Map</a></li>
                <li><a href="/privacy-statement">Privacy Statement</a></li>
                <li><a href="/accessibility">Site Accessibility</a></li>
            </ul>
        </div>
        <div id="standard-footer-MSU-info">
            <ul>
                <li>Call MSU: <span class="msu-phone"><strong>(517) 355-1855</strong></span></li>
                <li>Visit: <strong><a href="http://msu.edu">msu.edu</a></strong></li>
                <li>MSU is an affirmative-action, equal-opportunity employer.</li>
                <li><a href="http://oie.msu.edu/"><strong>Notice of Nondiscrimination</strong></a></li>
            </ul>
            <ul>
                <li class="spartans-will">Spartans Will.</li>
                <li>© Michigan State University</li>
            </ul>
        </div>
    </div>
</div>
<!-- ================================================== -->

 

 

7.4.1 MSU wordmark graphic

  • Image size 221 x 47 pixels, color #FFFFFF (white)

7.4.2 Website Information - footer line 1 (above horizontal rule)

  • Text ("Call us:"):
    • font-size: 12px, 0.75rem
    • font-weight: 400 (Gotham Book)
    • color: #FFFFFF (white)
  • Telephone number:
    • font-size: 12px, 0.75rem
    • font-weight: 700 (Gotham Bold)
    • color: #FFFFFF (white)
  • Hyperlinks and separator bars:
    • font-size: 12px, 0.75rem
    • font-weight: 500 (Gotham Medium)
    • color: #FFFFFF (white)

7.4.3 MSU Information - footer lines 2-3 (below horizontal rule)

  • Text ("Call MSU:", "Visit:", Affirmative Action statement, and Copyright statement):
    • font-size: 9px, 0.5625rem
    • font-weight: 400 (Gotham Book)
    • color: #FFFFFF (white)
  • MSU Telephone Number:
    • font-size: 9px, 0.5625rem
    • font-weight: 700 (Gotham Bold)
    • color: Color sample for #81D300 #81D300 (bright green)
  • MSU URL hyperlink:
    • font-size: 9px, 0.5625rem
    • font-weight: 700 (Gotham Bold)
    • color: Color sample for #81D300 #81D300 (bright green)
  • Non-Discrimination hyperlink:
    • font-size: 9px, 0.5625rem
    • font-weight: 700 (Gotham Bold)
    • color: Color sample for #81D300 #81D300 (bright green)
  • Text "SPARTANS WILL." (all upper case):
    • font-size: 9px, 0.5625rem
    • font-weight: 600 (Gotham Bold)
    • color: #FFFFFF (white)

 

MSU Web Standards