Change History

MSU Web Standards

Versions are listed chronologically (most recent first).
Links navigate to main sections in MSU Web Standards page.

Version 2.1.1   Updated 2016-04-25

SUMMARY:   Replace obsolete Techbase article link.

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

Version 2.1   Updated 2016-04-25

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 Standard web page.

Top of Page
  • Added Section 14 Change History to Table of Contents.
2. Layout (HTML) and Style (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 validationn 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"] {
3. Michigan State University 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 (non-responsive) 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.
5. Web Typography (Fonts)
  • Section 5.1.3: Minor wording change on 3rd 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".
7. 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".
14. Change History
  • Section 14: Added new main section containing Standards change history information (versions, summary of changes).

Version 2.0   Updated 2016-03-30
(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 web page for copy/paste; 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 Web Standards are announced and published.

Top of Page
  • Added Version number and last updated date.
  • Added Table of Contents with links to each main section of the Web Standards.
Resources and Downloads
  • Removed PDF version of web standards as not necessary - the Web Standards page may be printed or saved as a PDF file.
  • Added links to view and copy CSS and HTML code samples directly from the web page.
  • Added subsection "View and Copy Code Samples" with links to sample code that can be viewed or copied directly from the web page.  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 web page. Separate code samples for responsive and legacy (non-responsive) 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 (.psd) files have changed to reflect the revised branded footer (Nondiscrimination link).
1. 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.
2. Layout (HTML) and Style (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.
3. Michigan State University 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 web page.
  • 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.
4. 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.
5. Web Typography (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 web page. 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 thru 5.8: Removed sample feature story and font usage requirements - no longer needed.
6. Other Logos and Marks
  • No changes
7. 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 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 explain 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.
  • Secton 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 CABS 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 websie 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 websie footer styles are correct according to 7.4.2 specifications.
8. 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.
9. Standards for Social Media and Meta Tags
  • No changes
10. Maintain a Website Content Plan
  • Section 10.4: Removed subsection -- website owners can search for resources and current best practices on their own.
11. 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.
12. 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 CABS.
13. 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 (UCN) meeting.
  • Section 13.2: Stated the procedure for announcements of future Webs Standards updates.
  • Section 13.4: Removed outdated “Special Thanks” section that pertained to the original Web Standards page.