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
01. 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.
02. 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.
Taking that into account, place important or contextual tap targets towards the vertical middle, and not so much the left or right.
03. Take a content-first approach to design
Due to the more limited real estate on mobile devices, it’s important to take a content-first approach when designing mobile-first. This helps structure the design around its core, essential message, while preventing clutter and unnecessary distractions that might arise when choosing to downsize an existing desktop design. (Hamburger menus, for instance, are a good solution for condensed spaces.)
A simple mobile design that’s focused on the most essential content helps create clarity for users as well as for bots.
04. Consider landscape optimization
Landscape orientation is most common in tablet devices. Examples of where tablets are often used include: PoS (Point Of Sale) apps, SaaS (Software as a Service) apps, sketching apps, and more.
When resizing images and optimizing for landscape orientation, be wary of elements that take up too much vertical space, forcing important elements outside of the viewport, either partially or completely.
Continuing on the topic of tablets is that the thumb reach is obviously different here than in mobile, especially with landscape orientation. Tablet use is mostly handheld, similar to mobile devices. Be sure to test your design for handheld use, and ensure that you have a variety of devices at-hand to test with.
05. Note device hardware capabilities
Another important feature about designing for mobile devices is that the hardware capabilities are different from desktop. This is because mobile devices come with a unique set of usability-related challenges. For example, typing on a mobile device is naturally much more difficult than it is on a desktop device.
Designers should leverage these capabilities to help users overcome these challenges. Here are a couple of comparisons:
Online forms: Desktop: Filling out address forms Mobile: Auto-filling addresses using GPS
Credit card information: Desktop: Typing credit card information Mobile: ‘Scanning’ cards using the camera
There are many more mobile functionality use-cases available — GPS functionality, QR code functionality, camera functionality, and so on. These are all super useful in a wide variety of use-cases where traditional interactions, like using the keyboard, aren’t mobile-friendly.
Usability testing with mobile prototypes
The topics covered here may all sound great on paper, but what’s the best way to ensure that their implementation can quantifiably improve the user experience of our designs?
Measuring performance not only shows that we’re on the right track, but also proves to stakeholders that certain demographics (such as left-handed users, users with disabilities, or simply even mobile users as a whole) are worth catering and advocating for.
Clickability testing
Clickability testing is crucial when designing for mobile devices, especially because some features behave on mobile, such as hover states. This can be done either via clickmap testing or visual affordance testing:
Clickmap testing: A clickmap is a type of heatmap that specifically shows what users are and aren’t clicking on. While this type of usability test isn’t rock-solid, it can reveal tap targets that don’t appear to be very clickable. If this happens to be the case, then follow up with a visual affordance test, which is more reliable.
Suitable user/usability testing tools include:
Visual affordance testing: Visual affordance testing involves asking users to circle the elements that they think are clickable, and then, the elements that they think aren’t clickable. Pretty much any tool that enables usability testers to sketch over static mockups of our designs (for example, Miro or InVision Freehand), will work fine here.
Remember, hover states don’t quite work the same way on mobile devices, so clickability testing either via the use of clickmaps or visual affordance testing is super important when designing for mobile devices.
Functional salience testing
Functional salience testing involves asking users which tasks and features they consider to be important. This is instrumental for finding out which visual elements to prioritize when screen real estate grows scarce on mobile devices.
Functional salience testing is usually conducted early on in the design process. However, we can also use it to identify feature bloating issues with designs that already exist and aren’t working all that well.
Generally speaking, designing for mobile devices is just as important than designing for desktop devices, if not more so.
So whether you’re designing a responsive website or a platform-specific mobile application, make sure to cater for users of all abilities and preferences, using devices of all types, sizes, and resolutions using the mobile-first approach.
Always leverage usability tests to your advantage — this includes those mentioned above, but also everyday performance testing, where we test how effectively users are able to carry out the main tasks or our app or website using our design.
Once you've finalized your mobile site design, you can move on to larger breakpoints and plan desktop-specific effects like these custom cursor examples.
