s of September 2024, people using mobile devices contribute to 63.38% of all website traffic. There are approximately 4.32 billion active mobile internet users worldwide.

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, and software.

Key Points for Mobile-First Design

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

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, CEO of Google in 2010, announced at a conference that the company would be focusing more on mobile users in their design practices.

Eric Schmidt said:

“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: The number of smartphone mobile network subscriptions worldwide reached almost seven billion in 2023, according to Statista. It’s forecast to exceed 7.7 billion by 2028. China, India, and the United States are the countries with the highest number of smartphone mobile network subscriptions. This 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.

If you’re keeping your eyes on website traffic stats, Google’s algorithm favors mobile-friendly websites.

“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. Last year, we started using mobile-friendliness as a ranking signal on mobile searches. Today we’re announcing that beginning in May, 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 devices, you increase your discoverability, and potentially your conversion rates.

Mobile-first design offers a wealth of opportunities for accessibility experience. See details below…

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. When your designs help people with limited vision, they’ll also help everyone else.
• Hierarchy of information. So mobile-first means content first. That means, putting your most important content assets (i.e. the ones your users want) at the top of 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.

With the big constraint in screen sizes, designing for mobile devices can be a challenge . 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.

Key Points:

• Companies title at the top. This is key in the visual hierarchy. It lets the users know where they are and orientates them to the specific company website and content. Your brand’s logo and name will likely always go on top of any mobile design you create.
• Users see the most important info right away. Leading news agencies 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 news agencies 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.

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.

Toscano writes… “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 at the top of the page.”

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.

Tip #3: KISS (Keep it simple, stupid)

Successful mobile design is simple.

You never want to concern 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 compact visual real estate to only including the things they’re on the page for.

Consider adding 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 designing it for your user, and only your user.

If it doesn’t add value to their experience, you can probably leave it out.

Design better with DesignBetter.co

Discover the world’s best design practices — DesignBetter.Co

DesignBetter.Co is the essential guide to the best design practices from top design experts. Learn how to build a world-class design organization and more.

Design Systems Handbook

Design Thinking Handbook

DesignOps Handbook

Design Leadership Handbook

Enterprise Design Sprints

The Design Better Podcast

Design Better Workshops

Plus much more at designbetter.co.

nyone who is an experienced graphic designer knows how important designing with a grid is. You can create a visual and structural balance within your design using a grid system. Basically designing with a grid is a way of organizing content on a page, using any combination of margins, guides, rows and columns. It has been used for years in newspaper and magazine layouts with columns of text and images and is now commonly used in web design. You can use a combination of grids throughout an entire project to achieve a consistent look and feel. Designing with a solid grid structure will help in creating successful design layouts in both print and web design.

There is no limit to the layout options using a grid system. Grids can range from 3 columns to 16 columns to 24 columns or more. All depending on the framework you are working with for your design. These building blocks, the variation of column widths, borders, page size and other features of the grid will lead to unique page design. Using a grid system will help to position the elements of your design on the page. Once the grid is established, it is up to the designer to decide when and how to break out of it. This doesn’t mean the grid system will be ignored, but elements may cross over from column to column, extend to the end of the page, or extend onto adjacent pages. Breaking out of the grid can lead to the most interesting page designs.

I have found many great resources, blogs and sites related to the Grid System in design. Below are a few of the top links with more detail information about the grid system and using it in graphic and web design.

Reference Links for Grid System in Design

www.thegridsystem.org

960px-grid-templates

www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach

five-simple-steps-to-designing-grid-systems-part-1

960.gs

gridness.net

ow well do you know HTML / CSS / JavaScript? Here is a great resource that will help you add custom design and code to your website, without knowing any code. The site codepen provides sample designs with all related code for each.

CodePen is an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets. It functions as an online code editor and open-source learning environment, where developers can create code snippets, creatively named “pens”, and test them. It was founded in 2012 by full-stack developers Alex Vazquez, Tim Sabat and front-end designer Chris Coyier. Its employees work in a decentralized, remote environment, rarely all meeting together in person. CodePen is one of the largest communities for web designers and developers to showcase their coding skills, with an estimated 330,000 registered users and 16.9 million monthly visitors.

Explore CodePen Topics

CODEPEN.io