Mobile-first website design, how important is it?

Are you ranking high on Google? Hey, you might think, this was about website design, what does that have to do with my position on Google? Increasingly, website visits are made via mobile devices. Google therefore consistently gives mobile-friendly sites a higher ranking. This sets clear requirements for website design, and many people then think of the term ‘responsive’. Unfortunately, ‘responsive’ is only part of the solution. In this article, we discuss mobile-first website design. We pause to explain the basics of this design ideology and tell you how you can apply it in practice.

Growth of mobile internet

On average, about 25-30% of website visits nowadays come from a mobile phone. For clarity, this excludes tablets. Although the desktop remains our main screen during working hours, in the morning it is the mobile phone and later in the evening the tablet. (Source) Perhaps even more importantly, the share of mobile-only users – those who visit the web only on mobile/tablet – increases annually. Many people therefore never see a website on a large screen!

What do you think: will this increase or decrease in the coming years?

Exactly, and that is why it is essential that websites function optimally on a mobile phone and tablet.

Does your company have an app and do you think that’s enough? Unfortunately, apps are very good for maintaining engagement, but no one ‘discovers’ your company app. That means the web is your most important digital source for leads and prospects. Apps are for your existing customers. In an article on mobiforge, they describe it as follows:

Apps are for engagement, the web is for discoverability

Mobile-friendly websites get a higher ranking on Google

Eric Schmidt, chairman of Google, already said in 2010 that the world’s largest and most important search engine was going mobile-first:

“We understand that the new rule is mobile first,” Schmidt said. “Mobile first in everything. Mobile first in terms of applications. Mobile first in terms of the way people use things. And it means … that we have a role now to inform, to educate through all these devices.” (source)

In recent years, the company has put words into action, and websites that display well on mobile devices have been preferred in Google for some time now. That means with a mobile-friendly website, you have an advantage over the competition.

Responsive web design is not the same as mobile-first website design

An important term in the design and development of a website is so-called ‘responsiveness’. Simply put, this refers to the extent to which a website adapts to the size of your screen. If you only see half images and the text is too small or too large (unreadable), the website is not responsive. A responsive website makes text nicely readable and shrinks images so you can overview the whole. It is therefore usable on any screen.

Sounds good, so that makes my website mobile-friendly, right?

Yes and no. A responsive website is readable and usable on a mobile phone, but that does not mean it is fully user-friendly. An example:

Rembrandt’s Night Watch is displayed in full glory on the Rijksmuseum’s website. The image has such a high resolution that you could print it as large as a building. Say that the image alone is 12MB. If the Rijksmuseum only makes its website responsive, you first have to download that 12MB image before the whole is adjusted for your mobile phone. This makes the website very slow, which is not really user-friendly. We will tell you later in this article what other disadvantages a slow website has.

Difference between mobile-first and desktop-first

The above example probably makes the challenge clear. But how does mobile-first design help us solve this challenge? When we talk about design ideologies, progressive enhancement and graceful degradation stand in direct opposition.

Mobile-first: progressive enhancement

With mobile-first, we speak of progressive enhancement. Proponents argue that designing for mobile is the hardest and therefore should be done first. By answering the hardest questions first (what is the core of my message, what is the call to action, etc.), the design for other screen sizes becomes easier later. Essentially, because on the smallest screens only the essential functions and content will be visible, you have already designed the core of your user experience.

On larger screens, you gradually have more space for improvements that complement the standard (mobile-first) experience.

Desktop-first: graceful degradation

The opposite is graceful degradation. From the start, all complexity is built in and displayed, which is only removed later for smaller screens. The main challenge here is that core elements often merge with additions, making them difficult to separate. You run the risk that the mobile user becomes a kind of afterthought because it is simply the ‘simplification’ of the experience.

Why mobile-first website design wins

Progressive enhancement sounds more positive than graceful degradation, and that is no coincidence. There are three reasons why mobile-first is better than desktop-first.

Content = king

The mobile-first approach is also a content-first approach. Mobile has the greatest limitations in terms of screen size, bandwidth, and attention span. If you keep that in mind during design, you clearly focus on what really matters: your content. Your content is ultimately why users visit your website, so prioritize this in the design process.

