Mobile-first design tips and best practices

Profile picture of Daniel Schwarz

{date}

{#hash1}

{#hash2}

Illustrations by {name}

In a time when our mobile phones are inseparable from our everyday lives, here’s how to craft a user-friendly mobile experience.

6 min read

3D visual of hand holding a mobile phone with the text "mobile-first"

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

Get our latest stories delivered straight to your inbox →

This post was last updated on June 29, 2021.



For the majority of us, our smartphones are the center of our universe. We use them to communicate with one another, watch TV, capture memories, pay bills, order food, keep up to date with the news, run businesses; the list goes on. We’ve come to rely on these devices quite heavily.


In 2021, there are over 7 billion users of mobile devices, and this statistic is expanding. As a result, over 56% of all website traffic comes from smartphones. This means that UX and web designers should be focusing on mobile when designing interfaces.


The mobile-first approach suggests that designers should get started with the smallest screen first. Let’s explore where this idea came from and what it means for designers.



What is mobile-first design?


Mobile-first design is an approach that advocates for starting the web or product design from its mobile version. Since the mobile viewport is usually the smallest, it’s also the most limiting in terms of design. For that reason, mobile web design will only have the most essential elements.


Mobile-first design is also a powerful SEO practice, due to Google’s mobile-first indexing that evaluates websites’ indexing and ranking mostly based on the content of their mobile versions (and not desktop). This is meant to ensure that users receive the same experience on both mobile and desktop, while acknowledging the fact that most site visitors are browsing from their smartphones.



The benefits of a mobile-first design


Firstly, taking a mobile-first approach to UX design makes responsive design easier — so it’ll be easier to cater for devices of all types, screen sizes, and screen resolutions. The two main reasons for this is that designing for the smaller screen requires that we reduce feature bloat by removing any feature that isn’t absolutely necessary. In turn, this also reduces cognitive load for users, so that there isn’t too much ‘happening’ all at once.


After designing a slim, no-more-than-what’s-needed mobile experience, moving onto larger screens is then way easier.


Secondly, with a smaller feature roadmap and a less cluttered user interface, it’s both easier and faster to design, test, and ship, making mobile-first the better option for conducting user testing, where we test our solution.



The debate around mobile-first design


The opposite approach to mobile-first design, often referred to as graceful degradation, claims that it’s preferable to start with the largest breakpoint, meaning the most complex design, which is often the desktop experience. When taking this approach, it’s important not to treat mobile design as an afterthought, but an integral part of the web or product design process.



Tips for creating mobile-first designs


  1. Design for one-handed use

  2. Be inclusive of left-handed users

  3. Take a content-first approach to design

  4. Consider landscape optimization and tablets

  5. Note device hardware capabilities



1. Design for one-handed use


The most-common user uses their mobile device with only one hand. As a user, this isn’t a monumentally difficult task, but there are a couple of instances where this can get quite tricky and lead to users becoming frustrated.


The image below indicates the reachability of various tap regions on an averagely-sized mobile device. Teal areas are the most accessible and redder areas are the least accessible. This problem is accentuated with larger screens, since our thumbs haven’t evolved to enlarge with them (unfortunately!).


Whenever you’re able to, design tap targets within these accessible regions. Specifically, that’s towards the lower-middle region of the screen. Your main navigation should be fixed to the bottom so it’s accessible without getting in the way.



Tap regions reachability using the right hand


2. Be inclusive of left-handed users


Perhaps you’ve noticed that in the image example above, the left-hand side of the screen is slightly more accessible. This is because the heatmap illustration represents that of a right-handed individual. 10-12% of users are left-handed; which, if there are a lot of users, means that a great number of them are lefties.