Mobile First Design. What is it, and how it supports sustainability?

Have you ever thought about how many times daily you grab your phone? How many hours per day do you spend using mobile apps, browsing the internet, and communicating with others? As you can guess, a lot of time. On average, people spend at least 5 hours per day on their phones. It's a high possibility that you even read this text via your smartphone.

Phones today are no longer only devices for calling and messaging. Most of us can't imagine life without smartphones as they become small computers and digital windows to see and manage our personal world, where we keep and create all important notes and pictures, work on them, learn, and entertain ourselves.

In 2022 the world population number turned its first number spectacularly, realizing that there are 8 billion people worldwide. Even more surprising can be the fact that 6.65 billion of them are smartphone users. Without a doubt, this rapidly rising number should be a game changer in the design world. We should stop to think and create from the device perspective and look carefully at the mobile user and their real needs. Mobile-first approach comes here in handy.

In this article, we'll explain a mobile-first strategy and why it's important both from your business perspective and for your users. We'll also show how you can implement a mobile-first design in your product design to create more sustainable solutions.

If you already have a website, check with this Google tool if it's mobile-friendly. According to the results, you can decide if your website needs improvement and adjustment to optimal user experience.

What Is a Mobile-first Approach (MFA)?

Mobile-first design is a new way of thinking about web design. Even if the mobile-first design has been around for over ten years, its popularity rises yearly with the number of smartphone users and their behavior changing while using them. Nowadays, mobile-first can be described better not as a new way of designing but approach applied to design, which could also be called user-first design or content-first design approach.

In this approach, it is not only to make sure your website works well across different devices but also that it's easy to navigate and use. That means you need to consider what kind of content your users will want to see and how they'll want to find it on their phones or tablets.

The mobile-first strategy in web design starts with designing for mobile, then making changes to accommodate desktop users. This method results in a better user experience that increases your website conversion and revenue, and besides, it helps save you money and time in new website development costs.

Fueled by capable devices and faster networks, mobile internet usage is exploding. Building mobile first not only positions you to take advantage of this growth, it also opens up new opportunities for engaging your customers.

Luke Wroblewski, "Mobile First", A Book Apart 2011

Why Was Mobile-First Design Created? Progressive Advancement vs. Graceful Degradation

Mobile first design strategy is naturally a consequence of technology development. In the past, websites were designed with a desktop experience in mind and then "downsized" to fit the mobile screen. That was a graceful degradation where web designers with "all-inclusive" attitudes started to design websites. They wanted to enrich the desktop version with its complexity, features, and well-rounded content. Then, in the design process of degrading and adjusting to smaller screens of tablets and mobiles, they reduced their functions and content to fit them better.

Mobile-first stems from the opposite strategy of progressive advancement. In this approach, rather than developing every feature from scratch, a web page is built using a baseline of all browser (and browser version) supported features. As the web page becomes more advanced, more advanced features, such as layers, are added to take advantage of the capabilities of newer browsers. So progressive advancement takes into account first relatively lower browser, like those on the mobile with basic features and functions. Then it advances its version to tablets and PC by adding more functionalities, interactions, and effects. To sum up, the second design strategy is focused more on the final user experience, which responds to the user's behaviors and habits while browsing the internet.

So, even if this strategy existed before, in 2010, Luke Wroblewski introduced people to a "mobile-first approach." In his presentation at the conference at An Event Apart Seattle, he dug into the three key reasons to consider mobile first in product design: the explosive growth of mobile, mobile forcing users to focus, and mobile extending users' capabilities.

Luke Wroblewski developed this approach in the book Mobile First, published in 2011 in A Book Apart (you can read it there for free). He wrote there that the "mobile-first" approach has three main benefits:

• It forces you to prioritize the content most important to your users. When designing for a smaller screen, you have less room to play around with fancy animations and graphics. You have to focus on primary things and what matters most to your users: getting them the information they need when they need it.
• It helps you create digital experiences better suited to your audience's needs. Suppose you're designing something like a progressive web apps, application for mobile or e-commerce site. In that case, the people using it aren't necessarily going to be sitting at a desk with a laptop or desktop computer—they might be walking down the street or riding in a car! Focusing on mobile first ensures that your product or service is designed specifically with these circumstances in mind.
• It makes your company more competitive by helping attract new customers.

