What is Mobile-First Web Design?
Transitioning from designed-for-desktop first to mobile-first websites
Mobile Device Usage and Mobile-First Web Design
“Last year, that means we spent 989 billion minutes on our mobile devices in one month alone. ”
Since 2014, mobile device usage surpassed that of the desktop, and digital consumers have not looked back. Every day, almost eight out of every ten Americans hold the world in their hands on a smartphone. These powerful little screens are capturing our attention more and more each year. In just three years’ time, comScore reports a 62% increase in the minutes digital consumers spend on their mobile devices.
Last year, that means we spent 989 billion minutes on our mobile devices in one month alone. That number is staggering, isn’t it? We’re talking about tens of thousands of years spent on our mobile devices in a single month!
With significant growth in mobile device usage, the landscape of web access is shifting. Last year marks that first time the report found desktop usage on the decline. It is also the first year mobile-only users — those who access the internet nearly exclusively from a mobile device — exceeded desktop-only users. Projections indicate the trend toward an increasing reliance upon mobile devices will continue to rise in the years ahead. As desktop computers become secondary to mobile devices, most designers and developers have reoriented their strategies to lead with a mobile-first design approach. Mobile-first web design considers every screen that a digital consumer faces in his or her day, including smartphones, tablets, laptops, and desktop computers. In order to create a consumer-centric design, designers and developers begin to build websites and apps first for the smallest screen.
Mobile-first design did not always make the most sense. Consider this: in 2007, Apple released the first generation of the now-ubiquitous iPhone. After the first month of its release, just nine million Americans owned a smartphone. In ten years’ time, that number has climbed to 250 million. Additionally, all the babies born the same year as the iPhone are now ten years old. They are tomorrow’s consumers who have grown up from their earliest years navigating smartphones with as much fluency as books and bikes. Web design for today and tomorrow must consider how to design accessible, functional websites and apps that translate easily into the palms of digital consumers’ hands.
Graceful Degradation and the The End of Desktop As the primary target
As smartphones and other mobile devices grew in popularity, so did their use for web access. Websites originally designed for desktop use appeared clunky on smaller screens. What is worse, sites bogged down with Flash, excessive images and resources caused slow load times on mobile devices, or no loading at all! To improve the functioning and design of websites and apps for mobile devices, designers and developers adapted mobile versions of the full websites. This desktop-first approach to mobile website and app development is called “graceful degradation.” It begins with the full website and aims to pare down content to its essentials, in order to speed up load times and simplify the layout for an optimal mobile user experience.
Times have changed, and our smartphones have become less and less a “phone.” O2 reports that today we spend twice as much time browsing the internet from our smartphones as we do making phone calls. With the shift in mobile user habits and growth in mobile web usage, leading designers and developers recognize the need to shift their approach to mobile-first.
Enter Progressive Enhancement for the Mobile-First Era
Mobile-first web design follows an approach called “progressive enhancement.” Rather than begin with all the bells and whistles of a desktop version, progressive enhancement is a responsive design that builds the most essential features of a mobile site first. The mobile version then becomes the foundation upon which one develops fuller versions of a website or app for tablets and desktops. The progressive enhancement approach allows for a highly adaptive design that can continue to meet digital consumers’ diverse needs as they emerge.
In addition to adaptability, progressive enhancement allows developers to confront early the restrictive nature of a mobile platform. Developing mobile websites and apps requires a design that functions successfully with a smaller viewport and storage capacity, as well as limited battery life and slower—and at times inconsistent—wireless network connections.
This approach has raised questions from designers and developers accustomed to the desktop-first approach. How can one adopt the mobile-first approach without sacrificing the full functionality of a desktop experience? After all, desktop users may want access to more than the bare essentials.
Mobile first, not mobile only
When you think of “mobile-first,” it is important not to equate it with “mobile-only.” A mobile-first approach simultaneously holds in mind both the small screen and the big picture. In a mobile-first approach, designers and developers consider the full plan for features intended on both mobile and desktop platforms. With all the content categories in mind, a mobile-first approach prioritizes the features so that users on mobile and desktop devices access the most important information first. A clear understanding of the site or app’s goals help set content priorities that determine the default mobile layout. Beginning with the mobile layout, developers can adjust the scale of their design as well as functionality that best suits the desktop user experience. What results is a responsive design that speedily renders the mobile version of a site or app with the capacity to load additional layers in an expanded desktop experience.
Mobile-first is really a consumer-first development model. Whatever devices a digital consumer uses to access the web, mobile-first design ensures he or she has a great experience. It also ensures your website’s identity and objectives are clearly and consistently communicated to visitors across devices.
Google Goes Mobile
In recent years, mobile users have run into a bit of trouble while using Google’s search engine. When mobile users clicked on a link from the list of results, the mobile website did not contain the information for which they had searched. The reason for the confusion? It stems from Google’s ranking systems. Historically, the algorithms Google used to organize results relied on content from the website’s desktop page rather than the mobile version.
This used to make a lot of sense. Google’s ranking system worked this way because most people originally accessed digital media from their desktop computers. Pared-down mobile sites or apps easily functioned as secondary to the full sites, until digital consumer habits shifted in favor of mobile access. Over time, more and more people used their mobile devices to seek information from Google. The results from search engine results pages — SERPs for short — still reflected information indexed from full desktop sites. Consequently, the information mobile users sought through Google did not always appear on the mobile site or app. In a mobile-first world, Google’s desktop-first indexing method weakened the reliability of the search engine.
Along with the rest of the web, Google’s users access its search engine primarily from mobile devices. In November 2016, Google product manager Doantam Phan announced Google’s plans to determine relevant search results through mobile-first indexing. While Phan reports desktop sites will continue to appear in Google’s index, they will take a back seat to mobile sites and apps. This indexing method will allow mobile and desktop users alike a trustworthy experience. The top results appearing on their Google search will reflect content relevant to their query. “We’re going to continue to build a great search experience for all users,” Phan writes. For site owners concerned about the impact of implementing a mobile-first index, Phan affirms that Google will introduce the process gradually with careful monitoring.
How Mobile-First Web Design Impacts SEO
In short, the shift to mobile-first indexing will definitely impact SEO strategies. If your site or app is not mobile-friendly, you are out of luck. In order to climb to the top of the SERPs pile, you will need a site configuration that features an accessible layout, fast load times and high-quality content across multiple devices. Although there are several methods for creating mobile-friendly websites and apps, Google recommends responsive design.
Responsive design is an approach to web design that adapts the site or app relative to the user’s viewport size. Although the layout of a site or app may appear differently from screen to screen, both your HTML code and URL will remain the same. To determine how the website or app will render on a given device, developers use CSS and Javascript to adjust the scaling of your web content to fit the screen. For mobile visitors, this results in a readable and clickable mobile site. The easier to see and navigate, the more likely visitors are to remain and return!
As mentioned earlier, Googlebot crawls a website or app to determine if it contains relevant content for a search query. In order for Google’s crawler to do its job, your site or app must allow access to its resources, such as CSS, Javascript and image files. This behind-the-scenes content doesn’t appear to your visitors, but it is an essential part of helping Google’s crawler identify how your website or app is built—and why. Websites built to be compatible with mobile devices will receive higher rankings and appear closer to the top of the SERPs. As Google transitions to mobile-first indexing, it is important to remember Googlebot will crawl mobile sites first and desktop sites second. Whether in a visitor’s palm or on their office desk, mobile-first web designs ensures Google’s crawler understands your content is relevant and easily accessible to all visitors.
Mobile-first web design helps avoid some of the “common pitfalls” Google warns about in creating mobile-friendly websites and apps. Many of the issues Google identifies stem from web designs that were not created with mobile in mind. Inconsistent functionality and speed can cause your rankings to take a hit. With a mobile-first design, multimedia content is designed for compatibility across devices, avoiding the risk of broken video links. Responsively designed pages maintain the same URL, avoiding the frustration of a faulty redirect. Additionally, mobile-first designs ensure lightning-fast load times on all devices. These elements impact how Google rates your website or app for a good reason. For Google, a good visitor experience is an important aspect of returning relevant search results.
Wondering how to ensure your website or app is up to speed for a mobile-first index? Below are some helpful tools from Google to ensure better readiness for a mobile-first index:
Mobile-Friendly Test Tool: This tool allows you to determine whether your website or app is mobile-friendly. The Mobile-Friendly test tool will show you what your page looks like on a mobile device as well as identifies potential issues mobile users would face on your page. For more information, check out Google’s guide.
PageSpeed Insights: This tool analyzes your website or app to determine how fast it runs on both mobile and desktop devices. The tool also provides a suggestions summary that lists reasons your site or app might not yet be running lightning fast. Though this tool has been wrapped up into Google’s Mobile-Friendly Test Tool, it offers helpful additional information particular to the speed of your site or app.
Structured Data Testing Tool: This tool allows prototyping, testing and adjustment of structured data markup. For more information on supported formats and placement recommendations, visit Google’s guide for structured data.
robots.txt Tester: This tool tests websites and apps for crawl accessibility by Googlebot. This how Google’s algorithms identify new and updated relevant websites and apps for search results. For more information on Googlebot, visit Google’s search console guide.
Search Console Home Page: The search console allows site owners to verify their mobile websites or apps so Google can access and index your content. For more information on the verification process via Google’s search console, please visit the guide for Google’s search console.
If you currently have a desktop-only site or separate mobile page, you may find the notion of building a new mobile-first page daunting. As Google transitions to a mobile-first indexing system, this is a great time to consider making a transition yourself. A mobile-first web design will protect your rankings in Google’s search results, as well as offer a dynamic experience for visitors on every screen.