Historically, web designers focused on building pages for a few common screen sizes. But as the web expands beyond the desktop, it has become a critical component in form factors from watch faces to large-screen televisions. Modern web design focuses on creating pages that look great regardless of the browser’s size and characteristics. But for someone on a budget, developing sites for every browser is prohibitive. Thankfully, an increasing number of visitors use the web via mobile devices. By adopting mobile-first web design, sites can once again work well for most users without the huge effort of developing for every possible screen configuration.
What is Mobile-First Design?
Put simply, mobile-first design focuses on traffic originating from devices with smaller form factors. Not only does this imply designing for smaller screens, but it also suggests the use of techniques that reflow sites in different ways when a screen’s orientation changes. It also avoids heavier techniques and frameworks that might slow down mobile processors, instead preferring technologies like Accelerated Mobile Pages (AMP) that highlight the exact information of interest to your visitors. Mobile-first design is obviously important because it plays to a device’s strengths, but there are many additional advantages to this school of thought that give sites using it a key advantage over those that don’t.
Meet Visitors Where They Are
The most obvious benefit of this design trend is that most of today’s web traffic originates from mobile devices. In 2015, an estimated 56% of web traffic is mobile, with that number only projected to increase when 2016’s numbers are out. While desktop visitors tend to spend more time on a given site, they account for fewer overall page views.
This trend will increase not only because smartphone use is growing, but also because the mobile device landscape continues to expand. Phones now integrate with smart watches, which can display key information from websites in custom apps and displays. Smart glasses can render alerts and other content in heads-up displays, minimizing the need to interact with a separate device to consume content. As the meaning of mobile continues to evolve, sites that embrace mobile-first design will lead the way onto these new devices and screens.
Rank Higher With Google
Google’s business model thrives on delivering relevant content to users. If a visitor is not satisfied by the results of a search, then they’ll abandon Google for a more relevant engine. Fortunately, the goals of mobile-first design align well with providing relevant content, and Google has encouraged this by ranking mobile-friendly sites higher in search results.
As previously mentioned, mobile-first design focuses on making it easier to find the most significant elements on a page. This often involves avoiding ads and other features that don’t directly contribute to the page. Mobile-first design not only improves the end user’s experience, but also makes it easier for Google’s spiders to extract valuable meaning from a page’s text.
Google also integrates web content directly into its native mobile apps to provide a better browsing experience. In particular, Accelerated Mobile Pages result in content that loads instantly on supported mobile browsers. Sites that incorporate AMP as a part of their mobile-first strategy not only offer mobile visitors a great experience, but they also rank higher and receive more prominent places in Google searches.
It is hard to say just how significantly Google boosts mobile-friendly sites in its rankings, as it is fiercely secretive about the signals it uses. But as of April 21, 2015, Google began using mobile-readiness to sort sites across all search languages. Mobile design became even more critical in May of 2016 when further revisions to the search algorithm were deployed. While determining what Google looks for is a major challenge, it is safe to say that mobile-first design can give any new site a significant advantage against its competition.
Play to Mobile’s Strengths
Everyone has encountered the frustration of typing an address into a web form to locate nearby stores, or of reading a number off of a computer screen to make a call. Thankfully, both of these annoyances can be eliminated with mobile-first design. Not only are these benefits immediately apparent on mobile devices, but they can also improve the user experience for desktop-based visitors as well.
Many mobile devices include Global Positioning Systems. By using newer HTML features, a mobile-first website can request permission to determine a user’s exact location, thus eliminating the need to enter an address by hand. These same features are also available on most desktop browsers, thus transforming the common task of finding nearby amenities into a seamless experience. Further, mobile devices often support the ability to launch a navigation app directly from a website. As such, it is simple to convert visitors to customers with a single click.
Mobile phones also support URL schemes for dialing numbers from the browser. Savvy web designers can embed contact cards directly into their sites, making it a simple matter to add a business to one’s contacts. Similarly, feeds of events can be packaged in a form ready to integrate with mobile calendar apps. In the case of Google, calendars connect deeply throughout all of Android such that anyone with the correct settings receives reminders as push notifications, along with driving or transit directions to the event’s location.
Conclusion
Mobile-first design is much more than an easier way to build pages that most browsers can view. It ranks sites higher in search engines, gives readers a faster experience, and offers an unprecedented depth of integration not seen with any other web technology to date. Any organization or business wishing to reach the largest audience would do well to design first for mobile form factors, focusing later on the desktop and laptop user experience.