Updates and Change History

Please work with University Communications and Marketing to address questions about these standards, recommendations or required elements.

MSU Web Standards will be updated regularly to include new solutions.

Updates will be presented at University Communicators Network (UCN) meetings and published in the UCN minutes in SharePoint (available to campus communicators with login).

Previous versions of the MSU Web Standards included additional information related to creation of content on websites that was not strictly related to web standards. Much of this content has been moved to other sections of this MSU Experience Studio website or to the MSU Brand Studio website. See “Related Resources,” below, for links.

Versions are listed chronologically (most recent first). Links navigate to the appropriate MSU Web Standards pages, where applicable.

Summary: Updated supported browsers and device analytics to reflect FY2026 audience behaviors. Added information regarding accessibility tools.

Page Changes:

Mobile-First Design

Updated device usage data for visitors to msu.edu and MSUToday.msu.edu with data from July 1, 2025–June 29, 2026.

Quality Assurance

Updated supported browsers with msu.edu and MSUToday.msu.edu visitor data from July 1, 2025–June 29, 2026.
Clarified that all pages should be tested in all viewport sizes to ensure they display as desired.
Added link to Silktide for accessibility testing.
Added link to accessibility standards.

Summary: Updated references to the Sitecore XM Cloud content management system to SitecoreAI, reflecting a name change for the platform.

Summary: Updated link in MSU Legal Footer. Notice of Non-Discrimination link should link directly to the Notice of Non-Discrimination, Anti-Harassment and Non-Retaliation page on the Office for Civil Rights and Title IX Education and Compliance website.

Summary: Updated text requirements for MSU Legal Footer. Updated visual examples of MSU Legal Footer.

Summary: Change all occurrences of “University Communications” to the new unit name “"University Communications and Marketing."

Summary: First major revision since 2019, with changes made to accommodate the Sitecore content management system. Materials not specific to web standards were shifted to other appropriate sections of the MSU Experience Studio, MSU Brand Studio or University Communications and Marketing websites in an effort to reduce duplicate content. Remaining content was reorganized.

Page Changes:

Website Standards

All content was reorganized.
Added content: link and reference to World Wide Web Consortium, or W3C, standards.
Much of the content in the MSU Web Standards appeared in subsections of the previous version of the standards. Where content has moved has been noted in the page-specific listings below.

Accessibility

Added content: Advantage of Enterprise CMS.
Accessibility (8.1) content was moved here from the “Coding Guidelines.”

Mobile-First Design

Added content: Advantage of Enterprise CMS.
Mobile Design Best Practices (12.3) and Creating New Mobile MSU Designs (12.4) content was moved here from “Mobile Devices.”

Brand and Design Standards

Added content: Advantage of Enterprise CMS.

Hyperlinks, Redirects and 404 Pages

Added content: 404 Pages.
Broken Link Maintenance (8.3), Descriptive Link Titles (8.6) and Opening New Windows and Tabs from a Link (8.7) was moved here from “Coding Guidelines.”

Assets and Images

Added content: Document Files; Images; Logos.
Favicons (8.4) content was moved here from “Coding Guidelines.”

Optimize for Search and Sharing

Added content: Optimize for Search.
Descriptive Page Headings (8.5) was moved here from “Coding Guidelines.”
Social Media and Meta Tags (9.X) content was moved here.

Privacy and Security

Added content: MSU Privacy Statement; Payment Card Industry Data Security Standard; Sensitive Data.

Quality Assurance

Added content: Advantage of Enterprise CMS; Browser and Device Testing; Supported Browsers.
Code Validation (8.2) was moved here from “Coding Guidelines.”

MSU Legal Footer

(Previously labeled section 7)

Changed name: MSU Legal Footer.
Content previously in Section 7.X now appears on the MSU Legal Footer page, unless otherwise noted.
Layout checklist, style guidelines and mobile considerations were moved to feature-specific pages.
Phone Numbers (8.8) was moved here from “Coding Guidelines.”

MSU Masthead

(Previously labeled section 3)

Content previously in Section 3.X now appears on the MSU Masthead page, unless otherwise noted.
Layout checklist, style guidelines and mobile considerations were moved to feature-specific pages.

Search Tool

(Previously labeled section 4)

Content previously in Section 4.X now appears on the MSU Search Tool page, unless otherwise noted.
Layout checklist, style guidelines and mobile considerations were moved to feature-specific pages.

Website Names

(Previously labeled section 11)

Added content: Obtaining subdomains associated with the msu.edu domain.
Content previously in Section 11.X (Web Design Examples) now appears on the Website Names page.

