Mobile-First Approach in Web Development and Why Should You Use It?

In the current digital era, users primarily use mobile devices to connect and browse the internet. Because of that, the whole design and development philosophy has changed and adapted to this device usage behavior. It is crucial that the development process is structured to develop the end product (be that a website or an application) using a mobile-first philosophy. This way of thinking and working ensures the end user gets the most optimized and best experience using the product.

What is mobile-first

The mobile-first development/design strategy involves starting the design phase, developing the site on a smaller device first (mobile device screens), and adding more features to “expand” it to bigger screen sizes. The strategy follows the “Progressive Advancement” principle, and by using that, the design process is focused on the most necessary features/content first because the mobile devices are restricted in screen real estate, which is later advanced to a more detailed layout on larger screens.

“Progressive Advancement” or “Graceful Degradation”

To ensure that the website or an application interface appears appropriately across many devices, designers provide several design layouts to cover the various screen sizes.
Progressive Advancement is the process by which we construct a product (be that a design or the end application) for smaller screens (such as one on a mobile phone), and after we have that starting point, the rest of the larger screen layouts are done. The most fundamental features & functionalities are included in the core mobile design layout. Then, to improve the user experience, we go on to the bigger screen version for a tablet or PC, which is made by including interactivity, more intricate effects and/or animations, etc., on the basic mobile version.
On the other hand, Graceful Degradation is the exact opposite. The development process starts with building the desktop screen layouts, and after that, it steers to mobile screen layout development, in which the desktop layout gets gradually cut out/stripped of its desktop features, content, or images, for example.

Why is it important

Why is mobile first important? The answer lies in the current device usage trends. Mobile device usage surpassed desktop device usage around 2016. Currently, gs. Statcounter states the mobile device usage market share is around 60%, while the desktop is at 30%.

The only gap closer and desktop dominance in that period was around 2019, which was the dreaded COVID-19 pandemic timeframe. Besides that, mobile device usage is huge. Everyone and their grandmother has a smartphone today, and we use the devices primarily to surf the internet. This trend will continue, and the mobile desktop gap will get wider. Logically, this is the main reason why the mobile-first thinking process in development is important.

Besides the general mobile market share influence in making us do the projects on a mobile-first mindset, a couple of more important reasons to do so are:

• Mobile-first improves user experience
• It’s easier to optimize the mobile-first design
• Google loves mobile-first designs for SEO analysis
• Innovation and the ease of content sharing

Mobile-first vs. mobile-responsive

You could say Mobile-first and mobile-responsive are the same thing. True, the two terms aren’t mutually exclusive. A mobile-first website or application is always responsive; on the other hand, a mobile-responsive website is not necessarily mobile-first.
That is because mobile responsiveness is a top-down approach in design and development. Desktop is usually the first design version that gets done, followed by tablet screen sizes and, in the end, mobile. Using this approach, a mobile responsive website is reactive to the device type the user is using. It adapts itself and shifts its components to fit the device screen better. It does that without prioritizing the smaller devices’ user experience (UX).
On the other hand, mobile-first design prioritizes the mobile experience and takes a proactive approach to enhancing mobile UX.
This proactive approach includes creating a clear, visible hierarchy on your website that makes it easy for users to browse long, narrow displays and keep material concise and to the point. Reducing visual clutter is another way to avoid overwhelming or confusing the user on a small screen. Some examples of mobile-first design principles are slimming down large, unwieldy text sections, using tap targets, expanding the hamburger menu to streamline the navigation bar, and increasing fonts to make them easier to read.
While there is no right or wrong way to compare these two terms, you still need to decide on which development cycle you’ll use. To better help you with the decision, ask yourself: “What is my target audience going to use to view the website/web app?”. If the answer is that the end product will be primarily used by users on their mobile devices, use a mobile-first principle. Vice versa if the answer is the opposite.
Sure, the answer could be one-sided, but in most cases, you need to balance it out. Think about your budget, current and future user trends, and where your company or product will be in a couple of years’ time. Maybe even create the two site versions and test them using user tests to find the correct principle that works for your needs.

Principles/framework/implementing

The mobile-first project workflow process starts from the beginning, from the project planning phase. A good project plan means the design file will follow the mobile-first principle with minimal design timeframe oscillations and/or extra iterations. After that, the development process will be much easier and faster.

Strategy/Approach

We can split up the process strategy into seven steps:

1. Switch up the mindset
2. Planning and user research
3. The definition of core features and the core message (content)
4. Wireframing
5. Design phase
6. Development
7. Testing

Switch up the mindset

Make a mindset switch. The goal is to start from the bottom up (e.g., Mobile to Desktop) to provide the best mobile user experience.

Planning and user research

Investigate and arrange the features, appearance, and goal of your website or application. This stage involves formulating, structuring, and organizing a strategy for the problem the app will answer, the intended user base, and the key features.
Detailing a scope of work can help ensure the design is feasible within the desired timeframe and the client’s budget. This phase lays the groundwork for the following steps, and if you have a clear vision, the rest will go easier.
Recognize the demands, preferences, and behaviors of your mobile audience. To gather information, conduct usability testing, interviews, and surveys. This research will inform your design choices and assist in producing a user-centred experience that appeals to your target market.

The definition of core features and the core message (content)

Determine which features and content are most crucial for mobile users. These components are prioritized to ensure they work well and are readily accessible on small displays.
Technically, determine what technologies you use. How is data going to be sourced? Which kind of APIs—public or private—will you use? For which platform or platforms would you develop your application?

