Mobile-first refers to a design process that prioritizes smaller screen sizes over larger ones.
So rather than the traditional approach that starts with designing for the desktop followed by condensing the design towards a single column, it begins with designing for the small screen first, and then adapting—if necessary—to fill the space of a larger screen.
Designing for mobile first has many advantages. Working with less screen real estate, helps drive focus to the core features and experience. It also helps optimize performance by minimizing the need to fill space, as well as accounting for target size (minimum or enhanced). For engineers, the columnar arrangement provides more direction for how to order the source code, which directly relates to tab navigation, the user experience with screen readers, and what they announce first.
For many users, mobile devices are the primary means for people to access the internet and public services. Many users may also have limited data. Using a mobile-first approach helps prioritize these users’ needs, but will ultimately benefit everyone by enhancing simplicity and focus.
“But Nobody Will Use This on a Mobile Device”
Mobile-first is not only about support for mobile devices. It has major accessibility implications for ALL devices.
Some applications will never be used on a mobile device—usually due to a specific context for which the application is designed to be used or because of constraints related to authentication methods such as those that require ID cards. In these circumstances, it might seem unnecessary to account for mobile device layouts. However, mobile layouts are still required because of how they relate to the browser’s accessibility features.
Users might need to use a narrow window, increase the page zoom, or both. All of which invoke the “mobile” layout as horizontal real estate becomes less available. If the application is no longer usable and does not reflow when the page zoom is increased to 400%, this is a failure of WCAG Success Criterion 1.4.14 Reflow.
Remediation can be expensive and may require entire parts of the application to be redesigned and rebuilt, which is why it is so important to always use a mobile-first approach.
How We Know We’re Doing This
- Our design concepts start with a narrow screen as the basis, and expand for wider screens
- We make considerations for screens smaller than 320px, and for users on mobile devices with large font preference settings
- Our engineers write code for mobile first, then place desktop styles inside media queries
- Our photo use is limited, with a preference for SVG illustrations
How We Know We’re Coming up Short
- Our design team starts with desktop, and then translates those design for mobile
- Our engineers write code for desktop first, then place mobile styles inside media queries
- Our designs use many large photos