A visitor’s first impression of Michigan State University online must be a positive one. Perceptions of MSU’s quality, value, and standing are affected by the visitor’s experience when browsing university websites, reading content, accessing information, and using web-based services.
MSU Web Standards provide guidance on web elements and practices that are required for every institutional web page.
Figure 1-1 Sample page showing the main components of the MSU web page layout: MSU Masthead, Search Tool, site name, content area, and Standard Footer, as well as web typography (font styles) - view full resolution
1.1 Recommended Elements and Practices Checklist
Create intuitive, useful, and positive web experiences for audiences by including these elements and practices in every MSU web-based communication and interface:
Layout (HTML) and Style (CSS) Specifies placement of the MSU Masthead, Search Tool, and Standard Footer, provides CSS code for responsive and non-responsive websites
Michigan State University Masthead Addresses the need for immediate recognition of a university website and consistent brand identification
Search Tool Locates information for the website a visitor is currently on and from other related MSU web pages managed across the entire university
Web Typography (Fonts) Specifies typefaces chosen for MSU websites (font usage may be recommended or required for certain page elements), Gotham typeface and licensing, acceptable font substitutions, and typeface samples
Standard Footer Provides direct access to website contact information, privacy statement, accessibility information, and site map and includes university contact information
Coding Guidelines Addresses incorporating MSU's Web Accessibility Policy Technical Guidelines, validating HTML and CSS code, regularly checking web pages for broken links, and using descriptive page headings and link titles
Standards for Social Media and Meta Tags Addresses use of well-written tags to make links to MSU web pages from social media and search easier for visitors to understand and evaluate
Make the Masthead and Search Tool 60 pixels tall (measure from top of page down).
Align them with the top margin of the web layout.
Vertically center the MSU Masthead and Search Tool within the 60 pixels.
Align the MSU Masthead with left web page content margin.
Align the Search Tool with right web page content margin.
Do not place any additional elements within or above this region.
Do not fill the top 60 pixels of the web page with a background color or image that is different from the background used in the website’s design.
2.2 Checklist: Standard Footer
Make 73 pixels tall
Place below the web layout
Align with left web page content margin
No additional elements within or below this region
2.3 Style (CSS)
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.
CSS 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:
/*****************************************************************************************************/
/* */
/* Branding - MSU Masthead, Search Tool and Standard Footer */
/* Verify your website’s font size/weight/color to current branding styles for lines marked "V2.0" */
/* */
/*****************************************************************************************************/
/* #Set Page Width
================================================== */
.MSUwrapper {
width: 100%;
max-width: 940px;
min-width: 940px;
margin: 0 auto;
clear: both;
/* Branding styles */
/* The following allows the Masthead and Footer to use Gotham font without affecting the rest of the site. */
/* If the site is already using Gotham font, the following (or similar CSS) should be moved to the body CSS */
font-family: 'Gotham SSm A', 'Gotham SSm B', arial, sans-serif; /* V2.0 */
font-weight: normal; /* V2.0 */
font-size: 16px; /* V2.0 */
font-size: 1rem; /* V2.0 */
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
-moz-osx-font-smoothing: grayscale; /* Fix for firefox rendering */
}
/* You may have to adjust the max-width and min-width to fit the width of your site.
If the margin is set differently for your site, fix the margin here to reflect that. */
/* #MSU Masthead
================================================== */
#MSUheader {
height: 60px;
}
#MSUmasthead {
width: 50%;
float: left;
position: relative;
}
#MSUmasthead img.msugraphic-green {
padding-top: 12px;
display: block;
}
#MSUmasthead img.msugraphic-white {
padding-top: 12px;
display: none;
}
#MSUmasthead img.print-msugraphic {
display: none;
}
/* Search Tool */
#MSUSearchTool form .hide {
position: absolute;
left: -9999px;
}
#MSUSearchTool {
width: 50%;
float: left;
position: relative;
margin-top: 14px;
}
#MSUSearchTool #search-tool-box {
height: 28px;
width: 319px;
float: right;
border: 1px solid #999;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-family: 'Gotham SSm A', 'Gotham SSm B', arial, sans-serif;
}
#MSUSearchTool.white-fill #search-tool-box {
background: #fff;
}
#MSUSearchTool.no-fill #search-tool-box {
background: transparent;
}
#MSUSearchTool #btn_search {
height: 28px;
width: 34px;
cursor: pointer;
outline: 0px none;
border: 0px none;
float: right;
margin: 0 auto;
text-indent: -9999px;
text-transform: capitalize;
-webkit-border-radius: 0px 3px 3px 0px;
-moz-border-radius: 0px 3px 3px 0px;
border-radius: 0px 3px 3px 0px;
}
#MSUSearchTool.white-fill #btn_search {
background: #fff url(../images/icon-search.png) no-repeat center;
}
#MSUSearchTool.no-fill #btn_search {
background: transparent url(../images/icon-search.png) no-repeat center;
}
#MSUSearchTool #btn_search:hover {
-moz-box-shadow: inset 0 0px 60px rgba(0,0,0,0.3);
-webkit-box-shadow: inset 0 0px 60px rgba(0,0,0,0.3);
box-shadow: inset 0 0px 60px rgba(0,0,0,0.3);
}
#MSUSearchTool input[name="q"] {
width: 258px;
background-color: transparent;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
color: #666;
font-size: 12px;
font-weight: normal;
float: left;
height: 28px;
outline: none;
padding-left: 12px;
padding-top: 0px;
}
/* #MSU Footer
================================================== */
#MSUstandardFooter {
height: 170px;
font-family: 'Gotham SSm A', 'Gotham SSm B', arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#MSUstandardFooter .fourMSUcolumns {
width: 221px;
float: left;
position: relative;
margin-right: 18px;
}
#MSUstandardFooter .fourMSUcolumns img {
width: 100%;
margin-top: 8px;
}
#MSUstandardFooter .thirteenMSUcolumns { /* V2.0 */
width: 660px;
float: left;
position: relative;
margin: 5px 0px 0px 0px;
}
/* Website information with Call Us/Telephone (Footer line 1) */
#MSUstandardFooter #standard-footer-site-links ul {
margin: 0px;
padding: 0px;
height: 22px;
border-bottom: 1px dotted #808080;
float: left;
clear: right;
}
#MSUstandardFooter #standard-footer-site-links ul li {
display: inline-block;
padding-left: 4px;
font-size: 12px; /* V2.0 */
font-size: 1rem; /* V2.0 */
margin-left: 0px;
margin-right: 0px;
}
#MSUstandardFooter #standard-footer-site-links ul li:first-child {
padding: 0px;
}
#MSUstandardFooter #standard-footer-site-links ul li:nth-child(2) a {
padding: 0px 8px 0px 8px;
}
#MSUstandardFooter #standard-footer-site-links ul li:last-child a {
border-right: none;
}
#MSUstandardFooter #standard-footer-site-links ul li a {
text-decoration: none;
padding-right: 8px;
font-weight: 500; /* V2.0 */
}
#MSUstandardFooter #standard-footer-site-links ul li a:hover {
text-decoration: underline;
}
#MSUstandardFooter.light-background #standard-footer-site-links {
color: #18453b;
}
#MSUstandardFooter.light-background #standard-footer-site-links a {
color: #18453b;
border-right: 1px solid #18453b;
}
#MSUstandardFooter.light-background #standard-footer-site-links ul li:nth-child(2) a {
border-left: 1px solid #18354b;
}
#MSUstandardFooter.dark-background #standard-footer-site-links{
color: #fff;
}
#MSUstandardFooter.dark-background #standard-footer-site-links ul li:nth-child(2) a {
border-left: 1px solid #737373;
}
#MSUstandardFooter.dark-background #standard-footer-site-links a {
color: #fff;
border-right: 1px solid #737373;
}
/* Website information - no Call Us/Telephone (Footer line 1) */
#MSUstandardFooter #standard-footer-site-nocall-links ul {
margin: 0px;
padding: 0px;
height: 22px;
border-bottom: 1px dotted #808080;
float: left;
clear: right;
}
#MSUstandardFooter #standard-footer-site-nocall-links ul li {
display: inline-block;
font-size: 12px; /* V2.0 */
font-size: 1rem; /* V2.0 */
padding-left: 4px;
}
#MSUstandardFooter #standard-footer-site-nocall-links ul li:first-child {
display: inline-block;
font-size: 12px; /* V2.0 */
font-size: 1rem; /* V2.0 */
padding-left: 0px;
}
#MSUstandardFooter #standard-footer-site-nocall-links ul li a {
padding: 0px 8px 0px 8px;
}
#MSUstandardFooter #standard-footer-site-nocall-links ul li a:first-child {
padding: 0px 8px 0px 0px;
}
#MSUstandardFooter #standard-footer-site-nocall-links ul li a {
padding-right: 8px;
text-decoration: none;
font-weight: 500; /* V2.0 */
}
#MSUstandardFooter #standard-footer-site-nocall-links ul li a:hover {
text-decoration: underline;
}
#MSUstandardFooter.light-background #standard-footer-site-nocall-links {
color: #18453b;
}
#MSUstandardFooter.light-background #standard-footer-site-nocall-links ul li a {
color: #18453b;
border-right: 1px solid #18354b;
}
#MSUstandardFooter.light-background #standard-footer-site-nocall-links ul li:last-child a {
border-right: none;
}
#MSUstandardFooter.dark-background #standard-footer-site-nocall-links{
color: #fff;
}
#MSUstandardFooter.dark-background #standard-footer-site-nocall-links ul li a {
color: #fff;
border-right: 1px solid #737373;
}
#MSUstandardFooter.dark-background #standard-footer-site-nocall-links ul li:last-child a {
color: #fff;
border-right: none;
}
/* MSU information (Footer lines 2-3) */
#MSUstandardFooter #standard-footer-MSU-info {
font-size: 9px; /* V2.0 */
font-size: 0.5625rem; /* V2.0 */
margin-top: 2px;
padding-top: 0px;
float: left;
clear: right;
}
#MSUstandardFooter #standard-footer-MSU-info ul {
margin: 0px;
padding: 0px;
height: 16px;
font-size: 9px; /* V2.0 */
font-size: 0.5625rem; /* V2.0 */
}
#MSUstandardFooter #standard-footer-MSU-info ul li {
margin-bottom: 0px;
line-height: 10px;
display: inline;
border-right: 1px solid #999;
padding: 0px 8px 0px 4px;
margin-left: 0px;
margin-right: 0px;
}
#MSUstandardFooter #standard-footer-MSU-info ul li.spartans-will {
text-transform: uppercase;
font-weight: 600; /* V2.0 */
}
#MSUstandardFooter #standard-footer-MSU-info ul li:first-child {
padding-left: 0px;
}
#MSUstandardFooter #standard-footer-MSU-info ul li:last-child {
border-right: 0px;
}
#MSUstandardFooter #standard-footer-MSU-info ul li a {
text-decoration: none;
}
#MSUstandardFooter #standard-footer-MSU-info ul li a:hover {
text-decoration: underline;
}
#MSUstandardFooter.light-background #standard-footer-MSU-info{
color: #18453b;
}
#MSUstandardFooter.light-background #standard-footer-MSU-info a, #MSUstandardFooter.light-background #standard-footer-MSU-info .msu-phone {
color: #4c7e00; /* V2.0 */
}
#MSUstandardFooter.dark-background #standard-footer-MSU-info {
color: #fff;
}
#MSUstandardFooter.dark-background #standard-footer-MSU-info a, #MSUstandardFooter.dark-background #standard-footer-MSU-info .msu-phone {
color: #81d300; /* V2.0 */
}
#standard-footer-MSU-wordmark img.print-msuwordmark {
display: none;
}
/* #Print Styles
================================================== */
@media print {
#MSUmasthead img.print-msugraphic, #standard-footer-MSU-wordmark img.print-msuwordmark {
display: block;
}
#MSUmasthead img.msugraphic-green, #MSUmasthead img.msugraphic-white {
display: none;
}
#standard-footer-MSU-wordmark img.msuwordmark-green, #standard-footer-MSU-wordmark img.msuwordmark-white {
display: none;
}
#MSUSearchTool #search-tool-box{
margin-right: 12px;
}
}
/* End of Branding - MSU Masthead, Search Tool and Standard Footer */
/********************************************************************/
3. Michigan State University Masthead
The Michigan State University Masthead comprises the Spartan helmet graphic and the text “Michigan State University” using the Gotham typeface.
The MSU Masthead is designed to enable the Spartan helmet graphic and MSU text to display over the top of any web page background or image.
CSS for responsive and legacy (non-responsive) websites is available in Layout (HTML) and Style (CSS) - Section 2.3. To use this CSS code, copy and paste it at the end of your website's main CSS file.
Exemption: Intercollegiate Athletics
Figure 3-1 Michigan State University Masthead
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.
HTML 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.,/p>
Where "q" is used in your CSS to reference input box name, be sure to change any reference of input#q to input[name="q"].
<!-- CSS class that hides the Search button text --> .hide { position: absolute; left: -9999px; }
<!-- MSU Masthead and Search Tool ================================================== -->
<div class="MSUwrapper" id="MSUheader">
<div id="MSUmasthead" role="banner">
<a href="http://www.msu.edu">
<!-- if using a dark background change the img src to images/masthead-helmet-white.png-->
<img class="screen-msugraphic" alt="Michigan State University masthead graphic" src="images/masthead-helmet-green.png"/>
<!-- MSU Web Standards indicate the MSU masthead graphic should be printed black -->
<img class="print-msugraphic" alt="Michigan State University masthead graphic" src="images/masthead-helmet-black.png"/>
</a>
</div>
<!-- If you prefer to have a transparent fill in the search box, replace the class 'white-fill' with 'no-fill' -->
<div id="MSUSearchTool" class="white-fill" role="search">
<div id="search-tool-box" >
<form action="//u.search.msu.edu/index.php" method="get">
<input name="client" type="hidden" value="My Site Name" />
<input name="sitesearch" type="hidden" value="mysite.msu.edu" />
<input name="analytics" type="hidden" value="UA-12345678-9" />
<label><span class="hide">Search Tool</span>
<input name="q" placeholder="Search..."/><br />
</label>
<button id="btn_search" type="submit"><span class="hide">Search</span></button>
</form>
</div>
</div>
</div>
CSS for responsive and non-responsive websites is available in Layout (HTML) and Style (CSS) - Section 2.3. Copy and paste CSS code at the end of the website's main CSS file.
Exemption: Intercollegiate Athletics
The search tool is 319 pixels wide by 28 pixels tall, with a roundness of 3 pixels.
The magnifying glass icon is 16 pixels x 16 pixels.
Do not place more than one search tool on a web page.
Verify and adjust background image to ensure accessibility color contrast when using the semi-transparent search box.
Do not combine with any other marks, graphic elements, or words.
4.3 Exceptions
Please work with Comms if you have questions about required elements.
You may request an exception to display additional search tools. For example, tools for searching a course catalog, knowledge base, or library book/journal.
Do not alter the placeholder text inside the Search box.
Do not change the size of the Search box.
Do not remove the Search box border.
Do not change the style, width, or color of the Search box border.
Do not add "drop shadow" effects to the Search box.
Figure 4-2 Samples of unacceptable Search Tool variations - view full resolution
5. Web Typography (Fonts)
5.1 Overview of Gotham Fonts
5.1.1 Typeface and Fonts
Typeface is the design of the letters and characters, including shape, stroke weight, serifs, length of ascenders and descenders, and other characteristics that make the typeface recognizable.
A font is a digital representation of a typeface in one size, one style, and one weight. Style is the vertical angle of the characters (normal, italics). Weight is the thickness of the characters (light, regular, bold, black) in relation to their height. Example of a font: Courier 12px normal bold
A font family is a collection of all font size and style combinations of a typeface.
5.1.2 MSU’s Gotham Font License
Gotham is the primary typeface selected for MSU websites. The MSU Brand website explains why MSU’s primary fonts were chosen and lists acceptable font substitutions.
University Communications (Comms) has purchased a license to use the Gotham fonts, allowing the entire MSU community to use the fonts free of charge in any websites containing university content. Gotham fonts are owned by Hoefler and Company (website http://typography.com/).
5.1.3 Choosing Web Fonts
The website designer or developer determines which sizes, styles, and weights of Gotham web fonts are to be used for the website’s standard content, page title, headings, links, etc. The MSU Web Standards dictate sizes, styles, and weights for the MSU Masthead and Standard Footer.
A combination of the following Gotham fonts can be used together in the website.
Gotham fonts:
Primarily used for print media
Also used on the web when font sizes larger than 18 pixels are needed
Gotham ScreenSmart fonts:
These fonts are optimized for the web.
They render on the screen with better clarity and precision than Gotham fonts.
Optimal viewing sizes are from 9-18 pixels. For larger sizes, use Gotham fonts.
Gotham Narrow ScreenSmart fonts:
Similar to Gotham ScreenSmart fonts, they were developed for optimal web viewing.
Characters are closer together than with Gotham ScreenSmart fonts, making them ideal for long passages of text.
Optimal viewing sizes are from 9-18 pixels. For larger sizes, use Gotham fonts.
5.2 Using Web Fonts
5.2.1 Font Requirements
Required: Gotham font for MSU Masthead and Standard Footer Recommended: Gotham font (or an acceptable substitute font) for headings, copy, and hyperlinks
The recommended typeface for use on MSU websites is Gotham (sans serif) all weights. See The MSU Brand – Typography in the MSU Brand website for additional fonts that may be substituted. Note that Californian should not be used for web content.
5.2.2 Font Substitutions
For a list of acceptable fonts that may be substituted for Gotham fonts in content other than the MSU Masthead or Standard Footer, refer to typography information at The MSU Brand - Design and Visual Identity.
There is no cost to you for using Gotham or Georgia with your MSU website.
Gotham fonts are available to everyone but do require an installation in conjunction with a Comms developer. This process takes about 10-15 minutes. Once you have submitted the online Gotham request form, a Comms developer will contact you and provide the customized font files you will install on your web server.
Gotham font files use the OpenType format.
Note: Print media, slide shows, videos, and other non-web applications utilize desktop fonts – contact University Communications to obtain these fonts.
Once installed, you will be provided with an HTML <link> statement that allows your web pages to use Gotham fonts.
To implement Gotham fonts in your website:
Add Gotham fonts to your CSS file where appropriate. Gotham A and Gotham B should be specified as indicated. Your customized fonts are split into two font files (A and B). This allows the fonts to be downloaded simultaneously when a browser renders the fonts. Always include a fallback font in your font-family. CSS example:
CSS for responsive and non-responsive websites is available in Layout (HTML) and Style (CSS) - Section 2.3. Copy and paste CSS code at the end of the website's main CSS file.
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.
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
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:
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: #81D300 (bright green)
MSU URL hyperlink:
font-size: 9px, 0.5625rem
font-weight: 700 (Gotham Bold)
color: #81D300 (bright green)
Non-Discrimination hyperlink:
font-size: 9px, 0.5625rem
font-weight: 700 (Gotham Bold)
color: #81D300 (bright green)
Text "SPARTANS WILL." (all upper case):
font-size: 9px, 0.5625rem
font-weight: 600 (Gotham Bold)
color: #FFFFFF (white)
8. Coding Guidelines
8.1 Accessibility
MSU Accessibility Policy applies to every web page used to conduct core university business and academic activities. Visit webaccess.msu.edu for additional accessibility tools and resources.
Standard: Web Content Accessibility Guidelines 2.0 Level AA.
For Web Content Accessibility Guidelines (WCAG) 2.0, visit w3.org/TR/WCAG20/.
Make use of free accessibility checkers such as WAVE (WebAIM).
Include at least one <h1> HTML tag that describes the main subject of the web page.
Include <h2> through <h6> HTML tags for longer, complex documents.
Avoid gaps in the heading hirarchy (e.g. skipping from <h1> to <h3>).
Include key words and phrases in headings to describe content.
Use clear language that is easy to comprehend.
Use the fewest words possible.
8.6 Descriptive Link Titles
Include common key words or phrases in links that describe the content on linked pages.
Use link text like “learn how to apply to MSU,” “sign up to receive MSU news updates,” and “visit the Office of the President website.”
Do not use link text like “more information,” “click here,” and “learn more.”
8.7 Opening New Windows and Tabs from a Link
Do not configure your links to automatically open in a new window or tab. Doing so can confuse and frustrate visitors to MSU websites.
Using a new browser window resets the back button in that window. The back button is the second most used navigation function (after following hyperlinks).
8.8 Phone Numbers
Format phone numbers this way: (517) 355-1855.
9. Standards for Social Media and Meta Tags
Social media networks and search engines use a web page’s Open Graph, Twitter Card, and meta tags when displaying summaries of and links to individual web pages.
Links to institutional web pages encountered via social media and search are easier for potential visitors to understand and evaluate when well-written Open Graph, Twitter Card, and meta tags have been included.
Include the Open Graph and meta tags on every institutional web page.
Include Twitter Card meta tags on featured/important MSU articles, media releases, multimedia elements, and information pages.
Place Open Graph and meta tags between HTML <head></head> tags.
9.1 Open Graph (OG)
Open Graph is a standard commonly used by Facebook.
Figure 9-1 Sample of Open Graph link shared on Facebook
9.1.1 OG: Title Tag
Include the text that should appear by default when a link to a web page is shared via social media.
9.1.2 OG: Description
Include a one to two sentence summary describing the contents of your web page.
9.1.3 OG: Type Tag
Specify the kind of object/content being linked. For example, <meta property=“og:type” content=“website”/> is used when linking to a website.
9.1.4 OG: Image Tag
Include a URL for the graphic to be used when displaying a thumbnail preview along with a link to the web page via social media.
9.1.5 OG: URL Tag
Include the URL of the web page being linked. The URL serves as the permanent link to the content (i.e., link directly to a story, not a home page featuring a link to the story).
A Twitter Card makes it possible to attach media experiences to tweets that link to content. Simply add a few lines of HTML to web pages and users who tweet links to content will have a "card" added to their tweet that is visible to all of their followers.
Figure 9-2 Sample of a "basic summary" Twitter Card
9.2.1 Twitter: Card
Set to a value of “summary.”
9.2.2 Twitter: Title
Be concise. Use 70 characters or fewer.
9.2.3 Twitter: Site
Include the Twitter @username used by the website.
9.2.4 Twitter: Creator
Include the @username of the content creator.
9.2.5 Twitter: Description
Summarize the content of the page. Use 200 or fewer characters.
Do not reuse the title or use this field to describe the general services provided by the website.
9.2.6 Twitter: Image
Include a URL for a unique image representing the content of the page that uses a square aspect ratio of 120 pixels x 120 pixels minimum and is less than 1MB in size.
Do not use a generic graphic or image used as the Twitter image for other pages in your website.
MSU websites that have accurate, timely, and engaging content enable visitors to understand and form a positive opinion of the university's academic programs, services, research innovations, faculty, staff, and more.
In addition, keeping website content up to date can boost user experience and search engine optimization.
10.1 Website Content Audits
When preparing to redesign a website or integrate new features or functionality:
Familiarize yourself with what your website currently includes by reviewing pages, sections, images, photographs, and multimedia.
Check for broken links (outbound links to other websites often change).
Review content performance by analyzing server logs and web analytics.
Identify content that is out of date, under performing, or low quality (e.g., images with visible compression artifacts, video unavailable in an HD format).
Update or archive content that does not meet standards for content performance, quality, and accessibility.
Conduct a fit/gap analysis of what content or materials you will need to meet your new website goals.
Consider how your team will add and review new content over time.
10.2 Create a Content Plan
After you complete an audit, develop a content plan to ensure that website content remains up to date.
Your plan should include details about what new content will be added over time, who will produce it, required elements (e.g. a headline, 250 words, photographs, and contact information), and search engine optimization tags and headings (see Standards For Social Media and Meta Tags in Section 9).
Be sure to be realistic with your content plan in order to make the most of your budget and resources so that the plan will be sustainable long term.
10.3 Best Practices
Tailor your content plan to fit your goals and resources.
Boost visitor engagement by publishing fresh content at regular intervals.
Improve website search engine optimization by publishing content over time versus all at once.
Prevent your website from appearing dated by publishing new content at least once per month.
11. Web Design Examples
The Michigan State University Masthead, Search Tool, and Standard Footer were designed to provide a high level of flexibility for web designers and developers.
Each element can be integrated easily with existing MSU websites without extensive redevelopment or coding. Examples of properly branded websites are provided below.
Complete design files, web-ready graphics, and code examples are available for download. (See Resources and Downloads)
11.1 What to Do When Updating a Website
Place the site name text below the MSU Masthead.
Make the site name stand out by using 48px (3rem) Georgia typeface. For site names that are long or span multiple lines, reduce the font size but do not go smaller than 28px (1.75rem).
Check the text color contrast for accessibility compliance.
Explore interesting, new web design directions by leveraging how the MSU Masthead and Standard Footer were designed to display well over solid colors as well as rich photos and illustrations.
[Removed all web design examples (sections 11.2 thru 11.7)]
Site identification is provided by the site name that displays in the site header area below the MSU Masthead. Two versions are available:
One line – a single line that identifies the website unit
Multi-line – two or three lines that identify the website unit and parent or affiliate unit*
*The first line should refer to the website currently in use (similar to the one line site name example), with a reverse hierarchical order displaying the site's univeristy affiliations.
One line example:
Multi-line examples:
Site name link
The site name block, regardless of its content, should provide a single hyperlink back to the current site's homepage.
Mobile and tablet screen aspect ratio and resolution vary across devices and operating systems. The layout and spacing information in this section provides guidance on placement and presentation of required elements on mobile devices.
12.1.1 Checklist: Mobile MSU Masthead and Search Tool
Align with top margin of the web layout.
Vertically center the MSU Masthead and Search Tool in masthead region.
Align MSU Masthead with left web page content margin.
Align a Search Tool button with right web page content margin.
Do not place any additional elements within or above this region.
Do not fill the area behind the MSU Masthead and Search Tool with a background color or image that is different from the background used in the website’s design.
12.1.2 Checklist: Mobile Standard Footer
Place below the web layout.
Align your website information and horizontal rule with center of page.
Align MSU main campus information with left web page content margin.
Align MSU wordmark with center of page.
Do not place additional elements within or below this region.
12.2 Alternate Placement of Search Tool For Mobile
You may place the search box below the MSU Masthead in place of the search button.
Figure 12-3 Alternate search box placement for mobile layouts
12.3 Mobile Design Best Practices
Start with mobile layout first when creating a new website design.
Place essential information and actions in upper portions of your layout.
Style navigation and heading consistently on mobile and desktop.
Style and position text and user interface to be visually distinct from one another.
Use simple interfaces and interactivity.
Make user interface large enough to touch (48x48 pixels minimum).
Evaluate and test download speeds (more fonts and images mean slower load time).
12.4 Creating New Mobile MSU Designs
Creating new and innovative mobile designs is encouraged.
MSU Web Standards will be updated regularly to include new solutions.
Please work with Comms (University Communications) if you have questions about required elements.
13. Updates to Web Standards
13.1 Adoption of New Standards, Questions, and Assistance
Please work with Comms if you have questions about these standards, recommendations, or required elements.
Campus web managers are requested to integrate the Footer Non-Discrimination link (as specified in MSU Web Standards Version 2.0) with each MSU website by February 2017 (within one year of the February 2016 announcement).
MSU Web Standards will be updated regularly to include new solutions.
Updates will be presented at UCN meetings and published in the UCN minutes in the Comms website at http://cabs.msu.edu/communicators-network/portal/ (available to campus communicators with login).
13.3 Related Resources
For further resources related to MSU Web Standards:
Visit the University Communications website at comms.msu.edu
#18453B (MSU green)
#4C7E00 (green)
#81D300 (bright green)
