Skip to content

Why Mobile-First Design Is Important & How to do It Right

With social distancing, the world is turning to their mobile phones to stay connected. How does your website stack up?

Now more than ever, cell phones keep us connected.

In times of uncertainty, our mobile devices have given us the ability to keep in touch with family and friends, our jobs, essential services, breaking news, and entertainment. The necessity of mobile-first design is not news. But the Coronavirus pandemic makes it even clearer that mobile-first websites (known as responsive web sites, for their compatibility across screen sizes) are critical for both consumers and businesses.

In times like these, sites that are not mobile-friendly are proving themselves to be irrelevant.

Beyond the current global pandemic, at Highland, we’ve come to recognize that mobile-first web design = better access. Especially for low-income Americans, mobile-first design is not merely desirable, it’s a necessity. According to a 2019 report by the Pew Research Center, more than four-in-ten adults with household incomes below $30,000 don’t have a traditional computer (46%). As of early 2019, 26% of low-income adults are “smartphone-dependent” internet users —they rely on smartphones for ALL of their internet needs.

“This reliance on smartphones also means that the less affluent are more likely to use them for tasks traditionally reserved for larger screens. For example, lower-income smartphone owners were especially likely to use their mobile device when seeking out and applying for jobs.”
- A 2015 Pew Research Center report

While those with access are still using desktops and laptops for work—especially as they are working from home—anyone seeking out a product or service outside of work opts to do so on their phone. And it’s not just people trying to hoard toilet paper on Amazon. Increasingly, massive buying decisions are being made on mobile phones and devices. Last year, I signed the lease for my new house on my smartphone.

With mobile more commonplace and more critical than ever before, here’s how your team can think beyond just mobile-friendly and develop truly mobile-first digital experiences that focus on all the important elements of responsive web design. 

Mobile-Friendly vs Mobile-First

You’ve probably heard the term “mobile-first.” But many mobile-first websites are actually “mobile-friendly.” These two terms sound similar, but they have different meanings. 

Mobile-Friendly: Built for big screens, and then sized down
When a site is “mobile-friendly,” it is primarily built for desktop users. With some adjustments made, it works well on a smaller (mobile) screen such as an Apple iPhone or a Galaxy. The design elements and containers start big and then get smaller, positioning most of the elements from horizontal to vertical (top to bottom) according to CSS breakpoints. 

The mobile-friendly approach makes a website accessible to iOS and Android mobile users, but the mobile version of the website fits the mobile screens with an experience that was conceived for desktops.

Mobile-First: Built for phones, then sized up

Mobile-first means designing a digital experience for mobile before doing any design for desktop versionsIt’s that simple. 

However, something that is simple to define can be challenging in practice. Here are my tips for designers and developers who are eager to build websites that are truly mobile-first.


Tips for Building a Truly Mobile-First Product

1. Start with content.

It’s tempting to want to start designing a website by pulling up Sketch and creating a styling guide. But if you want to build a mobile-first site, you need to have all your content in order before launching into style.

This is hard for designers because it’s contrary to the way they’re used to working. In desktop applications, the layout drives the content. You create a wireframe full of lorem ipsum text, and you figure out the content later. In order to deliver a great user experience on mobile, we need to define the content first and allow that to drive the design strategy.


2. Keep it simple and functional.

Mobile-first design doesn’t usually look fancy. On mobile, users need simple and functional. This can be frustrating for more traditional designers, who approach their work as artists.

I understand the desire to channel feelings and inspiration into your work. But when designing (and especially designing for mobile), functionality is key. While there’s not a lot of wow factor, there is beauty in their simplicity and joy in a great user experience. Just look at these designs with exceptional mobile UX design that caters to both large and small screens:

Mobile apps from left to right: Spotify, Google Maps, and Amazon

3. Be transparent with clients.

Even when designers and their teams are devoted to a mobile-first design approach, it can be hard to get clients on board. If a client has had experience going through a traditional design process, they may be excited to dive into designs even if their content isn’t ready. But, as I shared above, starting with content is essential. It can be hard to say no to clients if their content isn’t ready, so it’s important to be clear with them. Let them know that if they choose to make their designs mobile-friendly instead of mobile-first, they may lose customers; the market has adapted, and users want the experience of mobile-first design. A desktop-first design approach is a risk that needs to be managed like any other on a technology project. It’s also important to manage a client’s expectations. When demoing on mobile, there can be less of a wow factor. Clients are used to seeing fancy designs on big screens. If we’re going for mobile, simple, and functional, there will be less pizzazz, but their customers will have a much better experience. 

Can you share a step-by-step mobile-first workflow? Good news — someone already created one! Stephen Hay’s responsive workflow is a great way to adapt your website projects to be truly mobile-first.

Why Mobile-First is Better

If you’re having trouble selling a mobile-first approach to your client or design team, here are a few reasons why companies who take a mobile-first approach (not just a mobile-friendly one) will build better, more successful products. 

Improved User Experience with UX Design

Taking a mobile-first approach demands more focus and attention on the user’s needs and the most essential content. There’s no room for flashy widgets, vanity features, and fillers. 

At the same time, mobile-first demands more usability research in order to provide not just the right content but the right amount of content, with the option to provide more content when users need it - and something easier to use on the smaller screens of mobile devices.

Better Performance

When it comes to web performance, a web page with fewer elements and optimized content will load faster. Fast page load times are essential for usability and for maintaining SEO (search engine optimization). Additionally, since the majority of internet users now access Google Search engine through a mobile device, Google primarily crawls and indexes pages using a mobile-first approach. This is why a responsive website is more and more important.

Increased Scalability Across Different Devices

When the experience is conceptualized on mobile, there is no risk of designing something that can’t be adjusted upwards to meet the needs of the desktop design. You can add more features as you scale up to desktop, but the core will always be there.

Decreased Bounce Rate on Mobile Friendly Websites

Generally, you can expect mobile bounce rates to hover around 20 to 30% above desktop rates while conversion rates are usually lower, especially for more expensive items. This is because people on mobile devices are typically looking up something quickly while they are on the go. But everyone has had the experience of visiting a website on your phone and immediately leaving the site because the design made it impossible to use. You can keep bounce rates healthy through mobile-first design where the mobile-friendliness will at least keep a higher portion of users and provide a better user experience overall.

Source: https://www.perficientdigital.com/

Whether we’re relegated to our homes or living a ‘normal’ 2020 life on-the-go, as users, we need our mobile sites to be simple to navigate and easy to use. Website design teams, as well as clients, need to understand that sites that are not mobile-friendly won’t serve the needs of today’s smartphone users.

By adhering to a responsive site / mobile-first approach, we’re able to build access and keep each other connected; particularly when we need it most. 

Need help with building mobile apps or software that optimizes for mobile? Highland is a top rated end-to-end web application design and development company. We'd love to help you on your journey.

You might also like