Mobile’s Huge. But is Mobile First?

We often get asked at FINE whether we design “mobile first.” Many feel that since the majority of users are now mobile, we should design for mobile users first, too. Plus, Google’s got that mobile first update coming out, so mobile is even more important than ever.

Right? Yes, but also no. Mobile is indeed increasingly important. But “mobile first” is an oversimplified reaction. Holistic design integrates the latest and greatest mobile considerations, but also addresses the needs of all users, be they from desktop, a search-engine bot, a braille display, or a Kardashian’s banged-up Blackberry. So the proper response includes these 3 key considerations:

1. Define “mobile first.”
2. Define where your users are coming from.
3. Define your design and UX approach.

1. MOBILE FIRST: TWO DEFINITIONS

Mobile First actually refers to two overlapping concepts: mobile-first design and mobile-first indexing.

I. Mobile-first indexing is Google’s name for a (still in-progress) algorithmic update that ranks the mobile version of a website instead of the desktop. Google previously used to rank the desktop version, but has since charged their approach now that the majority of online users are from mobile devices. It’s a valid point.

This update means your site should comply with Google’s mobile-friendly guidelines. Some examples are using readable fonts, appropriately-sized text, and compressing images so they don’t take too long to load. In Google’s eyes, being mobile friendly is the first order of priority. A site doesn’t have to be responsive, or adaptive, in order to simply be mobile friendly.

Google started to roll out this update in March 2018. Currently, they’re only migrating websites that that have a close 1:1 match between mobile and desktop content. In the meantime, they don’t want you to freak out. If your site has been migrated, Google will have notified you in Google Search Console.

So far, many responsive FINE sites have been successfully migrated, with no adverse affect.

II. Mobile-first design focuses on the needs of mobile users first, before desktop or other devices. Websites have historically been approached from a desktop-first standpoint. Now that more users are on mobile than desktop in 2017+, the rationale is to design for mobile users first, too.

This doesn’t mean desktop users are ignored. However, mobile-first design often just retrofits the desktop version, causing it to be less than the “wow” experience it could be. A desktop-first approach, in contrast, focuses on desktop users first, and then adapts this experience for mobile users.

The best argument FOR a mobile-first approach design is that it clarifies content strategy. When you have so little space, mobile first requires you to distill the essence of a brand’s message in a way that desktop doesn’t demand. And if the vast majority of your users are indeed from mobile devices, this may be the approach you want to take.

But while mobile first can clarify a lot of things, it can also result in a boring, hamstrung experience for desktop users. When designers start with the desktop version of a site, there’s endless real estate and creative possibility for enhancing brand expression. It tends to be a lot more fun to design, too.

2. DEFINE YOUR USERS: What Percentage are Really on Mobile?

ComScore’s latest study has some juicy statistics about mobile usage worldwide. While it’s true we spend a lot more time on mobile than desktop, social media addiction could also be the culprit here:

• 2 out of every 3 digital minutes are spent on a mobile device.
• Mobile app usage outpaces mobile websites usage by 7:1 margin.
• A few apps (Facebook, Instagram, Gmail) account for the vast bulk of time spent.

When it comes to mobile, people are mostly using email, Facebook, Instagram, and other social apps. Confusingly, even though the vast majority of overall time spent is from apps, mobile websites (properties) are driving more unique visitors and growing faster than apps.

That being said, mobile web usage is a mile wide and an inch deep: for now, people still tend to spend a lot more times on apps than on websites.

What Percentage of YOUR Website Users are Mobile (or Desktop)?

While most users may access the Internet at large from mobile devices, the stats for your own website could be considerably different. For example, about 74% of all visitors to FINE’s website in 2017 are from a desktop device.

Consider logging into your own analytics to ask yourself the following:

• What percentage of my overall traffic is mobile?
• What devices are being used?
• What percentage of my overall conversions (sales, forms) are mobile?
• How does cross-device usage come into play?

Where’s the Money in Mobile?

Depends who you’re asking, and whether we’re talking now or in the future. When it comes to Google and Facebook, obviously they see lots of ad dollars in mobile, and they also see a future that’s majorly moving toward all things mobile. As former Google CEO Eric Schmidt once famously said back in 2010, “Mobile first in everything.”

