Skip to content

Why Mobile-First Design is More Important Than Ever (& How to do It Right)

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

Image from Adobe Stock

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 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 = 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 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 mobile-friendly and develop truly mobile-first digital experiences. 


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 desktops. With some adjustments made, it works well on a smaller (mobile) screen. 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 mobile users, but the website fits the mobile screens with an experience that was conceived for desktops.

Source: highlandsolutions.com

Mobile-First: Built for phones, then sized up 
Mobile-first means designing a digital experience for mobile before doing any design for desktop. It’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.

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.

As an artist myself, 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:

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.

Image from Adobe Stock


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
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.

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. Additionally, since the majority of internet users now access Google Search through a mobile device, Google primarily crawls and indexes pages using a mobile-first approach.

Increased Scalability
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 
Generally, you can expect mobile bounce rates to hover around 20 to 30% above desktop rates. 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. 

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. Designers, 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 mobile-first approach, we’re able to build access and keep each other connected; particularly when we need it most. 

Whether you’re new to mobile-first design or an avid supporter, I’d love to hear from you. Leave a comment below or send me an email.