Popular related searches

Filters

Mobile First

Your constantly-updated definition of Mobile First and collection of topical content and literature

What is Mobile First?

Mobile-first is an approach to web design that aims at simplicity and minimalism by prioritizing content. The approach aims to improve the user experience by embracing the constraints of designing for smaller screens and focusing on what’s indispensable for users.

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

It 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 being 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.

    Applying the 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.



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 Design Thinking: The Ultimate Guide .

Some of the world’s leading brands, such as Apple, Google, Samsung, and General Electric, have rapidly adopted the design thinking approach, and design thinking is being taught at leading universities around the world, including Stanford d.school, Harvard, and MIT. What is design thinking, and why is it so popular and effective?

Design Thinking is not exclusive to designers—all great innovators in literature, art, music, science, engineering and business have practiced it. So, why call it Design Thinking? Well, that’s because design work processes help us systematically extract, teach, learn and apply human-centered techniques to solve problems in a creative and innovative way—in our designs, businesses, countries and lives. And that’s what makes it so special.

The overall goal of this design thinking course is to help you design better products, services, processes, strategies, spaces, architecture, and experiences. Design thinking helps you and your team develop practical and innovative solutions for your problems. It is a human-focused, prototype-driven, innovative design process. Through this course, you will develop a solid understanding of the fundamental phases and methods in design thinking, and you will learn how to implement your newfound knowledge in your professional work life. We will give you lots of examples; we will go into case studies, videos, and other useful material, all of which will help you dive further into design thinking. In fact, this course also includes exclusive video content that we've produced in partnership with design leaders like Alan Dix, William Hudson and Frank Spillers!

This course contains a series of practical exercises that build on one another to create a complete design thinking project. The exercises are optional, but you’ll get invaluable hands-on experience with the methods you encounter in this course if you complete them, because they will teach you to take your first steps as a design thinking practitioner. What’s equally important is you can use your work as a case study for your portfolio to showcase your abilities to future employers! A portfolio is essential if you want to step into or move ahead in a career in the world of human-centered design.

Design thinking methods and strategies belong at every level of the design process. However, design thinking is not an exclusive property of designers—all great innovators in literature, art, music, science, engineering, and business have practiced it. What’s special about design thinking is that designers and designers’ work processes can help us systematically extract, teach, learn, and apply these human-centered techniques in solving problems in a creative and innovative way—in our designs, in our businesses, in our countries, and in our lives.

That means that design thinking is not only for designers but also for creative employees, freelancers, and business leaders. It’s for anyone who seeks to infuse an approach to innovation that is powerful, effective and broadly accessible, one that can be integrated into every level of an organization, product, or service so as to drive new alternatives for businesses and society.

You earn a verifiable and industry-trusted Course Certificate once you complete the course. You can highlight them on your resume, CV, LinkedIn profile or your website.

All Literature

Please check the value and try again.