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.

Device use by website visitors, August 2023 to April 2024

Browser	Percentage of Total Users
Browser	msu.edu	MSUToday.msu.edu
Desktop	61.48%	39.06%
Mobile	37.62%	57.77%
Tablet	1.30%	3.04%
Smart TV	0.01%	0.01%

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 Sitecore XM Cloud 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.