Mobile First: The Web Design Strategy Your Business Needs

It's no secret that we love mobile devices. And as our mobile devices get smarter and more versatile with each new generation, our mobile usage and dependence on smartphones for our day-to-day routines and activities increases even more.

Recent studies show 58% of all web traffic originates from a mobile device. Clearly, based on this data it makes sense for web designers to prioritize the mobile user experience, since the majority of traffic and engagement for most websites will come from mobile users.

Even when the need for a mobile-centric design philosophy is understood, designers may hesitate before taking a mobile-first approach. They may have some important questions before taking the plunge, such as:

• Will focusing on the mobile experience risk alienating desktop users who visit the site?
• How much mobile usage and traffic do you plan for?
• How do we integrate mobile audience needs into a traditional, desktop-oriented web design strategy?

Let's answer these and more questions as we examine what "mobile-first" means and why it matters for businesses seeking a website design that performs in search and converts more visitors.

Table of Contents

1. Google Says “Follow the Users”
2. What is Mobile First?
3. Desktop Last
4. PWAs: The Secret Weapon
5. Mobile First Best Practices
6. Frequently Asked Questions

Google Says “Follow the Users”

In order to properly plan for mobile usage we must gather information about the importance that Google and other search engines place on mobile usage and the factors that go into designing a mobile friendly website.

In early 2010, Google announced it was adopting a "mobile first" strategy. In the context of Google as a search engine, the announcement simply meant Google now crawls and indexes websites based on the version of the site and content that is served to mobile users, rather than the desktop version.

While Google did not coin the phrase "mobile first", they were the first major technology company to publicly adopt a mobile-first strategy. For website owners, Google's announcement signaled that a site's performance and ranking in Google Search results would depend on the quality of user experience they offered to visitors browsing the site on mobile devices.

Why did Google do this? Pretty simple: Google clearly saw that the majority of web traffic was originating from mobile devices, and that users encountering websites offering a poor user experience did not retain as many visitors or keep them engaged. Since Google only wants to show the highest quality websites in its search results, it made sense to elevate mobile-first websites above sites focusing on a shrinking audience of desktop search users.

With Google now firmly entrenched in its mobile-centric crawling and indexing philosophy, most companies have put mobile design at the center of their web strategy. Now let’s talk about why you should, too.

What is "Mobile First"?

Mobile-first strategy is an approach to innovation that maintains digital technology should be designed and optimized for smaller devices, then scaled up. Since mobile designs are more difficult than desktop and require distinct methodologies, taking a mobile-first approach makes it easier to adapt responsive mobile designs to larger screens and devices.

Mobile First UX

A mobile first user experience for websites essentially involves web developers focusing on satisfying the needs of mobile visitors above desktop users. It acknowledges that the majority of website users will be accessing the site through a mobile device, rather than a desktop or laptop computer, and therefore those mobile audiences should be prioritized.

Neglecting mobile users carries a lot of risk for businesses. According to Think with Google, over 50% of people said they won’t consider purchasing from a brand that has a poorly designed mobile site. With the number of mobile website users growing every day, that number will only grow as well.

There are two fundamental components of a mobile-first user experience:

Mobile First Responsive Design

The key factor in a mobile first strategy is responsive nature of mobile first websites. Responsive design involves the development of a website that scales designs up to fit larger devices such as laptops and desktop computers, all originating from a smaller-screen, mobile-focused design.

To achieve responsive design, media queries are used to identify the resolution of the screen, and the website dynamically adapts its layout, content, and functionality to fit the device.
As an example, take a look at our responsive design of the Kao Collins website.

A mobile first strategy suggests that the default design should be the mobile variant. This means the desktop layout, which takes longer to load on mobile phones, is a secondary option rather than the primary version served to visitors.

Before, websites were developed with the desktop version assumed as the default layout. As a consequence, the website would load images at their largest sizes and include desktop-oriented interfaces and functionality for all devices, frustrating mobile users with a slower and less responsive user experience.

Dedicated Mobile Sites

One alternative to a responsive mobile web design is to have a completely separate mobile site, located on a subdomain of your site.

You have likely visited a dedicated mobile site before—you land on the site and encounter a redirect message, then see that you are now at an address like "m.[website].com" or "mobile.[website].com". This method is more challenging to develop and maintain than a site with responsive design, because it requires a separate code base and dedicated mobile development resources in addition to desktop development.

Dedicated mobile sites are most often implemented when site owners want to offer a totally unique mobile experience. For example, while Wikipedia's dedicate mobile experience isn't much different, if you visit their site on a mobile device in the U.S. your URL will begin with "en.m.wikipedia.org"–however, notice that if you click the same link on a desktop or laptop device, the site detects that you are a desktop user and thus presents the dedicated desktop version with the normal URL.

