Mobile First

Your constantly-updated definition of Mobile First and collection of videos and articles
239 shares

What is Mobile First?

Mobile first design is an approach that embraces the constraints of smaller screens and focuses on what’s indispensable for users to improve the overall mobile User Experience (UX).

The mobile first design approach involves starting the product design process by designing for the smallest device first and progressively enhancing the design features for larger layouts—e.g., start designing for mobile and then move on to desktop. 

© Interaction Design Foundation, CC BY-SA 4.0

There are other approaches to mobile UX design, like content-first or task-oriented design. Mobile first was initially proposed in 2009 by Luke Wroblewski, Google's Product Director. In his book Mobile First, Wroblewski explains that designing web products, starting with the desktop version, is becoming a backward way of thinking about design. Instead, he suggests adopting the mobile-first approach, which forces the designer to focus and enables innovation.

Progressive Enhancement vs. Graceful Degradation

Mobile first supports itself in the concept of progressive enhancement. This web design strategy emphasizes web content first, providing universal access to essential content and allowing users with additional browser features or faster internet to receive an enhanced version of the same page.

Progressive enhancement shares some commonalities with another well-known web design concept, "graceful degradation." One of them is their goal of making content available for all and how it looks in different browsers. However, the difference is that graceful degradation focuses on designing for the most capable and up-to-date web browsers. At the same time, progressive enhancement is concerned solely with content availability, which is why it is preferred for modern web design.

Mobile First Approach Core Principles

  1. Keep it simple: Consider white space as another design element you can use in your favor. White space enables you to maintain a clean, clutter-free layout that is free of distractions. Similarly, ensure your navigation contains only the most essential items, as human memory can only store between 5 and 9 items.

  2. Visual hierarchy: Mobile first is content-first, so focus on providing a clear and concise experience by prioritizing information. In other words, show your users what content is most important by using headings, paragraphs, captions, and other text styles to get your message across.

  3. Optimize text for visual scanning: Users do not read; they scan. People will look for patterns systematically to make sense of what is in front of them, such as from left to right or top to bottom. You can take advantage of that quirk and position your most important information following a known pattern. Also, add the most critical bits of information above the fold and use short paragraphs no longer than two or three sentences.

  4. Do not use hover effects on mobile, as they are impossible to implement. Instead, use touch or slide events. Furthermore, "think app" and utilize the gestures that users already know.

  5. Leave complex graphs and images for the desktop version: optimize your images so there are no awkward cuts on mobile.

  6. Make your design fat-finger-friendly: this means designing wide tap targets no smaller than 30px (Apple recommends at least 44px). When you create tap elements that are easy to find and click, you are also building a more accessible web environment.

  7. Consider the context of use.

    A mobile first approach is about keeping the user at the forefront of your design efforts and concentrating on delivering content clearly and concisely. This means the content should load before anything else, so ensure your images have appropriate alt-text descriptions, which also helps your website to improve its SEO rankings.

    Information architecture becomes critical when using the mobile first approach, as it helps weed out unnecessary details. You can also use a content inventory document to help you organize and visualize the elements you wish to include.

    Learn More About Mobile First

    Take our course: Mobile UX Design: The Beginner's Guide.

    Read everything about the mobile first approach in Luke Wroblewski's Mobile First book.

    Learn to discern the subtle difference between progressive enhancement and graceful degradation.

Answer a Short Quiz to Earn a Gift

Question 1

What is the main focus of mobile-first design?

1 point towards your gift

Question 2

What design strategy does mobile-first rely on to make sure content is accessible?

1 point towards your gift

Question 3

Why is it important to design wide tap targets in mobile-first design?

1 point towards your gift

Question 4

What should mobile-first design prioritize to improve the user experience?

1 point towards your gift

Question 5

How does simplicity add to the effectiveness of mobile-first design?

1 point towards your gift

Better luck next time!

0 out of 5 questions answered correctly

Do you want to improve your UX / UI Design skills? Join us now

Congratulations! You did amazing

5 out of 5 questions answered correctly

You earned your gift with a perfect score! Let us send it to you.

Letter from IxDF

Check Your Inbox

We’ve emailed your gift to name@email.com.

Do you want to improve your UX / UI Design skills? Join us now

Literature on Mobile First

Here’s the entire UX literature on Mobile First by the Interaction Design Foundation, collated in one place:

Learn more about Mobile First

Take a deep dive into Mobile First with our course Mobile UX Strategy: How to Build Successful Products .

All open-source articles on Mobile First

Please check the value and try again.

Open Access—Link to us!

We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.

If you want this to change, , link to us, or join us to help us democratize design knowledge!

Share Knowledge, Get Respect!

Share on:

or copy link

Cite according to academic standards

Simply copy and paste the text below into your bibliographic reference list, onto your blog, or anywhere else. You can also just hyperlink to this page.

Interaction Design Foundation - IxDF. (2016, June 4). What is Mobile First?. Interaction Design Foundation - IxDF.

New to UX Design? We’re Giving You a Free ebook!

The Basics of User Experience Design

Download our free ebook The Basics of User Experience Design to learn about core concepts of UX design.

In 9 chapters, we’ll cover: conducting user interviews, design thinking, interaction design, mobile UX design, usability, UX research, and many more!

A valid email address is required.
316,626 designers enjoy our newsletter—sure you don’t want to receive it?