Since 21 April 2015, Google has been seriously considering the mobile-friendliness of websites when ranking them in the search results. According to the search engine giant, it wants users who utilize its search facility to get results that are relevant, of high quality and that can easily and comfortably fit in their mobile phones.
The company has further bolstered this decision by innovating a label that is used to distinguish websites that are mobile-friendly from those that are not. This helps a user who is going through a result page using their mobile phone to know which site to click on. In addition to that, the company places further emphasis on URLs that are user-friendly and sitelinks that are expanded as well as accelerated pages. All these features contribute to a positive surfing experience by mobile users. Every SEO company is now fully aware of the importance of a mobile-friendly website. If you want yours to be considered mobile-friendly, here is what to do and what to avoid.
No ad to show here.
Do not utilize Flash in your website
Most of the mobile phone browser applications cannot render Flash material. As such, if you want to make your site as mobile-friendly as possible, do not use any Flash content in your website. Normally, Flash is used to display animations, navigation tools as well as some page content. According to Google, utilize alternative modern technology to accomplish your multimedia needs because Flash is out of the question.
Set your viewport properly
Every webpage is constructed using HTML code. One of the code elements that are used to construct the page is known as a viewport. It is a meta tag which instructs the browser that you are using on how to present the webpage in the screen of your device. The viewport instructs the browser on how to set the dimensions of the page and how to scale it to unique widths.
The viewport is normally located in the head of the webpage code. In some cases, there is no viewport. In such cases, the browser in the mobile phone will render the webpage such that it fits the width of the screen where the page is being presented. If you provide SEO servicesand are having some trouble locating or establishing a viewport for your webpage, then Google has a tutorial on how you can set this feature.
To optimize your website for mobile phones, do not set the viewport to a width that is fixed. There are website developers who set this viewport to a width that will fit most commonly used mobile phones. Unfortunately, this does not cover all mobile phones in the market. As such, the website is still not considered mobile-friendly by Google. To avoid this problem, simply set the viewport value as follows:
‘width=device-width’
By making this setting, the width of the website is automatically matched to that of the device that a user is utilizing. To make the website even more responsive, you can add a special attribute as follows:
‘initial-scale=1’
By setting it this way, your website will effectively fill the screen when the mobile device is in landscape or in portrait position.
One last step to ensure that your website is mobile-friendly is to size your content in the viewport. Some website developers set CSS widths that are absolute. These widths cause elements such as video and dynamic images not to fit properly in the width that they have selected. To overcome this challenge, it is best to set the CSS width as follows:
width: 100%.
This allows the website to fill the mobile screen in portrait and landscape modes. It also allows elements such as the videos and images to fit properly in the pages.
Make sure the fonts in your website are large
Normally, when you correctly set the viewport for your website, the font in the website is automatically set according to the device that the user is viewing the website through. To fulfill the requirements set by Google, there are further adjustments to be made. The company advises that you use a font that has a size of 16 pixels or is based on this size. Vertical space between the lines of text in your website must be set at 1.2em. In addition to that, there should not be many different font sizes and fonts in your website. This practice can lead to messy web pages.
Ensure that the buttons and links in your website are well spaced
Google refers to the buttons and links in your website as tap targets. On a mobile phone, these targets are more challenging to tap than in a computer screen. This is because the user’s fingers are wider than the cursor of a mouse. As a result, they are bound to be more prone to issues of inaccuracy.
To be considered mobile-friendly by Google, you should ensure that these tap targets are well spaced from each other. Make sure that the links and buttons on your website measure approximately 7mm wide. This can also be interpreted as 48 pixels wide. This should be the measurement used for buttons that are used frequently, links for navigation, search portals as well as the fields utilized for forms. Any other targets that are not used so often can be smaller. However, they must also be well spaced from each other. In this way, a user will not accidentally tap on the wrong target while targeting the adjacent one. The spacing between the small tap targets should be 5mm.
Conclusion
Thanks to technologies such as the Android operating system and touch screen capability, many people are now using mobile phones to access the Internet. This method is convenient because in this way, they can easily perform Google searches from the comfort of their homes, places of work or even their cars. As such, it is very important for your website to be mobile-friendly. Google is well justified in imposing penalties for all websites that are not mobile-friendly.