But right now, the majority of online transactions still take place on desktop devices. And if you’re a B2B website, chances are, most of your lead generation forms are from desktop users, too.

Why is conversion on mobile devices so much lower? This is a real chicken-or-egg question. Have we failed at enabling mobile experiences that encourage transactions? (Probably.) Is it because people don’t want to fill out complex forms or scroll through zillions of thumbnails on a tiny screen? (That, too.)

What about the need to open multiple tabs with different products because you don’t want to lose your place in the middle of a scroll? (You can’t do that on mobile… yet.) Or is it because the overall mindset of users on mobile devices is just totally different? (My head hurts.)

The answer to this question is evolving, and there could certainly be a future where just as many transactions are on mobile than as on desktop. But for now, the lesson is that we still need to design for both.

What about Cross-Device Usage?

Here’s where it gets really interesting. It’s not so much a question of whether users are using desktop or mobile devices to access web properties, but that they’re often using both.

Why do you think PPC marketers are so into cross-device reports, or why Google Analytics continues to spearhead new ways to improve attribution? Because many times, a user might initially visit a website from mobile, but convert on desktop.

3. DEFINE YOUR UX: M.dot vs. Responsive vs. Adaptive

Webmasters commonly use one of these three main UXs to build a mobile version of a site:

M.dot Websites – Also referred to as separate URLs, mobile-only websites basically create an entirely different version of your site for mobile users, complete with different URLs. These are often hosted on subdomains (ex: m.yoursite.com).

Update: As of 2019, Google strongly advises against m.dot sites. They’re less powerful for SEO (two different versions of a URL can confuse Google), and can also result in super-small mobile sites that will fare poorly in mobile-first indexing.

Responsive design uses CSS to help the same HTML code — on the same URL — work for both mobile and desktop users. It uses “breakpoints” to adapt the design as it grows smaller — or larger. If you have a responsive (or adaptive, see below) website, there’s no need to build a separate mobile version. Google’s official recommendation is that webmasters build responsive websites.

Adaptive design – Also known as dynamic serving, adaptive is similar to responsive because it allows one URL to serve both desktop and mobile users. However, it doesn’t serve the same version of the page to everyone. Instead, it codes several different versions of a page and swaps them out depending on what device you’re using.

There’s a lot of debate on how responsive differs from adaptive, and if one is better than the other. Responsive techniques can also even be combined with adaptive ones to further refine the user experience.

What About Graceful Degradation vs. Progressive Enhancement?

These buzzwords cropped up before many users were even using mobile devices, as developers have historically used these methods to adapt to a variety of different browser types.

Graceful degradation creates an optimal experience for the most up-do-date browsers, and then gradually degrades the experience for other browsers that can’t support all the bells and whistles. In theory, the degraded experience is graceful, but in practice, it’s not always as elegant. Think Wow Dancing Unicorns => This Looks Good => I Can Read The Text On The Page.

Progressive enhancement works in the other direction, first designing a strong basic foundation, and then progressively adding enhancements as the browser/device becomes more sophisticated. It’s more This Looks Good => This Looks Even Better => Wow Dancing Unicorns.

Historically, graceful degradation and progressive enhancement have been associated with browser and search-engine accessibility – but these concepts also complement mobile design philosophies. Bonus points if you also want to explore regressive enhancement.

How Should You Approach Mobile in 2018 and beyond?

1. Prepare for Mobile-First Indexing
   No matter how you define mobile first, make sure your website is mobile friendly and read over Google’s guidelines for mobile-first indexing.

2. Research your User Demographics.
   Dig deep into your analytics, starting with what percentage are on mobile devices versus desktop. Don’t forget to consider that many could be using both.

3. Determine a Design Approach & Mobile UX
   Talk with your designers about the research above. Consider how a mobile first, desktop first, or perhaps a holistic combination of both could best serve—and convert—your website visitors. At FINE, we typically go with a responsive design, though, as noted above, there are lots of people who advocate for an adaptive approach, too.

In Closing

It’s challenging to keep pace with the ever-changing churn of the web. After all, someday the mobile web might not even be using URLs — but that’s another debate. In the meantime, we hope we’ve brought a bit of clarity to these murky mobile methodologies.