Two billion people—51% of the global population—access the internet only from their smartphones. By 2025, that number is expected to jump to 72.5%. So if you’re not designing for mobile, you—and your users—are in trouble. That’s why mobile-first design is a great strategy to employ for all digital products—websites, apps, software, or whatever else.
Let’s go into:
- Defining mobile-first design
- Why is mobile-first design important?
- The connection between mobile-first design and accessibility
- Mobile-first design best practices, plus examples
What is mobile-first design?
Mobile-first design is a design philosophy that aims to create better experiences for users by starting the design process from the smallest of screens: mobile. Designing and prototyping your websites for mobile devices first helps you ensure that your users’ experience is seamless on any device.
[Want more posts like this in your inbox? Sign up for our weekly email digest.]
For example, if a mobile-first designer sits down to prototype or sketch out a website layout, they wouldn’t start sketching a desktop layout. Instead, they’d sketch out how it’d look on mobile, then move onto bigger and bigger screens.
The mobile-first design concept first came into the limelight in 2010 when Eric Schmidt, then-CEO of Google, announced at a conference that the company would be focusing more on mobile users in their design practices.
“What’s really important right now is to get the mobile architecture right. Mobile will ultimately be the way you provision most of your services. The way I like to put it is, the answer should always be mobile-first. You should always put your best team and your best app on your mobile app.”
The reasoning behind this is simple: Mobile design is more limited. After all, you’re designing for a smaller screen and can only fit so many elements into it. That means you choose only what’s most important—what your users need the most—while ignoring everything else.
As you expand your design, you can provide them with other elements, but you know exactly what you need to bring to the forefront.
Why is mobile-first design important?
It’s a matter of numbers: There are projected to be more than 3.5 billion mobile users in 2020, according to Statista. That means the majority of people are using their phones to find the content they need. There’s a big need for mobile-friendly websites out there, and so it’s your job to supply it for your users.
Source: Statista
And, hot tip if you’re keeping your eyes on traffic: Google’s algorithm favors mobile-friendly websites.
From Google:
“Getting good, relevant answers when you search shouldn’t depend on what device you’re using. You should get the best answer possible, whether you’re on a phone, desktop or tablet. […] We started using mobile-friendliness as a ranking signal on mobile searches. […] We’ll start rolling out an update to mobile search results that increases the effect of the ranking signal to help our users find even more pages that are relevant and mobile-friendly.”
That means by providing a good user experience on mobile, you increase your discoverability—not to mention potentially your conversion rates.
And if we’re talking about experience, mobile-first design offers a wealth of opportunities for accessibility. Let’s discuss.
The connection between mobile-first design and accessibility
Here are a few ways mobile-first design and accessible design overlap:
- Small-screen friendly. Mobile-first design pushes you to make your digital products more readable on smaller screens—and therefore more accessible to people who might be hard of seeing. And when your designs help people with limited vision, they’ll also help everyone else. This is classic, “Rising tide raises all ships.”
- Hierarchy of information. As we’ll go into later, mobile-first means content first. That means, putting your most important content assets (i.e. the ones your users want) as soon as possible on your page. This also makes your content accessible to anyone with cognitive disabilities.
3 tips for good mobile-first design
Tip #1: Mobile-first = Content-first
When it comes to mobile-first design, you need to remember one thing: Content is key.
You need to give your users all the content they’re looking for—and only that. Anything else might clutter and distract from your users’ experience.
After all, designing for mobile devices comes with a big constraint in screen sizes. That means you need to take a look at all of your content and present it in a visual hierarchy depending on how important it is to your user.
Only then can you fit the most important elements.
Let’s take a look at an example from the Chicago Tribune mobile website—one of the first newspapers to implement mobile-first design.
What do you notice about this website? A few things:
- Newspaper’s name up top. This is key in the visual hierarchy. It lets the users know where they are and orientates them to the Chicago Tribune’s website and content. Your brand’s logo and name will likely always go on top of any mobile design you create.
- Users see news right away. The Tribune goes all-in on content-first. Most users aren’t coming to their website to check out the about page or privacy policy. They want to read the news, so the newspaper gives it to them.
- Easy-to-reach navigation buttons. The Tribune website stores any extraneous (or less important) content in the hamburger menu up top. That way, if there’s something the user wants to see that isn’t offered right away, they can easily find it there. There is a caveat to this—but we’ll dive more in this in the next tip.
This is ultimately a great example of knowing your website’s visual hierarchy and using it to create a great mobile-first design.
Tip #2: Make it easy to navigate
Condense your secondary elements into easy-to-reach navigational buttons. One tried-and-true method of doing this is by using a hamburger menu.
Hamburger menus are recognizable ways for your user to attain access to secondary elements. If you don’t have one on the page already, chances are your users know to go to the hamburger menu to find what they’re looking for.
This does come with a catch though: low engagement.
According to a study by the user design research firm Nielsen/Norman Group, hidden navigation buttons like hamburger menus decrease content discoverability by 21%.
Not only that, but it also increases the time it takes to use the navigation by an average of two seconds.
Unfortunately, offering all of your possible links at once is unfeasible. Luckily, there’s a way you can get the best of both worlds.
Joe Toscano, an experience design consultant, recommends using combo navigation.
“Combo navigation allows the user to see the options they need the most and makes the rest accessible in a hamburger menu or something similar. […] The site’s content is laid out so well that I don’t need nav buttons. I can scroll the page and get where I want very easily.
One great example comes from Apple’s mobile page where, instead of implementing a hamburger menu that hides options, Apple utilizes combo navigation to present the most important links (“Buy” and TV”) as buttons.”
If you can’t find what you’re looking for, you can always go to the navigation button on the top to see more options.
(Go deeper: 10 pros and cons of hamburger menus)
Tip #3: KISS (Keep it simple, stupid)
Good mobile design is simple.
You never want to burden your users with extraneous elements like ads, pop-ups, and other content they don’t want to see—but especially not on mobile. Limit your limited visual real estate to only including the things they’re on the page for.
A good example of comes from Ramit Sethi’s website IWillTeachYouToBeRich.com. In his blog posts, readers will occasionally get in-context calls-to-action like this one:
The yellow box includes a clear call-to-action that makes sense with the rest of the article. It’s also unobtrusive and adds even more value for the user.
Keep the user in mind
In the end, the most important thing to remember when approaching mobile-first design is that you’re doing it for your user—and only your user.
If it doesn’t add value to their experience, you can probably leave it on the cutting room floor.
[Loved this post? Read more about user-centered design here.]
by Tony Ho Tran
Tony is a content marketing consultant and freelance writer. His work has been seen in Business Insider, MSNBC, Hootsuite, and GrowthLab.