Coding Guidelines

(Section deprecated; previously section 8)

Coding Guidelines section was removed from MSU Web Standards and content shifted to other locations.
Accessibility (8.1) was moved to the Accessibility page.
Code Validation (8.2) was moved to the Quality Assurance page
Broken Link Maintenance (8.3) was moved to the Hyperlinks, Redirects and 404 Pages page.
Favicons (8.4) was moved to the Assets and Images page.
Descriptive Page Headings (8.5) was moved to the Optimize for Search and Sharing page.
Descriptive Link Titles (8.6) was moved to the Hyperlinks, Redirects and 404 Pages page.
Opening New Windows and Tabs from a Link (8.7) was moved to the Hyperlinks, Redirects and 404 Pages page.
Phone Numbers (8.8) was moved to the Footer page. It is also addressed in the MSU Editorial Style Guide.

Content Plan

(Section deprecated; previously section 10)

Mobile Devices section was removed from MSU Web Standards and content was shifted to other locations of this website.
Website Content Audits (10.1), Create a Content Plan (10.2) and Best Practices (10.3) content now appears on Content Planning.

Layout and Style (HTML/CSS)

(Section deprecated; previously section 2)

Layout and Style (HTML/CSS) section was removed from MSU Web Standards. All content has been moved to feature-specific pages.

Mobile Devices

(Section deprecated; previously section 12)

Mobile Devices section was removed from MSU Web Standards and the content shifted to other sections of the standards.
Checklists for mobile display of MSU Masthead (12.1.1), Search Tool (12.1.1) and Footer (12.1.2) were moved to the Masthead, Search Tool and Footer pages, respectively.
Alternate Placement of Search Tool for Mobile (12.2) was moved to the Search Tool page.
Mobile Design Best Practices (12.3) was moved to the Mobile-First Design page.
Creating New Mobile MSU Designs (12.4) was moved to the Mobile-First Design page.

Other Logos and Marks

(Section deprecated; previously section 6)

Use of Logos and Marks (6.1) was moved to the Brand and Design Standards page.
Exceptions (6.2) was moved to the Brand and Design Standards page.
Social Media Icons and Buttons (6.3) was moved to the Social Media and Web Integration page.
Related Resources (6.4) now appears at the bottom of the MSU Web Standards page.

Resources and Downloads

(Section deprecated)

Downloads and referenced links appear in context throughout the MSU Web Standards.
Related resources now appear at the bottom of the MSU Web Standards page.
Additional resources can also be downloaded from the MSU Brand Studio website.

Social Media and Meta Tags

(section deprecated; previously section 9)

Open Graph (9.1), Basic Summary Twitter Card (9.2) and Meta Tags (9.3) moved to the Optimize for Search and Sharing page.

Typography

(Section deprecated; previously section 5)

Metropolis has replaced Gotham as the primary typeface for all university-affiliated websites. All university websites must convert away from Gotham by Sept. 1, 2024.
Content previously in section 5.X was removed from the MSU Web Standards.
All typography guidance, regardless of usage medium, is now covered by the MSU Brand Standards.

Web Design Examples

(Section deprecated; previously section 11)

Content previously in section 11.X now appears on the Website Names page.

Updates to Web Standards

(Previously labeled section 13)

Adoption of New Standards, Questions and Assistance (13.1) was modified and moved to the Updates and Change History page.
Future Updates and Releases (13.2) was moved to Updates and Change History page.
Related Resources (13.3) now appears at the bottom of the MSU Web Standards page.

SUMMARY: Replace Gotham with Metropolis for primary brand typeface. Remove obsolete code snippets and example images.

Page Changes:

Introduction

Updated checklist to remove Resources and Downloads and Typography pages.
Removed references to CSS downloads.
Removed obsolete example image.

Layout and Style (HTML/CSS)

Removed obsolete example images.
Removed section 2.3.

MSU Masthead

Removed references to CSS downloads.
Removed obsolete example images.
Section 3.1: Removed link to Resources and Downloads page.
Section 3.3: Removed obsolete example images.

Search Tool

Removed references to CSS downloads.
Section 4.1: Removed obsolete example images.
Section 4.2: Removed link to Resources and Downloads page.

Typography

Removed page. Content previously found under section 5 is now available on the MSU Brand Studio website.

MSU Footer

Removed references to CSS downloads.
Removed obsolete example images.
Section 7.1: Removed link to Resources and Downloads page.
Section 7.2.2: Updated phone number formatting in compliance with MSU editorial style guide.
Section 7.3: Removed obsolete example images and CSS snippets.
Sections 7.3 and 7.4: Updated all typefaces from Gotham to Metropolis. Adjusted color choices for accessibility compliance.

