A mobile-friendly website is no longer an option; it's a requirement. This isn't new - we've known for years that more and more people are using mobile devices to browse and search online. Google has long been pushing people to adopt mobile-friendly web design. But in 2019, we need to go beyond simply mobile-friendly and start thinking mobile-first.
Why You Need a Mobile-Friendly Website
What you already know
Mobile-friendly web design has been a major factor ever since "Mobilegeddon." In April 2015, Google released a major update to their search algorithm that gave a ranking boost to mobile-friendly websites. The algorithm made it very clear: either your website was mobile-friendly, or it was not. There was no in-between.
Source: Google Webmaster Blog
Even back then, Google made people realize that mobile was important, and they could not afford to ignore it.
Google's latest step: mobile-first indexing
Last year, Google announced that they’re taking mobile-friendly to the next level. It's called mobile-first indexing.
Desktops are no longer top dog when it comes to search. In fact, 60% of Google search traffic comes from mobile devices. And with voice search on the rise, expect desktop traffic to continue to drop.
To reflect this trend, Google changed the way it collects information from websites. Historically, Google has used the desktop version of your website and then boosted your mobile ranking if it finds a mobile version. Now, they are starting their index with the mobile version. They will still crawl your desktop version, if necessary, but only if you don't have a mobile-friendly site.
So what does all this mean? If all of your content is already optimized for mobile, or you have a responsive website, you shouldn't need to worry - both versions of your website have the same information, and Google will continue to index it.
However, some websites have stripped-down mobile versions that contain a limited amount of information. These sites may suffer lower rankings in the future, since Google will prioritize the sparser mobile content.
Overall, Google is encouraging a shift in the way we think about websites. Many businesses focus only on how their website looks on a desktop. Mobile becomes an afterthought. Google wants us to see the mobile version as the primary version of a website.
Now that you know why a mobile-friendly website is important, let's look at ways to optimize your site for mobile.
Related Reading: The Business Owner's Guide to Designing a Website For Your Business
How to Make Your Website Mobile-Friendly
1. Make it responsive
Responsive design means your website adapts to fit whatever device someone is using. Between desktops, laptops, phone, tablets, and more, there are tons of different screen sizes out there. Responsive websites use flexible layouts that will look good on any size device.
A responsive site is a great mobile-friendly option because it includes all of your website content, regardless of what device someone's using. It just displays it differently. It's great for web designers too, because they can focus on providing a great mobile experience without designing a whole separate website.
2. Include the same content on your mobile site as your desktop site
Again, because Google is now looking at mobile as the primary version of your website, your mobile site must have all of your content.
In the early days of mobile design, developers often created separate mobile sites, or m.dot sites (for example: m.company.com instead of www.company.com). Because the desktop design was slow and cumbersome on mobile devices, m.dot sites were often stripped-down versions, with simplified content and limited navigation. Have you ever been browsing a website on your smartphone and seen a "View Full Website" option? That's a sign of a separate mobile site.
With mobile-first indexing, you don't want Google looking at a site that only has a fraction of your content. Make sure that your mobile version has all the same information, including text, images, and videos. This also includes the back-end stuff like meta data, alt tags, and structured data. If you do have a stripped down mobile site, now is the time to consider a switch to responsive design.
3. Optimize it for speed on mobile
Google also announced that as of July 2018, "page speed will be a ranking factor for mobile searches." And, since Google is now prioritizing your mobile content, that means that slow pages could affect your rankings for both mobile and desktop searches.
Google knows that page speeds matters. A large percentage of users will abandon (bounce) off pages that take too long to load. This is especially true on mobile devices, since cellular data networks are typically slower and less stable than a wired desktop connection.
So a mobile-friendly website needs to be optimized for speed on mobile devices. That means keeping your design and coding slim and efficient. There's a lot of technical work that goes into that, but the goal is to make sure your site isn't greedily eating into customers' cellular data plan.
Check how your web pages are performing with Google's free PageSpeed Insights tool.
4. Ensure text is large and readable
Smartphones have small screens, but high resolutions. So if you try to display the exact same thing from your desktop to your phone, it's going to get REALLY tiny. That's why responsive designs make text bigger - so it's legible on small screens.
Take a look at your website on your phone, and check that the text is large enough to read without zooming in. Also make sure that the page fits the screen, so you don't have to scroll sideways to read lines of text.
5. Ensure buttons are clear and easy to click
Like text, buttons should be large and easy to see on mobile devices. Give them plenty of space too, so users aren't accidentally clicking on the wrong thing. It's incredibly frustrating when you have to use the tip of a pinky finger to click on something because the links and buttons on a website are too close together.
6. Make phone numbers clickable
When people are on the go, they want to be able to find information quickly and easily, especially your contact information. If your phone number isn't clickable, someone browsing on a smartphone would have to remember the number or switch back and forth to their keypad. What a pain!
7. Make navigation obvious and easy to use
Regardless of whether they're browsing on desktop or mobile, your visitors shouldn't have to hunt for your website's navigation menu. On mobile devices, people typically look for it on the top or bottom of the screen. To preserve precious screen space, many websites also use a hamburger menu, which is reasonably well-recognized.
Keep your navigation as simple as possible by using clear language to describe your main categories, and try not to overwhelm your visitors with too many choices. If your navigation is too large, think about re-organizing your site structure, or at least consolidating the choices so they don't all show at once. Simplifying your site for mobile can actually lead to a more concise site overall that provides a better experience on desktop too.
Is Your Website Mobile-Friendly?
To check, test it out using Google's Mobile-Friendly Test. If your website isn't mobile friendly, you definitely want to start planning a responsive redesign of your website.
If it is, that's great, but make sure you're prepared for the new mobile-first approach too. When you're thinking about your website design, think about providing a great experience for the person on a mobile device first, because that's where more and more of your customers are spending their time.
If you need help making your website mobile-friendly, we offer website design and development services and we are happy to assist in making your website accessible for mobile. We're always happy to help!
This post was originally published in April, 2018 and has been updated with the latest information on mobile-friendly web design.