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
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.
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.
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.
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.
Leave complex graphs and images for the desktop version: optimize your images so there are no awkward cuts on mobile.
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.
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.