Coding Guidelines

Section 8.4: Removed link to Resources and Downloads page.
Section 8.8: Updated phone number formatting in compliance with MSU editorial style guide.

Web Design Examples

Removed references to CSS and graphics downloads and link to the Resources and Downloads page. Downloads are now available on the MSU Brand Studio website.
Removed obsolete example images.

Mobile Devices

Section 12.1: Removed obsolete example images.

Resources and Downloads

Removed page. Downloads are now available on the MSU Brand Studio website.

Summary: Replace obsolete Techbase article link.

Page Changes:

Search Tool

Section 4.4: Replace link to “Search Tool Implementation Guide” with new link to IT Service Desk Knowledge Base (login required). New article is Document ID 407511.

Summary: Change all occurrences of “CABS” (Communications and Brand Strategy) to the new unit name “Comms” (University Communications). Change URL to “comms.msu.edu.”

Note: UCN Portal link remains http://cabs.msu.edu/communicators-network/portal/meeting-minutes-presentations.php for the time being. (Note, July 1, 2024: This link has since been deprecated. All UCN content is shared via SharePoint and Teams.)

Summary: Added information and examples pertaining to multi-line site names within the masthead area.

Page Changes:

Web Design Examples

Section 11.2: Multi-line site names
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 university affiliations.

Summary: Included information regarding semantic markup under Descriptive Page Headings section.

Page Changes:

Coding Guidelines

Section 8.5: Avoid gaps in the heading hierarchy (e.g., skipping from <h1> to <h3>).

Summary: Correct minor HTML validation errors in sample code.

Page Changes:

Layout and Style (HTML/CSS)

Section 2.3: Replace colon with semicolon in class “#MSUstandardFooter #standard-footer-site-nocall-links ul li” on font-size declaration.

Standard Footer

Section 7.3: Add closing “li” tags under DIV tag ID “standard-footer-site-links.” Replace footer copyright symbol with HTML character code.
Section 7.4: Add closing “li” tags under DIV tag ID “standard-footer-site-nocall-links.” Replace footer copyright symbol with HTML character code.

Summary: Replace obsolete Techbase article link.

Page Changes:

Standard Footer

Section 7.2.2: Replace obsolete Techbase article link with new link to IT Service Desk Knowledge Base (login required). New article is Document ID 402748.

Summary: Change Search Tool CSS and HTML sample code to fix accessibility issue in search input box. Add Change History (summary only) section on MSU Web Standards webpage.

Page Changes:

Top of Page

Added Section 14 Change History to Table of Contents.

Layout and Style (HTML/CSS)

SECTION 2.3: Changed sample code — added comments for clarity, removed banner styles not required for branding, fixed a search tool accessibility and HTML validation error (improper labeling). This code validates properly — ID “q” is omitted in HTML code in favor of the name attribute, all references to id q in the CSS are replaced with name q.
Example: #MSUSearchTool input#q { is replaced with: #MSUSearchTool input[name=“q”] {

MSU Masthead

Section 3.3: Explained use of “q” as a name, not id, HTML tag attribute.
Section 3.3: Removed separate code samples for responsive and legacy (nonresponsive) websites — now only one code sample is provided, which should suffice. CSS Code sample — for completeness, added hide style for Search Tool for clarity, removed comments preceding each code line — these are in the Techbase article. Code for Search Tool input box is now wrapped in a label, ID removed. Button changed from <input type=“text” /> to <button> with button text hidden — screen readers will still read the text.

Web Typography (Fonts)

Section 5.1.3: Minor wording change on third bullets for ScreenSmart and Narrow.
Section 5.2.3: Under “To implement Gotham fonts in your website,” explained why font files A and B are required.
Section 5.2.4: Added link for “How Web Fonts Work.”

Standard Footer

Section 7.1: Added second bullet about sample code being a starting point, not a mandatory block of unmodifiable code.
Section 7.4.2: Corrected third bullet — “Medium” is the correct Gotham weight name, not “Bold.”

Change History

Section 14: Added new main section containing Standards change history information (versions, summary of changes).

Footer Branding Revision

Summary: First major revision of the MSU Web Standards since its publication in October 2014: Revise HTML and CSS sample code and provide two sources: code is displayed in the webpage for copy/paste and code is available in downloadable zip archives. Fix Search Tool validation error in HTML sample code. Expand information about typography and Gotham fonts. Change Standard Footer specifications for Notice of Nondiscrimination link. Correct accessibility requirement for Site Map. Add accessibility requirement for color contrast ratio. Add coding guidelines and evaluation tools. Remove website examples specific to 2015 Masthead, Search, and Footer branding changes. Remove responsive “lorem ipsum” prototype website. Clarify how revisions to MSU Web Standards are announced and published.

