Mobile First and Responsive Design: What’s the difference?

Making sure your website works great on a mobile device is a given in 2020. All “mobile” sites are not created equal though, and simply because your site displays properly on a phone does not mean you’re giving the best possible experience to your users.

Two of the common terms you’ll hear thrown around when working on mobile websites are “responsive web design” and “mobile first.” In this article we’ll explore what each means, why they’re important and how to leverage them to give your users the best experience possible on mobile.

What is “responsive web design”?

Responsive design is a term coined over a decade ago and refers to an approach to web design where a site adjusts based on the screen size of the user. The content of the site remains the same, but it shrinks, grows and reformats based on the screen real estate available.

Instead of using fixed widths and sizes for everything on the site, elements are setup with percentages to create a fluid experience as your browser size adjusts.

With responsive design, mobile is often an afterthought. With mobile first, which we’ll discuss next, mobile is the defining thought. While responsive design impacts the final user experience, it is mostly a technical approach. It represents more of a toolkit for development versus an overarching design strategy.

With responsive design, mobile is an afterthought. With mobile first, mobile is the defining thought.

What does “mobile first” mean?

“Mobile first” is both a design and development strategy that thinks about the mobile user first and foremost.

When thinking about the user experience and content organization, a mobile first approach starts with the designer considering the mobile experience. With a mobile first approach the developer starts with the mobile styling and structure and scales up to desktop.

In the early years of responsive design, mobile was considered but only after desktop. Sites would shrink down to mobile sizes, but the desktop experience was always considered first.

With the explosion of mobile traffic over the past few years and Google’s change to mobile-first indexing in July 2019, the standard workflow of thinking about desktop first and scaling down to mobile no longer made sense.

All mobile first sites are responsive, but not all responsive sites are mobile first.

Does having a mobile first website matter?

Everything above may make sense, but the question remains: Does having a mobile first website matter for both design and development? Does it impact your SEO, user experience and overall site quality? Simply put, yes.

It is not uncommon for publisher sites to have 75-85% of their traffic come from mobile devices. This means that the vast majority of your website visitors only experience your website on a small phone-sized screen.

You don’t want the only experience a user has with your brand to “just work,” you want it to be the experience you have thought about more than any other. You want that experience to be the one you have carefully considered and planned for. With a mobile first approach, it is.

You don’t want the only experience a user has with your brand to “just work,” you want it to be the experience you have thought about more than any other.

What should you do next?

Mobile first is a design strategy, making it difficult to inject the benefits you get from this approach into an existing site. It needs to be something that is carefully considered from the beginning, during the wireframes and research phase of a project.

If you are not ready to begin on a full site redesign though, there are a few key areas you can adjust on your site that will have the biggest impact:

• Header/Navigation: Spending time to address your site header and top navigation to take up less space and be easier to use on mobile is a huge opportunity for your site. Following existing design and user experience best practices and patterns can help make sure you receive the maximum benefit without having to reinvent the wheel.
• Post Header: Most of your site incoming traffic will land on an individual article. For that reason, the top of your article page on mobile is critical to draw the user in and show her the information she is looking for. Reorganizing the content at the top of your article template to show the most important information in the proper hierarchy can have a huge impact on time on site, bounce rate and overall user engagement.
• Category Pages: While most category pages consist of a simple list of posts, it is becoming more common that these archive pages act as destination landing pages for your site. Reworking these pages to expose more of your content and allow for exploration can help discoverability on mobile and improve many of your site metrics.