Jump to HeaderJump to Main ContentJump to Footer
Digital Experience Studio
  • Experience Program
  • Experience Design
  • Website Technology
  • Social Media
  • Analytics
  • News and Events

< Experience Program

  • Website Project Process
  • Working with a Vendor
  • Glossary
  • Taxonomy Data Dictionary

< Experience Design

  • Website Strategy
  • Website Structure
  • Information Architecture and Navigation
  • User-Centered Design Conventions
  • Common UX Issues
  • Enterprise Design System
  • Content Planning
  • Creating Accessible Content
  • Taxonomy and Filters

< Website Technology

  • Web Standards
  • Search Engine Optimization
  • Cascade CMS
  • Sitecore CMS
  • Content Hub Overview
  • Content Hub DAM
  • Content Hub Operations

SitecoreAI

Sitecore user login

< Social Media

  • Alt Text Bookmarklet
  • Meta Ad Pixel
  • Social Media and Web Integration
  • Sprinklr

Sprinklr

Sprinklr user login

< Analytics

  • Google Analytics (GA4)
  • Testing
  • Data Visualization

Google Analytics

Google Analytics user login

< News and Events

  • News and Updates
  • Events and Trainings

MSU Tools and Resources

  • A to Z Index
  • Find People
  • Email
  • Tech Support
  • Social Media Directory
Michigan State University
Michigan State University
Digital Experience Studio

University Communications and Marketing

Digital Experience Studio

  • Experience Program
    • Website Project Process
    • Working with a Vendor
    • Glossary
    • Taxonomy Data Dictionary
  • |
  • Experience Design
    • Website Strategy
    • Website Structure
    • Information Architecture and Navigation
    • User-Centered Design Conventions
    • Common UX Issues
    • Enterprise Design System
    • Content Planning
    • Creating Accessible Content
    • Taxonomy and Filters
  • |
  • Website Technology
    • Web Standards
    • Search Engine Optimization
    • Cascade CMS
    • Sitecore CMS
    • Content Hub Overview
    • Content Hub DAM
    • Content Hub Operations

    SitecoreAI

    Sitecore user login
  • |
  • Social Media
    • Alt Text Bookmarklet
    • Meta Ad Pixel
    • Social Media and Web Integration
    • Sprinklr

    Sprinklr

    Sprinklr user login
  • |
  • Analytics
    • Google Analytics (GA4)
    • Testing
    • Data Visualization

    Google Analytics

    Google Analytics user login
  • |
  • News and Events
    • News and Updates
    • Events and Trainings

University Communications and Marketing

Digital Experience Studio > Website Technology > Website Standards and Best Practices >

Mobile-First Design

Mobile-First Design

A substantial portion of the website traffic to main university websites comes from mobile devices. It is likely that a significant portion of website visitors on any given website are accessing the content on a smartphone or tablet. It is considered a best practice to initiate web design with the mobile layout first and then design the desktop layout. 

Percentage of total website visitors by device used, June 2025 to July 2026

Communications Resources

  • University Communications and Marketing
  • University Trademarks and Licensing
  • MSU Brand Studio
  • MSU Editorial Style Guide
  • MSU Photos

Contact us

517-355-7505

Address

Michigan State University 408 West Circle Drive East Lansing, MI 48824

Follow Us

  • Visit our Facebook page
  • Visit our page on X
  • Visit our Instagram page
  • Visit our LinkedIn page
  • Visit our YouTube page
  • Visit our TikTok page

If you're having accessibility issues, please let us know.

Know MoreTransparency Reporting: Budget & Salary/Compensation
  • Contact Information|
  • Site Map|
  • Privacy Statement|
  • Site Accessibility|
  • Call MSU: (517) 355-1855|
  • Visit: msu.edu|
  • Notice of Nondiscrimination|

SPARTANS WILL|© Michigan State University|

Mobile Design Best Practices

  • Start with mobile layout first when creating a new website design.
  • Place essential information and actions in upper portions of the layout.
  • Style navigation and headings consistently on mobile and desktop.
  • Style and position text and user interface labels to be visually distinct from one another.
  • Use simple interfaces and interactivity.
  • Make user interface components large enough to touch on a touchscreen device (48x48 pixels minimum).
  • Evaluate and test download speeds. More fonts and images mean slower load time.
  • Evaluate and test displays at common device breakpoint screen sizes. 

Accommodate Brand Requirements on Mobile

  • Units may need to adjust layout for masthead, website title, search tool and standard legal on mobile devices. See relevant component pages under “Brand Standards,” above, for more information.
  • Creating new and innovative mobile designs is encouraged.
  • MSU Web Standards will be updated regularly to include new solutions.
  • Please work with University Communications to address questions about required elements on mobile.
Perk of using Sitecore: The SitecoreAI system enables design adaptations for various devices. Users can also preview websites on simulated desktop, tablet and mobile displays. This helps ensure a quality experience for audiences, regardless of which device they use to visit the website.