Is Mobile First Always The Best Approach?

Mobile-first design is a term thrown around a lot in the UI and web design industries, but there often need to be more clarity about what it is and why you should use it.

Mobile-first isn't always easy to implement, and if your website or application also needs to operate on desktop, it can end up looking poor. There are a few considerations we've picked up from designing dozens of mobile-first products that we wanted to share in this article!

Mobile-first Design Strategy: When, Why and How

It's 2022, and users are staunchly intolerant of any user interface design that doesn't look good and work properly on all screen sizes. Whether the user is on a desktop, an iPad, or a mobile phone, they expect their browsing experience to be flawless.

Any designer worth their salt will start creating a new website or application in a platform like Figma or Sketch (or Adobe XD if they're afraid of the "new" options). They need to pick one screen size to determine how everything will come together. Traditionally, this resolution has been 1920x1080 or 1366x768, because that's the size of a desktop monitor or a laptop. This idea was challenged when mobile phones enabled web browsing.

Mobile-first design means that you begin by designing for mobile devices and then expand that to be compatible with tablets, laptops and desktop resolutions. While it will ideally look great on all screen sizes, the first design you create is usually the best.

Mobile devices are by far the most widely used for web browsing and as such, are what designers should begin with. They make up around 60% of all web searches, which has increased from 30% in 2015, so we expect it to rise even more over the next few years.

Importance of mobile-first Design

eCommerce, or any website that sells stuff, is an area where it's essential to have a strong mobile design. Online stores want to make the buying process as quick and easy as possible for customers so they have less time to back out of a purchase. This principle is tied to improving conversion rates, and successful stores will go to long lengths to maximise how many customers purchase.

Mobile-first design ensures that any customer shopping from their phone can find the most relevant products in your online store and decide whether to make a purchase. There are a lot of forces that make mobile experiences feel more difficult, so mobile-first allows a chance to think through these carefully and intentionally.

Any information-based content can benefit from mobile-first design. It can help keep users engaged for longer amounts of time. This is particularly beneficial if you're a blogger who generates revenue from ads or a small business trying to find new clients. By keeping mobile users on your site for longer, you're likely to increase the chance they click on an ad or read something that persuades them to give you their business.

Mobile devices are small and often much more challenging to use than desktops and tablets. A good design that focuses on these less user-friendly devices is essential to keep visitors interested and moving through the conversion process.

Mobile-first is content first

Mobile-first design revolves around the notion that content is key. Designing for smaller screens is all about avoiding clutter and building minimalistic user interfaces so that the user's focus is directed to only the most important things. Only information that is relevant to the user should be featured.

Designing something that looks awesome and is functional for mobile is restricted by the fact that the device is very small, and there's not much bandwidth to work with. As a result, the mobile design can lean towards removing everything that's not "mission critical". This purging often doesn't consider the fact that the content defines the needs of the user and what elements should appear in the UI. Desktop designs have the luxury of including everything. Mobile designs should include tools that are contextually relevant to the content within the view.

For example, a sunglasses eCommerce store desktop design might feature a tall list of filters like face type, price range, brand, purpose and colour. It may also feature a search bar and a ton of white space to make everything look clean. Mobile users will need all of these features but the available real estate is reduced, so the design needs to take a different approach. The point is that the design should always ask, "does a mobile user need this feature" and adjust the UI accordingly.

Challenges of mobile-first

Mobile-first can yield some great results and produce nicely polished designs on smaller screens, but it can be a painful methodology to follow. Here are the drawbacks:

Clients want to see desktop design

Unless the product is a mobile app, the product owner or client will want to know what the design looks like on desktop as well as mobile. This means creating two designs, which can slow things down at the start of the project.

Limited space means limited creativity

There's not much room for playing around with cool design implementations with mobile-first. It's usually a case of trying to pack all the important pieces in as cleanly as possible.

Mobile users don't like it bright

Colours are one of the early considerations in an attractive product design. If your user base are largely on mobile devices, the colour pallet needs to consider that mobile users turn their brightness down which can cause accessibility issues.

Expanding a design is difficult

Expanding a small design into a full 4k resolution is difficult. There's a lot of empty space to fill with elements that were originally designed for mobile.

Keeping the design system organised

At the start of most projects, we'll create a design system of buttons, inputs, modals, navigation items, and all the atomic pieces that make up the design. These pieces need to be different between mobile and desktop, and maintaining two versions of a design system can be a bit of a headache.

Mobile-first design principles

Visual Hierarchy

Visual hierarchy is the idea that elements in a UI should be arranged in a way that draws the user's eyes to the most important parts first so that they're guided towards performing the desired action. Achieving the right visual hierarchy involves a combination of various factors:

• Size: Users will be drawn to larger text or elements first.
• Colour: Brighter, bolder colours are more appealing (black is more appealing than grey and red is more attractive than pink).
• Position: An element that breaks the alignment of a page's other elements will stand out (a centred heading vs left-aligned paragraphs).
• Contrast: Colours that stand out against their background will be more eye-catching (on a white background, black stands out more than grey).

The main heading (H1) on a simple website will often be the most important information. For this reason, designers will make it a colour that stands out from the background (like black) and will position it in the centre of the page. Smaller headings (H2s) can then be more subtle colours (like grey) and be smaller in size. This creates a visual hierarchy where the user is first appealed to the H1, and then to the H2.

Simplicity is key

When designing UIs for mobile devices, one of the most fundamental things to keep in mind is simplicity. You can't afford to clutter pages with unnecessary elements.

Make Call To Actions (CTAs) stand out

It's easy for CTAs to become lost amongst all the other content. This can create a barrier for users who may be interested in becoming a customer but cannot see where they can take the next steps easily.

Making sure that your CTAs are bold, bright and consistent can make them more easily noticeable by the user without taking over the whole UI. It can be as simple as using a unique colour for CTA buttons and making sure that colour is used globally across your website or app. Some of the best colours to use for CTAs are:

• Red: This is often the best. It stands out from most backgrounds and will complement a lot of other colours.
• Orange: Orange is also a great choice, and is similar to red in its benefits.
• Green: While it does stand out, it will blend in with some backgrounds a little too much.
• Yellow: Stands out from darker backgrounds, but may cause eye strain to the user.

Some colours that you should usually avoid for CTAs are black, brown, white and grey. These colours are associated with text, so they'll often be overlooked by users.

Keep things lightweight

Creating a UI that is lightweight can increase engagement and reduce bounce rates. Follow these principals in order to reduce the weight of your site:

• Smaller images (and modern formats like webp)
• Adding the most important elements at the top and lazy loading the less important content later on
• Font and colour minimalisation - the more font varieties, the more files have to be loaded. Similarly, colours use more data
• Reducing visible content so it can be lazy loaded (i.e. menus, filters, controls)

Mobile-first design process

1. Define your content requirements

The first thing to do in mobile-first design is to determine what information you need to include. Consider what message you're trying to convey to the user and what you need to do to get that message across. How much content will you have? Is it going to be a large project, or just a single-page application? From there, you can roughly organise content into sections and pages to start deciding on the elements that can go into your design.

2. Create wireframes

Wireframes are a skeleton for the general layout and structure of a UI. There is enough detail to provide an idea of what the completed design will look like.

3. Mockups and testing

When you're happy with the wireframes, you can start adding some detail and colour to create mockups. Mockups are essentially a full UI, minus the interactive aspects. In other words, a static UI. They'll provide even more of an idea of what a design will look like before development begins.

Responsive Web Design (RWD) vs Adaptive Web Design (AWD)

RWD and AWD are terms that are often used interchangeably, but they are actually quite different. The key difference lies in how the UI changes with different screen sizes.

RWD is very fluid. The way content is displayed to the user changes consistently as the screen size gets bigger or smaller, and it usually does this by containing elements in rows and columns. As a screen gets wider, the elements change in terms of the column they're nested in. As screens get taller, elements change in terms of their rows.

On the other hand, AWD does not consistently change how content is displayed. Instead, the layout of UI shifts once a certain screen size is met (these are called breakpoints). For example, you might set a breakpoint to change from a mobile-focused design to a tablet-focused design and then another one to expand into a desktop design. Some common breakpoints are:

• 320px - 480px for mobile devices.
• 481px - 768px for tablets.
• 769px - 1024px for laptops.
• 1025px - 1200px for desktops.
• 1201px+ for widescreens and TVs.

This means that for screens larger than, say, 769px but smaller than 1024px, the UI will adapt to be more appropriate for laptops.

Reasons to design mobile-first

1. Search Engine Ranking Priority

If you want your website to rank better in search engines, mobile-first design is vital. Google and other search engines are moving towards priotising websites that have a good mobile experience

2. Easy navigation

Creating websites and apps that let users quickly and easily find what they're looking for is a key part of UX design. With a mobile-first design, you can create a much better user navigation experience on small devices.

3. User-friendliness

When a design is scaled down and shoved into a smaller screen, it can often become cramped, confusing and frustrating to use. Since smaller screens are generally a little harder to create user-friendly UIs for, you start with them to ensure it works properly while maintaining a consistent style across all device types.

FAQ:

Q: How can I implement mobile-first approach in product design?

A: The mobile-first approach can be implemented in product design the same way it is for website design. Pick a target mobile resolution and build your wireframes to that aspect. Extend the wireframes into a prototype and, ultimately a high-fidelity design.

Q: Is mobile-first always the best option?

Mobile first is harder to get right. Getting feedback from clients is more difficult because they'll typically be on a laptop when reviewing the design instead of the target device.

Besides this, the general rule of thumb is to design for the device the majority of customers will use. If that's going to be mobile devices, then mobile-first will be the best option.

Conclusion

Mobile-first design is an approach that involves creating user interfaces on a mobile scale first, and then expanding that initial design to larger devices like tablets and desktops. It eliminates many of the issues associated with scaling down from desktop to mobile, such as difficult navigation, more usability and slow load times.

Do you have any questions about mobile-first design? Leave them in the comments below and our team will respond in a day or two.