Page Changes:

Top of Page

Added version number and last updated date.
Added table of contents with links to each main section of the MSU Web Standards.

Resources and Downloads

Removed PDF version of MSU Web Standards as not necessary — the webpage may be printed or saved as a PDF file.
Added links to view and copy CSS and HTML code samples directly from the webpage.
Added subsection “View and Copy Code Samples” with links to sample code that can be viewed or copied directly from the webpage. Code samples include CSS code and HTML code (Masthead, Search Tool and Standard Footer with light or dark background).
Added subsection “Download Code Samples and Graphic Resources”:
- CSS sample code can be downloaded as a zip archive. HTML sample code is not downloadable but can be obtained directly from the webpage. Separate code samples for responsive and legacy (nonresponsive) websites are no longer provided.
- The responsive “lorem ipsum” prototype is no longer in use and the download link has been removed.
- Web-ready images have not changed. A retina-ready favicon (.ico) file has been added to the web-ready images download file.
- Photoshop design, or .psd, files have changed to reflect the revised branded footer (Nondiscrimination link).

Introduction

Section 1: Replaced image with one that shows revised branded footer with Nondiscrimination link. Replaced image (labeled page elements diagram) with an image that shows revised branded footer with Nondiscrimination link.
Section 1.1: Expanded main section descriptions.

Layout and Style (HTML/CSS)

Section 2: Changed main section title to indicate that CSS code has been added to this main section. Replaced image (labeled sample layout and spacing diagram) with an image that shows revised branded footer with Nondiscrimination link.
Section 2.1: Minor text changes for clarity.
Section 2.3: Added new subsection “Style (CSS)” that displays CSS sample code for branded Masthead and Search Tool. Code can be copied here and pasted into site owner’s website.

MSU Masthead

Section 3: Added fourth bullet that provides link to CSS sample code in Section 2.3. Displayed HTML sample code for Masthead and Search Tool in a box with scrollbars. Code can be viewed or copied directly from the webpage.
Section 3: [FIXED] In HTML sample code, corrected validation error on Search Tool.
Section 3.1: Minor change to link text in first bullet.
Section 3.2: Changed subsection title to be consistent with similar subsections. For accessibility, added text that describes what the images are conveying.

Search Tool

Section 4: Added fifth bullet that provides a link to CSS sample code in Section 2.3.
Section 4: Added link to HTML sample code for the MSU Masthead and Search Tool in Section 3.
Section 4.2: Minor change to link text in first bullet.
Section 4.5: For accessibility, added text that describes what the images are conveying.

Typography (Web Fonts)

Section 5.1: Added new subsection “Overview of Gotham Fonts” that provides extensive information about Gotham fonts — Gotham font overview, the MSU Gotham font license, how to obtain Gotham fonts, resources), acceptable font substitutes for Gotham font and types of Gotham fonts.
Section 5.2: This is the old Section 5.1, renumbered. Content has been enhanced to explain font requirements, provide branding resources and show how CSS is used to implement Gotham fonts in a webpage. Provides CSS sample code that uses Gotham fonts. Provides extensive Gotham font resources.
Section 5.3: This is the old Section 5.2, renumbered.
Section 5.4: This is the old Section 5.3, renumbered. No changes.
Old sections 5.4 through 5.8: Removed sample feature story and font usage requirements — no longer needed.

Other Logos and Marks

No changes

Standard Footer