What is important to keep in mind is that mobile users sometimes look for completely different content than desktop users. For mobile users, address details or an easy-to-find download may be most important, while a desktop user wants to read an article or watch a video. Good to consider before starting the design process.

Speed

To gracefully degrade a design, the full site must first be loaded for the largest possible screen. Then many elements are simply hidden on mobile. Quite a strange approach when we talk about a medium (mobile phone) where connection speed is not always fantastic, right?

And that’s just about the user-friendliness of a fast-loading website. We mentioned Google earlier; guess how much influence your site’s loading speed has on your search engine ranking?

Power of the design

It can be quite a disappointment to see what remains of that revolutionary design on a mobile phone. All the fantastic graphics, effects, and animations disappear, and only your content remains. You only recognize the font and colors. By starting to design for the smallest screens, you unleash all your creativity here. Then you can ‘pimp’ the design for larger screens!

In short, by reversing the process, it doesn’t feel like you are compromising but gradually making it better!

Mobile-first website design is difficult

It may be the ‘best’, but mobile-first is much harder than desktop-first. When you sit behind your laptop, you’re not shocked by a page with 1,000 words, but how about on your mobile phone? How often do you want to swipe before giving up? Before you can start with a mobile-first design, you need to answer some difficult questions:

  • What is the one action your visitor must perform? (should they sign up for the newsletter or do you prefer they fill out a contact form?)
  • Which 300 words must/want I to tell?
  • Which sentence does my visitor read first?

Why are these difficult questions? Because these questions directly affect the strategy, positioning, and/or proposition of a company. Many companies do not always have these answers ready.

With the desktop-first approach, we can still hide behind beautiful sliders and animations. The lack of content only becomes clear when we have to reduce everything to a mobile site, but by then almost no one pays attention anymore.

No one sells you a mobile-first website design

Why? We’d like to clarify this with the following two questions:

  • What sells easier, a flashy and extensive desktop-first design or a concise mobile-first design?
  • Which of the two will a website builder or marketing agency present to you?

A shame, because with a concise mobile-first design your organization is undoubtedly better off.

For us, it’s a bit different; we usually first work on the positioning and proposition of a company. Mobile-first design then becomes much easier.

Mobile-first website examples

Okay, you might say, I’m convinced. Mobile-first design is the future. But what does it look like in practice?

mobile-first example: SAPSAP

Enterprise software provider SAP has chosen a mobile-first approach with its US-focused site. There is one clear red thread throughout the site guiding the visitor through the various calls to action. The content is limited to the essentials.

What we especially like is that the website becomes more concrete step-by-step and moves from SAP’s more abstract positioning (run live) to very concrete offers or next steps. The site simply works.

Nationwide

This insurer clearly shows why they exist. The car insurance is front and center, while the rest of their services are neatly tucked away in a handy menu.

Kissmetricsmobile-first example: KissMetrics

Software provider that makes every effort to get you to do one thing: try their product. They have removed all other matters and hidden them behind the menu.

Microsoft

This company needs no introduction. On their website, they show that they also know exactly what their visitors want to see. You basically go through a decision tree. The company is working hard on many fronts, definitely an interesting case to study. After all, they have gone from challenger to market leader to challenger again.

Mobile-first website design: getting started

I think we have answered the question whether mobile-first website design is important. And now that you know mobile-first websites are more user-friendly and rank higher on Google, you naturally want to get started right away. But what are the first steps?

  1. Answer the difficult questions;
    1. What is the one (most important) action my visitor must perform on my website? (download brochure, contact, share article on social media, etc.)
    2. What story do I want to tell in a maximum of 300 words? (What is my positioning?)
    3. Which sentence does the visitor read first? (What is my proposition?)
  2. What information or input does my target audience need before they make a purchase? (Customer journey)
  3. Create a wireframe (https://en.wikipedia.org/wiki/Website_wireframe)
  4. Write and gather the content you need and place it in the wireframe
  5. Ask a designer to convert that wireframe into a design
  6. Have a developer build this on a CMS