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

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

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