The mobile-first approach appeared at the same time in the strategies of great tech companies. In 2010, the CEO of Google, Eric Schmidt, summarized his vision for the future of mobile computing in his keynote address at Mobile World Congress in Barcelona, Spain: Mobile first:

Here, right now, we understand the new rule is ‘mobile first’ in everything. Perhaps the phrase should be ‘mobile first’ simply because it’s time to be proud of what we have built together. Our job is to make mobile be the answer to everything.

Eric Schmidt

CEO at Google

What Is The Difference Between Mobile-First Design And Responsive Design?

In the past, designers and developers dealt with the challenge of one website and too many sized screens. They even invented the mobile-only view under the famous web address that looked like m.website.com. It was a solution, but it wasn't easy to maintain.

In 2010 Ethan Marcotte introduced a new methodology called "responsive web design" (however, it is worth mentioning that this concept has existed since 2007).

Responsive web design (RWD) method allowed the web to adapt automatically to different devices' screens, displaying content so people would feel comfortable using it. Users no longer have to perform panning, zooming, and scrolling when browsing the web. According to responsive web design, all the chunks of a desktop-sized webpage are rearranged, so they stack neatly within a mobile viewport. The main task of a web developer is to set the breakpoints, which show where the screen sizes and views have to change, and tell each chunk where it should appear on different screen sizes.

Why is a mobile-first design approach better than a responsive design?

Over time, websites became obese with their content and, at the same time, cumbersome. That means that in responsive design, the user is often forced to scroll through "well-fitted" content-overloaded websites changing their mobile experience into hell and leaving them frustrated in searching for the needed content.

Designing and developing the website under the mobile-first idea means that design includes only important elements, and the website layout is reduced to prioritize features and smaller devices.

Why is Mobile-First Design Important?

Why should you consider mobile first while making a website? Several reasons can convince us to change the design method applied to the mobile version of the website.

• The number of people accessing the internet via their smartphones will reach close to three-quarters (72.6 percent) by 2025. And as World Advertising Research Center (WARC) estimates, right now, 2 billion users access the internet only via smartphones.
• Mobile-friendly websites nowadays are a must-have for every well-prospering business. Having a mobile-friendly website increases customer retention and shopping.
• The use of mobile internet exceeded that of desktop internet in 2016.
• Earlier, in 2012, smartphone sales overtook PC sales.
• Web traffic on mobile devices rises every year. More users mean more needs to turn the focal point into what users will expect while browsing the mobile version of the website.

Users' and customers' behaviors are changing rapidly. Year by year, we owe our lives much more to mobile devices, and we use them in different places and circumstances. They are with us while commuting, working, having a party, and even when we are in the toilet (sic!). So it's not simply a smartphone anymore. Its handheld computer serves as a wallet, television, calendar, audio and video recorder, guide, and knowledge database for every question we have.

Changing the design method for a mobile-first approach means building a successful business strategy based on reaching more customers that use their phones or tablets as their primary way to browse the web. It also helps you remain competitive by allowing your customers to access your site from anywhere, anytime, on any device they choose — whether at home, work, commuting, or working on day-to-day things.

Mobile-Friendly Website Design - Benefits

There are a bunch of benefits you can enjoy when you create a mobile-first website:

• Compared to desktop approach, mobile-friendly websites are easier to navigate and faster to load. You can increase page speed and website performance by designing the first mobile design. And when our website performs better, you can expect better web traffic and conversion rates.
• Mobile-first web design is more likely to be found by search engines, especially those popular ones. Google's algorithm loves websites that are fast and well-optimized across devices. Thanks to the mobile version of your website, you improve the SEO, and your mobile-first indexing is much higher in SERP ranks.
• Research shows that users spend more time on mobile devices than on any other platform, and their expectations are higher. On average, internet users check their phones 58 times a day. However, it can be even more in the generation of GenZ, GenX, and Millennials. Mobile-first design helps you create a better user experience that keeps your users and customers returning for more!
• Another significant benefit is that it allows you to focus on what your users need and want from your site rather than what they expect or are used to seeing on other sites. Mobile first can help you stand out from competitors by giving visitors an experience that feels unique and tailored specifically for them.
• Mobile-first often means accessibility-first. The well-optimized mobile view makes your website more accessible to users browsing it on their phones or tablets. If you use responsive web design, then you're already doing this!

