Why is a mobile-friendly website so important?
With an estimated 2.7 billion smartphone users worldwide, using it on average for 3 hours and 15 minutes per day, it’s more important now than ever to have a mobile-friendly website.
It’s also not surprising to know that, due to the vast number of internet users now using mobile devices, Google has been favouring mobile-friendly websites for a number of years over those that are not mobile-friendly in search results. Back in July 2018, Google released an algorithm update (mobile-first indexing) essentially stating that websites will now be indexed based on its mobile version and those that are fully optimised for mobile will rank better than those who don’t – simple.
It’s more than likely that your website has already been moved over to mobile-first-indexing, however, if you’re unsure, check your messages in the Google Search Console for a notification. Another signal that suggests your site has moved over is that Google will also label your site as last crawled by the Googlebot smartphone useragent which can be found in the URL inspection tool.
If you haven’t optimised your mobile site already, and you’re now left wondering what you can do to ensure your mobile site is performing as it should be, then follow our 6 simple tips below on how to make your website mobile-friendly.
1. Eliminate ALL Intrusive Interstitials (also known as pop-ups)
What is an intrusive interstitial? It’s essentially a popup ad where the content covers most or all the webpage. These types of popups make it frustrating for users as they can’t access the page as intended, therefore leading to poor user experience.
There are, however, a few exceptions such as when there are legally required notifications such as cookie usage or for age verification.
Below are examples of intrusive interstitials.
A mock-up of how an intrusive interstitial could look
Another reason why you would want to remove these types of popups (and not just because it’s negatively impacting mobile users) is that you can receive a penalty from Google for using intrusive interstitials so we’d thoroughly recommend checking through your website to ensure these are removed.
There are a couple of ways around this issue if you still wish to keep the popup – bear in mind this currently doesn’t affect desktop users so you can still include it for those. Below is some example of acceptable popups, it’s also with noting that it’s still currently acceptable to show users a full-screen pop-up when exiting the site.
A mock-up of how an age verification or cookie consent interstitial could look.
2. Always Include A Viewport Meta Tag
If you’re unfamiliar with this term, the browser’s viewport is the area of the window in which content on a webpage can be seen.
A typical mobile-optimised website should contain a similar tag like the following:
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
Without a viewport meta tag, a mobile device will render pages based on your standard desktop screen widths which will then scale the page down to fit mobile screens. By including a viewport tag, it enables you to control the width of the screen and the scaling of the viewport. When adding this tag onto your webpage, ensure it is within the <head> tags of your HTML.
Another thing to know is that the width=device-width key-value pair sets the width of the viewport to the width of the device. The initial-scale=1 key-value pair sets the initial zoom level when visiting the page. Also, if you wish for your scale settings to remain consistent when switching orientations on the iPhone, developers must add a maximum-scale value to prevent this zooming, which can have the sometimes-unwanted side effect of preventing users from zooming in on specific content.
3. Ensure your website design is responsive
As well as making sure that viewport meta tags are in place to ensure pages adapt and render properly on mobile devices, it is also important that your website design is responsive in other areas such as by using legible text, the correct spacing between elements, and no horizontal scrolling.
Google will pick up on poorly designed mobile websites so it’s important to get these things right. Essentially what you don’t want your users to have to do is to manually resize or zoom in to view content on your page. When testing your website on mobile, make sure the layout is fully compatible with all relevant mobile browsers and devices.
4. Improve Page Speed
Page speed is one of the areas where technical SEO can have a real and immediate impact on organic performance and is increasingly important as Google prioritises mobile search.
Since the Google Speed Update was first announced in January 2018, they used it as a way to penalise sites with slow mobile pages. Webmasters, SEOs, developers and site owners then had several months to react and improve their web site performance before the algorithm update fully rolled out in July 2018.
There are a number of different ways to improve page speed such, the main fundamentals can simply be found by running your website through Google’s own PageSpeed tool: https://developers.google.com/speed/pagespeed/insights/
You can also use Google Search Console to understand site-wide speed issues too. This can be found by simply logging into your Google Search Console account, then scrolling down to Enhancements and then Speed (experimental). There you will find a report for both mobile and desktop which shows you your page speed status (Slow, Moderate, Fast) and states all affected URLs. This is still a new tool to Google so features and data might change whilst they’re still testing the new report.
5. Think About Burgers… and Navigation Options
Screen space is limited on mobile devices, which explains why the hamburger menu is one of the most popular options when looking specifically at mobile navigation. The hamburger menu allows you to hide the main navigation so it’s only accessible when the user chooses to click it. It is typically a small icon that usually opens into a side menu or navigation drawer.
It’s the perfect option for when your navigation menu needs to accommodate a large number of options because if you were to display the whole menu on mobile, the clickable elements will be too close together which will then be deemed as “not mobile-friendly”.
Below is an example of an effective burger menu on a mobile device:
One disadvantage when using the burger menu is that it because the navigation is essentially hidden, users are less likely to use it so it could affect your engagement metrics when looking specifically at mobile users. However, the hamburger menu has become the go-to navigation option for apps and websites so more and more mobile users will be familiar with using it.
6. Don’t Use Flash
It’s important that your mobile site doesn’t run using Flash as it is not mobile friendly and isn’t licensed for most mobile browsers, it is also officially shutting down in 2020 so if any of your content is only accessible on Flash, it’s time to get it swapped over before it’s too late. Google highly recommend that you use HTML5 instead to ensure your website content works across both mobile and desktop browsers.
Conclusion
With the growing number of mobile users, it’s important that your website strategy is up to date to not only ensure that your content is readily available across all devices and browsers, but also fully accessible to search engines.
An optimised mobile site is crucial to any marketing plan so as well as following our tips mentioned above, make sure that your forms are user friendly by being short and sweet (AutoFill is a must), CTAs are clearly displayed and if you have more than one CTA on your page, you need to space them out to avoid the “clickable elements too close together” error in Google Search Console.
Also, if you have a large site with a lot of products/content, a search bar function will help to improve the navigation whilst freeing up space on the screen. It also makes it easier for mobile users to find and access all pages, which is a bonus.
If you’re not sure on where to start, check out Google’s own mobile-friendly test tool to see if your web page is mobile-friendly: https://search.google.com/test/mobile-friendly. If you’re still unsure, feel free to contact our team today to see how we can assist you with your mobile SEO strategy https://www.koozai.com/services/seo/mobile-seo/.
Sources:
- Average time spent on mobile: https://blog.rescuetime.com/screen-time-stats-2018/
- Estimated smartphone users: https://techjury.net/stats-about/smartphone-usage/
Share this post
Digital Ideas Monthly
Sign up now and get our free monthly email. It’s filled with our favourite pieces of the news from the industry, SEO, PPC, Social Media and more. And, don’t forget - it’s free, so why haven’t you signed up already?
An Award-Winning Digital Agency
We create cutting edge, award-winning digital campaigns.
Questions?
Call us on 0330 353 0300, email info@koozai.com or fill out our Contact Form.
What do you think?