Wireframing

Wireframes allow you to map out the functionality of the pages, catch problems early, and save time on revisions later. Using them, you showcase the end product idea to the client, get to know that client and their needs, and, ultimately, get their feedback and critiques in the early stages of development.

Design phase

Transfer the ideas and wireframe plan into a visible representation of the final product. Implement responsive design techniques, and remember that all the interactive elements should be designed for touch input first. Also, please keep it simple and clean!

Development

Like the design phase, start from the mobile level. This is important when coding your media queries. The base component class styling is always placed on the base mobile query. Add to that and adjust the layout for bigger screens using min-width media query rules.

Testing

Refinement, app support, and iterative testing are essential to producing a top-notch mobile-first design. To get feedback and new perspectives on your website or application, you can host a user group, release a beta, automate testing, or manually test throughout the test phase.

Best practices

Some of the best practices when doing a mobile-first development process are:

1. Content-first mindset: Because mobile screens are limited, you must prioritize a clutter-free content viewing experience. The user needs to get the information they need fast and clearly.
2. Visual hierarchy – use visual hierarchy rules to emphasize the critical content to the end user.
3. Avoid popups – due to screen constraints, popups are an aggressive way of displaying information. To the user, it looks like you’re forcing him to do something, disrupting his initial intentions, which can lead to the user exiting the page. Also, Google hates popups on mobile.
4. Mobile device menu – make the mobile menu simple and easy to use. Please don’t overdo it with fancy animations, and try to avoid the page nesting.
5. Simplify the design—Have a minimal mindset when designing the product. From the number of page links, the grid structure, and typography choices, don’t be afraid to add additional whitespace to make the layout less cluttered.
6. Avoid large images – use smaller portrait mode images that are easy to read and don’t take up too much loading time.
7. Optimization – use real time device testing and Lighthouse to determine where you need to improve. All site speed tastings are mobile-first, so the speed score is focused on that.
8. The thumb rule – place the essential elements (links, buttons) within the “comfortable thumb zone” of the device. In other words, avoid the user stretching to improve the UX further.

Best tools

Some of the tools that have adapted the mobile-first mindset and can help you make a mobile-first product are:

1. Material Design – Google’s open-source design system
2. Bootstrap – the most popular frontend toolkit that helps you build mobile-first products fast with its already set up grid structure and ready-to-go components
3. Tailwind CSS – open-source CSS framework currently being used extensively in React development. It’s mainly used because it drastically speeds up the CSS responsive building with its short-hand terms for each CSS property. Also, it comes with some pre-built UI components.
4. Semantic UI – similar to Bootstrap, it’s a frontend toolkit/development framework with even more customization options. This could be of big importance when building a site from scratch.

Examples

Before showing you code examples, we need to mention the common media breakpoints:

1. 400px – Large Phones
2. 568px – Landscape Mobile
3. 768px – Tablet
4. 992px – Big Tablet
5. 1200px – Desktop (Laptops)
6. 1400px – Large Desktop
7. And any other breakpoint you may need to fit the rest of your design

Bootstrap is made up of these breakpoints:

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... } 

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

Use these breakpoints as your main guideline for changing the layout and styling the element.
The main goal is to organize your HTML and CSS with mobile phones in mind. Once your HTML is complete, open it in a browser, select the iPhone 5SE screen option, and inspect the element.

The grid structure

Wrap your content on all your pages into a wrapper container element. This container will keep all of the site content in line across multiple screen sizes.

<div class="container"> 
    <!-- Content here -->
</div>

Once you have the HTML element, you can style the container to something similar to this:

.container {
padding: 0 10px;
margin: auto;
position: relative;
width: 100%;
max-width: 95%;
}

Once you have a container, use a row-column HTML structure to define the grid system further:

<div class="container">
    <div class="row">
        <div class="col"> 
            Column
        </div>
        <div class="col">
            Column
        </div>
        <div class="col">
            Column
        </div>
    </div>
</div>

The rows wrap one or more columns and are 12 columns wide. Each column has horizontal padding (called a gutter) to control the space between them. This padding is then counteracted on the rows with negative margins to ensure the content in your columns is visually aligned down the left side. Each column contains its relative content and can span 1-12 units of width. Changing the column width makes the grid system react and stack the columns accordingly on different screens.
This is the base grid structure most sites and design systems use. Once you have that in mind, you must also consider HTML ordering. For example, you wish to have three items stacked on top of each other on mobile and place them side by side on desktop (and you have an idea which one goes first, which center, which last). You should think ahead and structure the HTML to something like this:

<div class="container">
    <div class="row">
        <div class="col">
            <div class="top-item-wrapper"></div>
        </div>
        <div class="col">
            <div class="middle-item-wrapper"></div>
        </div>
        <div class="col">
            <div class="bottom-item-wrapper"></div>
        </div>
    </div>
</div>

An example of this is our blog page. On mobile, the blog item grid is stacked and looks like this:

The blue line is the container wrapper, the green is the grid row wrapper element, and the red is the individual column elements stacked on each other. On the desktop, the elements are positioned alongside each other:

Conclusion

Do I see the mobile-first trend dying out eventually? No, the trend will surely go on because of mobile use statistics. Mobile-first is a must in today’s highly mobile-dependent way of using the internet, so it is necessary that we adapt to it and build digital products in a mobile-first mindset. This way, the user gets the best experience when using the product that was basically planned from the start for mobile use.
We should all embrace this way of thinking and working, starting today.