How is Mobile First Design More Sustainable?

Becoming more sustainable is another significant benefit of going mobile-first with your website. Why?

With a mobile-first approach, website owners must consider the most important content and features for users with small screens or low bandwidth.

• Displaying less content consumes less energy. Space restrictions impact positively. Compared to desktop design, mobile view and content must be prioritized rather than cut from its wider version. So the rule less is more described in our manifesto works here as well!
• Mobile-first design has to be easy to read. It should contain a lot of white space to enlarge the touchable targets like buttons, links, and icons to make them more achievable. So navigation is much more studied here than on desktops and reduced to the most important actions. And when there are fewer steps involved, it takes less energy to complete core tasks.
• Mobile browsing is more sustainable than desktops because using smartphones, especially with modern OLED screens, is less energy-consuming, making the overall experience more sustainable and planet-friendly.

10 Best Practices For Mobile-First Design Process

These design principles and best practices are important when designing for mobile first and also help us achieve sustainable results:

1. Establish a page weight budget to limit the size of pages.

It would help you keep the content within boundaries and change your attitude to focus more on reducing, not adding.

2. Put the users at the forefront of your web design.

Your design has to respond to user needs. Look at what kind of problem you can solve with your design. Take time for an afterthought about who your users are and in what circumstances they use your mobile version - is it at home, in the car, commuting, at work, or other situations.

3. Use minimal navigation.

People often visit your website on their mobile devices with only one goal: finding information quickly and easily. For example, suppose we design the website for a restaurant. In that case, we will not show users at the top of the mobile view restaurant gallery but rather the operating hours and menu.

Information architecture on mobile is fundamental. You should consider placing your most important links and actions at the top of the page (not buried at the bottom). Users don't want to click through multiple levels of navigation options before finding what they need. Ideally, keep yourself with the rule - one page = one purpose. It will improve the mobile experience for sure.

4. Create a visual hierarchy of the content

Concise and direct content is essential. People tend to scan the content. The visual hierarchy should explain to your readers what's most important and what's secondary in your content. Appropriate, consistent CTAs should guide them through your website.

5. Optimize photos, graphics, fonts, and other media

First, you don't have to or shouldn't repeat the content on mobile and desktop views. A huge auto-play video towards the desktop version wouldn't work in the mobile view. Keep the mobile design simple by reducing the number of images. If you want to include them, optimize their formats and properties, for example, with Adaptive Images tool and choose the most sustainable versions. Use typography that is readable on a smaller size screen. Reduce clutter and improve readability by utilizing white space.

6. Don't use distracting media

Avoid distracting and frustrating content like pop-ups, advertisements, and other media, that don't bring value to the user experience but even make it worse and can make users leave your website and never return.

7. Make sure your website loads quickly and consistently across all devices.

Make sure that your mobile website allows users to see it even with the low bandwidth and on the smallest screen so that they can still find the most important information. This can be done by optimizing images and avoiding plugins like Flash, which aren't supported by all browsers.

8. Enlarge touch targets

Don't forget that your user will experience your website with their fingertips. That means you have to give hyperlinks plenty of space and make larger the elements that the user will tap or swipe. As for now, Apple recommends creating 44 pixels square for the touch target. At the same time, don't forget to remove the hover state on your mobile as far as there is no such interaction for fingertips yet.

9. Think in terms of breakpoints

First, design the smallest breakpoints, which will be the base for the larger ones. In other words, start your design process with wireframes and then add an appealing form that supports functionality.

10. Organize cross-browser testing

Testing should be a natural part of every design process. Go away from your desktop and computer, and try the created design on real devices. Check its functionality, navigation, readability of text, and visual elements on as many browsers as possible to ensure that your mobile web will work and look correctly on each of them.

Conclusion

Mobile-first design is the future. With more and more people accessing the internet on their phones, it's important to create websites that are accessible and adjusted to the restrictions and specificity of those devices. What design needs today is more reflection upon the users, their behavior, expectations, and changing habits while interacting with the digital world.

With the mobile-first approach, you can focus more on building the experience rather than the technology. Following the mobile-first philosophy will help you improve your website performance, user experience, and accessibility. By saving energy, it will also support you in becoming a mindful sustainable company or designer that wants to create things that matter.