In web design, there are two basic approaches to a given project: Desktop-first or mobile-first. They’re fairly self-explanatory philosophies; if you’re taking a desktop-first approach, you’re designing around the experience of desktop users, then scaling down the presentation for mobile users. A mobile-first approach starts with a mobile website design, then extends that design for desktop users.
Of course, you’ll need to use a combination of these approaches to build a truly successful product. You want your content to work for all users, regardless of how they access the internet.
And if you focus too much on one group of users, you’ll leave others out of the conversation — particularly users with disabilities. Here’s why.
Why is desktop-first design problematic for accessibility?
There’s a good chance that you’re designing content on a desktop computer, and if that’s a case, a desktop-first philosophy feels intuitive. You’ll have plenty of space to lay out the features that you want, and you can communicate important information to visitors without clogging up their screens.
From an accessibility perspective, this approach has several drawbacks:
- Desktop presentations have more features and functionality. If you build a complex design for desktop users, shrinking the design for smaller viewports may lead to less functionality for mobile users. In other words, content doesn’t reflow.
- Designing for desktop might lead to issues with pointer target sizing and spacing.
- Website performance may suffer. Desktop-first sites are generally more complex, which means more strain on user devices.
In contrast, mobile-first design teaches you to prioritize the important features of your content. You’re forced to think about the features that are truly essential — and when you work with limited screen space, you tend to make design decisions that benefit the user experience.
Related: Five Strategies for Creating an Inclusive Design
Mobile-first websites can also have serious accessibility issues
As a basic rule, it’s a good idea to start with a mobile-first design, then scale up. Adding new features is almost always easier than trimming out features.
With that said, it’s important to recognize the drawbacks of mobile-first design:
- Mobile-first designers may rely on touch- or pointer-based interactions, which aren’t accessible to all users and must be implemented carefully.
- Mobile-first design can be restrictive. Restrictions aren’t always bad for creativity, but an overly simplistic design may fail to engage users.
- While desktop-first provides more space, you’re not required to use that space. It’s certainly possible to build a clean, simple layout on desktop, then scale down to mobile.
Related: Will Digital Accessibility Make My Website Ugly?
Truly responsive websites work better for all users
Whether you’re starting with a desktop-first or mobile-first philosophy, your end goal should be inclusive design: You should provide equivalent experiences for users of all backgrounds and abilities.
That’s achievable when you start with the principles of accessibility. As we’ve discussed in other articles, accessibility is laser-focused on the experiences of individuals with disabilities. That includes people who use assistive technology and people who use devices with smaller viewports.
Inclusive design and accessibility aren’t identical concepts, but they’re closely related. The principles of accessibility can help you ask questions throughout the design process that remove barriers for your users. Most importantly, accessibility helps you build better journeys — and keep people engaged with your content, regardless of how they’re accessing your website or app.
To learn more about those concepts, download our free eBook: Developing the Accessibility Mindset.
