Skip navigation links
Digital Experience Studio > Website Technology > Website Standards and Best Practices >

Updates and Change History

Updates and Change History

Questions

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

Future Updates

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).

Change History

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: 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)

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)

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)

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)

Updates to Web Standards

(Previously labeled section 13)

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.
Website Standards and Best Practices