Desktop Last

Until recently, desktop was king, and mobile specific strategies, if they existed at all, took a backseat to the primary marketing strategy – i.e. websites were developed for desktop users. Mobile "sites” have historically been scaled-down, shrunken versions of the desktop site, often with content and functionality stripped out to make the site more compact, the content more consumable, and the user experience more palatable.

Abandon the Desktop First Mindset

While we aren't saying everyone should abandon the desktop website tomorrow, as digital marketers we do foresee a future where the vast majority of users in the online world are rarely strapped down to a desk.

Most design agencies will work closely with you through a website design project, showing you the progress made on your site at each phase – but in desktop view. At work this may be convenient, but it comes with inherent drawbacks–like making your design and strategy flat and one-dimensional.

The very last thing you should see, or more specifically, the last thing you should worry about, is the way your finished website will look on a desktop. This goes totally against what "feels" right, but think about your own life, and how many times a week you look up sites (Facebook, Google, Pinterest, restaurants, shopping, etc.) on your mobile device.

The fact is, in order to have a robust website that engages and converts the highest possible number of visitors into new leads or sales, the desktop-first mindset must be left behind.

PWAs: The Secret Weapon

Mobile-first strategy is far easier to execute when you develop your website as a Progressive Web App (PWA). PWAs combine the search performance of traditional websites with the speed and feature-rich functionality of native web apps, making them the ideal platform for mobile-centric website development.

If you have any doubt whether PWAs are a best practice, consider the fact that PWAs are included in Google's Lighthouse web page auditing tool, which is accessible via the Google Chrome browser. Google would not bother to scan and verify PWA functionality if it didn't recognize the power and usefulness of progressive web apps for users.

Benefits of PWAs for Mobile First Strategy

• PWAs can function offline - PWAs allow users to connect and interact with the website while offline. This is a clear benefit to mobile only strategy, since most of the time when a user doesn’t have an internet connection it is on a mobile device.
• Enable push notifications - Unlike traditional websites, PWAs allow for push notifications to be sent to the user’s device whether it be mobile or desktop based
• Responsive design - PWAs, like the Kao Collin’s website, allow for a more responsive design. PWAs are beneficial because they offer a design that keeps the user engaged.
• Page Load Speed - Progressive Web Apps optimize your website for Search because they dramatically improve several “user satisfaction” metrics that directly influence Google’s search ranking factors, including faster page load speed, lower bounce rate, and more returning users.
• News Versions of PWAs are Immediately Pushed to All Devices - When a PWA is updated, any device that opens it will be immediately accessing the newest version, and all your users instantly benefit from your latest and greatest PWA enhancements.

Best Practices for a Mobile First Strategy

Provide Something Useful

There should be a high level of built-in functionality that allows for keeping the user connected and coming back. Maybe it can be something simple like signing up for coupon codes, or being alerted when a new blog post is up. Don't overdo this, though. It should never be intrusive, just enticing.

Play Nicely with Social Media

Your mobile-optimized website should offer ridiculously easy ways to sync, connect and share. Make everything on your website easy to share via social media. Reduce all unnecessary steps to get relevant content onto your audiences' social pages. Offer quick share functions for Twitter, Facebook, Pinterest, etc. It should be dead simple.

Minimal Design

Instead of seeing what you might be able to add and squeeze into that small screen, see what you can take away. Let the user decide when and if they want to dig deeper for more content. Users don't need you to hold their hand or design overly obvious navigational buttons. The internet isn't new, and most people know how to find what they are looking for. Remember, most users are coming to your site to access a specific piece of content.

Don’t Force Screen Rotation on the User

Remember, no obstacles. Rotation requires the user to go from easy, one-handed operation to using both hands. If the other hand isn't free, they will just close the view and maybe go back later on. Everything should fit on the vertical view. Social networks like Tik Tok have already realized this and are showing impressive results as a vertical-based platform for video sharing–they have the data to back it, too.

Mobile First User Experience/Responsive Design

Remember that having a responsive design is the key to providing a good mobile and desktop experience to your users. Scaling up and down without latency and or loss of content is expected from today’s users and should be in the forefront of our minds when designing a website.

Progressive Web Apps

PWAs include the best features of traditional websites and native web apps, making them the ideal platform for mobile. Developing a PWA will help you create a better responsive design.

Go Mobile First with an Agency Partner

Need help executing a mobile first website strategy? Partner with the experts here at DBS, where we've spent over 20 years designing and developing websites and digital marketing strategies that generate leads and brand awareness to deliver real business results.