Checklist: Is Your Website Mobile-Friendly?
For Google, it is a huge ranking factor for your website to be mobile-friendly. The reason behind this is because the search engine giant wants to ensure that its users are able to easily find relevant and high-quality search wants that are optimized for their smartphones.
Over the years, Google has made changes to its algorithm and overall mobile-friendly label (aka responsive web design) that should distinguish websites that are specifically adapted for mobile devices. Google launched Accelerates Mobile Pages (AMP), made changes to the mobile search results page that would include expanded sitelinks and user-friendly URLs.
It now requires that website owners have a website that meets standards by which Google demands. With that being said, what do you need to do to ensure that you meet those standards? Here is a quick list of things that you need to do (and not do) to ensure that you (hopefully) get the thumbs up from Google:
1. Avoid Using Flash.
Although many standard websites utilize Flash, it is important that you don't use Flash on a mobile website. Why? It's simple: the majority of mobile browsers can't read Flash content. Therefore, it is better to be safe than sorry by just not using it. Instead, Google recommends using modern technologies, like HTML5 to display your website content.
2. Make Certain That Your Viewpoint Is Properly Set.
A particular type of meta tag, a viewpoint has the ability to provide browsers with specific instructions on how the page dimensions and scaling needs to be adjusted based on the width of the device that the page is being viewed on. This needs to be displayed in the webpage head. When no viewport tag is set, mobile browsers will simply default to a desktop screen's width. If you need help setting up the viewport tag, there is a tutorial on Google.
The one thing that you want to avoid here is setting the viewport tag to a specific and fixed width. Some webmasters will actually do this and set it to a width that is common for the most popular mobile devices. However, it is important to keep in mind that this won't fit every type of device and that Google won't see it as mobile-friendly - and, remember, that's your end goal here.
As long as you follow the tutorial from Google and use the proper viewpoint tag (width=device-width), you will be set. It will ensure that your page adjusts to the width of the screen of whatever device that your page visitors are currently using. An important attribute that you should consider adding is this: initial-scale=1 because this will allow the screen to adjust landscape or portrait.
One final tip is to use a relative width value setting like width: 100% because this will help ensure that videos, images and other page elements are properly sized to the viewport.
3. Make Use of Large Font.
If you have your viewport properly configured, then the size of your page's font will be scaled based on the device of your user. However, there are a few recommendations from the search engine giant. For example, Google recommends using 16 pixels as a base font size. Vertical space in between each line is recommended to be set at 1.2em. It is also a good idea to avoid multiple types of font and sizes, as this can complicate the layout and result in what appears to be a crowded page.
4. Make Sure to Space Out Buttons and Links.
Buttons and links, which are also known as tap targets, are a bit harder to press when on a smartphone than on an actual computer. This is due to the fact that a finger isn't quite as accurate as a mouse cursor. Therefore, Google penalizes website pages that have tap targets that are too close together and too small.
Since the finger pad of an average adult is approximately 10mm wide, Google's recommendation of a tap target is a minimum 7mm wide (roughly 48 pixels). This is particularly true for the important ones, such as navigational links, form fields, search bars and other frequently used buttons.
Tap targets that aren't used as frequently can be smaller, but they need to be no smaller than 5mm wide and cannot be too close to another target.
5. Avoid Using Full-Screen Pop-Ups.
On desktops, it isn't unpopular for full-screen pop-ups to appear in the form of an advertisement or a mailing list sign-up. However, on a mobile device, these are unnecessary and disruptive. Sure, it may still seem like a good idea from your point of view as a business owner, Google doesn't see it that way. In fact, you will be penalized because it sees these large pop-ups as interference the user experience.
So, instead of using a full-screen pop-up, you should go with a banner or possibly try app indexing, says Google. With app indexing, content from your app will show up in search results and can promote your business, which can be very effective.
6. Use Google's Tools to Run a Check.
You always want to make sure that your site is operating well, and the best way to do this is to use Google's tools to run a diagnostic check. There are several tools that you can use on Google's Search Console, which was previously known as Webmaster Tools. It has a section specifically for mobile usability that will check the health of individual mobile pages and diagnose issues with your site. There's even a section that lists some common mobile design mistakes.
7. Commit to Site Speed.
When building a website that is mobile-friendly, Google says that you need to make sure that your website is built for speed. While a slow-loading site isn't necessarily one of the worst things in the world, speed is most certainly a ranking factor. Plus, statistics do show that slow-loading sites will result in web users leaving your site. So, for the best possible user experience and the highest possible ranking in the search engines, you need to commit to site speed.
There is a mobile tab on Google's PageSpeed Insights that will give you a rating of up to 100. It also gives you some ideas on how to speed up the site. This tool also gives you a ranking of up to 100 based on user experience and flags mobile-friendly issues similar to other tools from Google.
