Mobile isn’t a trend.
Its growing dominance means that it’s the present and future. Smartphones are now so ubiquitous that you would be hard pressed to find someone without one. New data from comScore shows that total time spent online is now dominated by mobile devices.
Given this shift towards mobile, Google’s announcement of its mobile-first indexing system is not at all surprising. Previously, desktop results would be shown to users across all devices. The problem though is that mobile users may be shown a different version than what they were expecting. The new indexing system then would prioritise a website’s mobile version over its desktop version when ranking the site in search.
Here is what Google says about the new changes to the index:
“Although our search index will continue to be a single index of websites and apps, our algorithms will eventually primarily use the mobile version of a site’s content to rank pages from that site, to understand structured data, and to show snippets from those pages in our results.”
The writing on the wall has been quite clear for some now: Google is increasingly shifting towards a mobile web. If your website doesn’t have a mobile version or at least a responsive design, you can expect to see lower rankings in the search results.
Another reason why mobile matters is due to sales.
According to data from Google, 67% of mobile users indicated they were more likely to purchase a product or service if the site was optimised for mobile. And 61% said they were more likely to leave a site if they couldn’t find what they were looking for right away.
As more people use mobile devices to browse and connect online, a new trend is emerging: Mobile first design. Businesses that are able to make the transition stand to benefit greatly. Here we take a closer look at what mobile first web design is and how to get started with your own local business website.
What is Mobile First Design?
For years it made sense for businesses to design their websites for the desktop. Mobile was generally built as an afterthought and not given much consideration. Browsing the web on a mobile device was simply not practical and network speeds made the experience even more frustrating.
But that quickly changed.
Mobile usage began seeing widespread adoption with the introduction of the smartphone and began steadily growing since 2009. Now, data from comScore reveals that the number of global users is higher on mobile devices than on desktops.
Figures from StatCounter also confirm that web browsing on smartphones and tablets has risen to 51.3% compared to desktop’s 48.7%. Given these figures it makes sense to prioritise a mobile first design, an idea that was proposed nearly 8 years ago by Luke Wroblewski and has since gained in popularity.
What mobile first does is prioritise mobile development. Certain design elements that work on desktops don’t always translate to its mobile counterpart. One obvious example is the use of Flash which doesn’t display properly on most mobile devices. Other instances (e.g. multi level menus, auto playing videos, etc.) can lead to a poor browsing experience for mobile users or make the site difficult to navigate.
To better understand why mobile first make sense, it helps to look at comparisons between graceful degradation and progressive enhancement as depicted here.
Graceful degradation attempts to solve the problem of rapidly advancing technology. Originally, the term was used to describe the practice of building a site so that newer features could work on modern web browsers. But certain features would be stripped or degrade “gracefully” for users on older browsers. The idea is to serve up enhanced versions and then account for legacy system so the site would still be functional.
In terms of mobile design, graceful degradation means building a full standard site and then scaling back to accommodate smaller screen sizes. The problem with this approach is that loading different features on a site may work great on the desktop version but could lead to slowed performance on mobile devices.
On the other side is progressive enhancement which means designing and developing a website for mobile first. Essentially you start with the core foundation of your site on mobile which can then be “enhanced” to display more robust features for devices with larger screens such as tablets and desktops.
Both take completely different approaches but progressive enhancement works for several reasons:
- Increases your reach: The percentage of time spent on mobile devices continues to climb with no signs of slowing down. Having a site optimised for mobile is increasingly becoming necessary to compete.
- Directs your focus: There just isn’t room for any extraneous feature on smaller screens. Starting with mobile first design forces you to focus on the most important parts of your website.
- Adds new functionality: Starting with a mobile first design lets you incorporate mobile features into your design right from the start. Some examples include location information from GPS, multi-touch input, voice input, etc.
We know that mobile is increasingly important and we also know that Google is preparing serious changes to its search index that will make mobile more of a priority. Now that you’re convinced of the value of mobile first design and its utility, how do you actually go about implementing it?
Here we look at how to prepare your site for a mobile first web.
Implement a Responsive Design
Your first priority is to make sure your site is mobile friendly. If your site isn’t optimised for mobile devices, you risk losing potential sales from mobile visitors bouncing out.
First, head over to Google’s Mobile-Friendly Test tool then input your site’s URL in the box and click the Run Test button. If your site is not optimised for mobile devices, you will see the following:
Google will even display a screenshot of what visitors see from a mobile device. From this example, users are presented with the desktop version of the site which offers a poor browsing experience due to its small text size and difficult navigation.
One solution is to implement a responsive design which is a grid like structure that dynamically changes to fit all screen sizes and resolutions. This configuration is even recommended by Google.
Unlike creating a separate mobile site where you have another site to manage, responsive design solves that problem. It provides a better browsing experience across all devices whether users are viewing your site from a smartphone, tablet or desktop. Responsive design also offers a number of SEO advantages, one of which is that the Googlebots are able to efficiently crawl and index more of your site’s content.
But even with a responsive design, your priority is to keep mobile users engaged. Keep the following in mind when designing for mobile:
- Eliminate pop-ups: Pop-ups may be acceptable on desktop versions of a website but they can be incredibly frustrating on mobile.
- Prioritise content: Designing for a smaller screen size presents a number of challenges. But taking a mobile first approach forces you to prioritise your content and reconsider any extraneous elements that provide little value.
- Consider typography: With limited screen space, you need to pay special attention to the typography and font size you use. Your content needs to be easily readable as most mobile users can’t be bothered to zoom in and out on your pages.
Traditional websites typically display prominent menus at the top of the page where they are clearly visible. Here’s an example from Target:
But trying to fit in the same navigation menu on mobile just doesn’t work due to the limited screen space. One solution is to shrink the menu into a drop down list and make it accessible at the top of the screen.
Here’s what Target does on its mobile site:
Tapping on the icon on the top left expands the menu:
Helping mobile users navigate your site is a high priority. But it can also be challenging due to the limitations of smaller screen space. Compacting the navigation menu in this manner helps mobile users easily find the right category.
Site structure is another important consideration. Multi level menus with subcategories embedded within categories may work on desktops but it can lead to a frustrating experience on mobile.
A flat site architecture (pictured on the left) works well on mobile devices as it ensures that pages are accessible within only a few taps. A deep site architecture may work on desktops but it can make navigation difficult and confusing for mobile users.
As you prepare your site for a mobile web, put some time into how you will structure your site. Ideally, you want to keep all pages accessible within a few taps and make your navigation as straightforward as possible.
Design For Conversions
The primary purpose of your site is to convert your visitors whether it’s to make a purchase, sign up for a free trial or fill out a lead form. Designing for conversions is a tricky proposition especially on mobile devices where screen space has a higher premium and attention spans are shorter.
HubSpot offers an excellent case study on how a few simple changes resulted in more sales. Analytics data revealed that conversions for one of their landing pages was 20 to 30% lower for mobile users.
The hypothesis was that making their content more easily digestible and straightforward would increase conversion rates. Some changes that were made to the original landing page included shortening the content and formatting the images.
The signup form was also edited to be more straightforward by removing unessential fields.
With these changes, HubSpot was able to decrease bounce rates and increase conversion rates on the new mobile landing pages. The key takeaway is that switching to simple layouts not only kept visitors on the page longer but also resulted in more sales.
Improve Loading Times
Nothing is more frustrating than landing on a page while it continues to load. Mobile users are typically on the go so they are looking for information right away. They simply don’t have the patience to continue staring at a blank screen.
As shown from this infographic, 1 in 4 visitors will abandon a website if it takes longer than 4 seconds to load:
Even a one second delay in loading times resulted in huge financial losses for online merchants such as Amazon. Each visitor that leaves is a potential lost sale that your competitors undoubtedly capitalise on. So site performance is one area that simply cannot be overlooked.
Here are ways to boost loading times on your mobile site:
Minify and Compress Code
Utilize Browser Caching
Browsing caching saves web pages to a temporary storage location. When visitors revisit a page, the browser serves files that are already cached and only downloads updated content. Caching helps to reduce bandwidth and allows pages to load faster. Download and install the W3 Total Cache plugin:
Optimise Your Images
Images help to add more colour and life to a page. The problem though is that images are rather resource intensive and take the longest to load. This can be problematic for mobile users who may be browsing your site on a slower network. Large and unoptimised images could be negatively affecting the performance of your site. The WP Smush It plugin is particularly effective for compressing and optimising images.
Follow each of these steps to improve the performance of your mobile site.
Local Business Considerations
Even if you are a local business owner, the same principles apply. A report from Google has found that 4 out of 5 consumers use search engines to find local information, many of which are done from mobile devices.
This means that an individual’s first point of contact with your business may very well be through a mobile device. So in addition to implementing the steps outlined above, you’ll also want to do each of the following:
- Create a Google My Business account: Google My Business makes it easy for customers to find your business online, and helps you manage your listing on search and maps. Be sure to completely fill out your profile and verify your business.
- Make your NAP visible: NAP refers to Name, Address, and Phone Number. When mobile users are searching for local businesses, they’re mostly looking for contact information. Make sure contact details about your business are clearly visible.
- Include a call to action (CTA): A CTA is simple an action that you want visitors to take on your pages (e.g. Call today to schedule a consultation). One example could be including your phone number where users can tap to call your business directly from their device.
- Simply your content: The case study from HubSpot illustrates how a few simple changes can lead to more conversions. You’ll want to take similar measures by making your layouts as simple and straightforward as possible. This also means simplifying your content and clearly communicating your value proposition.
Here’s a good example of a local business website that clearly prioritises mobile:
The design has a simple layout, there’s a call to action with the phone number, and the navigation menu is easily accessible from the top. Taking a similar approach with your mobile landing pages can produce excellent results for your business.
As mobile usage continues to outpace desktop usage, designing for mobile has become a necessity for businesses to compete online. Extensive research has shown that mobile users increasingly prefer sites that are designed for their devices and are more likely to return in the future. That kind of engagement is incredibly invaluable but is only possible with a well thought out mobile design.