Section 7: Minor change to text link in second bullet.
Section 7: Added third bullet that provides a link to CSS sample code in Section 2.3.
Section 7: Replaced image with two images that show the revised Standard Footer Nondiscrimination link, with and without site owner telephone number.
Section 7.1: Add third bullet that provides placement information for the four footer page links.
Section 7.1: In fourth bullet, corrected Site Map accessibility requirements — previously the MSU Web Standards stated that every page must be in the Site Map; however WCAG 2.0 Guideline 2.4.5 Multiple Ways only requires that every section be in the Site Map (with additional requirements for sections and individual pages).
Section 7.2: Added new subsection “Footer Elements” that explains the content in each element in the Standard Footer. Subsection 7.2.5 provides information about font sizes and colors, the use of px and rem, and CSS code sample. Subsection 7.2.6 explains the different colors required in footers with light-colored and dark-colored backgrounds.
Section 7.2.4: [BRANDING REVISION] Added new content element “Notice of Nondiscrimination link.” This is a required change to all MSU website footers.
Section 7.2.6: It is strongly recommended that site owners test their website color contrast ratio — use of the University Communications sample code does not guarantee compliance due to variations in website text and background colors.
Section 7.3: This is the old Section 7.2, renumbered. Information not specific to light-colored background footers, such as typography, color and content elements, has been moved to new subsection 7.2. The Standard Footer light-background image has been replaced with one that shows the Nondiscrimination link. HTML sample code is displayed in a box with scrollbars. Code can be viewed or copied and pasted to the site owner’s website. Font size, weight and color (with color swatch) are provided for each content element.
Section 7.3.2 [BRANDING REVISION] As part of the Nondiscrimination footer link change, the font size, weight and color have changed for some footer elements. Changed third bullet — “Medium” is the correct font weight name, not “Bold.” It is recommended that site owners verify that their website footer styles are correct according to 7.3.2 specifications.
Section 7.4: This is the old Section 7.3, renumbered. Information not specific to dark-colored background footers, such as typography, color and content elements, has been moved to new subsection 7.2. The Standard Footer dark-background image has been replaced with one that shows the Nondiscrimination link. HTML sample code has been added in a box with scrollbars. Code can be viewed or copied and pasted to the site owner’s website. Font size, weight and color (with color swatch) are provided for each content element.
Section 7.4.2 [BRANDING REVISION] As part of the Nondiscrimination footer link change, the font size, weight and color have changed for some footer elements. Changed third bullet — “Medium” is the correct font weight name, not “Bold.” It is recommended that site owners verify that their website footer styles are correct according to 7.4.2 specifications.

Coding Guidelines

Section 8.1: For accessibility, added more resources and suggestions for making a website more accessible.
Section 8.2: Fixed minor indentation issue.

Standards for Social Media and Meta Tags

No changes

Maintain a Website Content Plan

Section 10.4: Removed subsection — website owners can search for resources and current best practices on their own.

Web Design Examples

Section 11: Removed paragraphs about examples and case study.
Section 11.1: Added rem units to second bullet. Removed third bullet about where to place navigation — no longer correct. Provided links to two live websites that have implemented the revised Nondiscrimination footer and revised font/color styles.
Sections 11.2 thru 11.7: Removed samples of “before” and “after” branded website examples. These images were useful during the 2015 branding changes for Masthead, Search Tool and Footer but are no longer needed.

Designing for Mobile Devices

Section 12: Minor text changes.
Section 12.1: Subsection title change. Replaced image with one that shows a responsive website in mobile view.
Section 12.1.2: Added image of Standard Footer in mobile view.
Section 12.5: Removed entire subsection. The “lorem ipsum” responsive design prototype no longer embodies current best practices for responsive websites. Downloadable code will no longer be provided by University Communications.

Updates to Web Standards

Section 13: Main section title change to better reflect content.
Section 13.1: [BRANDING REVISION DEADLINE] Deadline for implementing the mandatory Nondiscrimination footer change that was announced at the February 2016 University Communicators Network meeting.
Section 13.2: Stated the procedure for announcements of future MSU Web Standards updates.
Section 13.4: Removed outdated “Special Thanks” section that pertained to the original MSU Web Standards page.

Updates and Change History

Questions

Future Updates

Change History

Page Changes:

Page Changes:

Coding Guidelines

Content Plan

Layout and Style (HTML/CSS)

Mobile Devices

Other Logos and Marks

Resources and Downloads

Social Media and Meta Tags

Typography

Web Design Examples

Updates to Web Standards

Page Changes:

Introduction

Layout and Style (HTML/CSS)

MSU Masthead

Search Tool

Typography

MSU Footer

Coding Guidelines

Web Design Examples

Mobile Devices

Resources and Downloads

Page Changes:

Search Tool

Page Changes:

Web Design Examples

Page Changes:

Coding Guidelines

Page Changes:

Layout and Style (HTML/CSS)

Standard Footer

Page Changes:

Standard Footer

Page Changes:

Top of Page

Layout and Style (HTML/CSS)

MSU Masthead

Web Typography (Fonts)

Standard Footer

Change History

Footer Branding Revision

Page Changes:

Top of Page

Resources and Downloads

Introduction

Layout and Style (HTML/CSS)

MSU Masthead

Search Tool

Typography (Web Fonts)

Other Logos and Marks

Standard Footer

Coding Guidelines

Standards for Social Media and Meta Tags

Maintain a Website Content Plan

Web Design Examples

Designing for Mobile Devices

Updates to Web Standards