Implement Mobile Friendly Website Design Strategy for Google Algorithm Update

On April 21st Google released a major update to its mobile search algorithm that will change the website ranking order when users search for something from their smartphones. The algorithm will start supporting mobile-friendly websites and rank them higher on search indexes. Websites that aren’t mobile-friendly will get downgraded in search rankings.

In this article we will look at some of the common problems you might face while making your website mobile friendly and how to start developing a website which is aligned with the algorithm change.

Google’s Latest Update is all About Mobile Optimized Website

If you’ve missed the date, don’t worry as you still have time to make your website mobile friendly. But before strategizing your website update plan, do look out for some of the common problems faced while developing mobile friendly websites.

Problem 1: Viewport Is Not Setup

Viewport enables your website to define the width that the webpage will be responsive to. This is a common problem faced by many web developers while making their website mobile friendly.

Solution

You can solve this problem by setting up website viewport meta tag which tells the browser how to behave when it renders the webpage. Start by browsing a web page on a mobile device, if the web page is zoomed in to display the top left of the page then the viewport has been set for a certain width. If you see the entire width of the page while zooming out and the content fits in the screen, then the viewport is setup for displaying the full width of the webpage.

Example of using viewport meta tag:

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

Problem 2: Small Font Size

While browsing, often the font size of the website shrinks and needs to be enlarged for viewing on a mobile device.

Solution:

Following steps will help you to fix the issue:

• First configure the viewport, which makes the fonts scale on different devices.
• Use a base font size of 16 CSS pixels.
• Adjust the size as needed based on properties of the font being used.
• Use sizes relative to the base size to define the typographic scale.
• Text needs vertical space between its characters and may need to be adjusted for each font.
• Restrict the number of fonts used and the typographic scale: too many fonts and font sizes lead to messy and overly complex page layouts.

Here’s a sample code for fixing the small font size problem:

body {font-size: 16px;}

.small {
font-size: 12px; /* 75% of the baseline */
}

.large {
font-size: 20px; /* 125% of the baseline */
}

You can also use Google’s recommendations for fixing font size issue from the following article – Use Legible Font Sizes

Problem 3: Content Not Sized With Viewport

This problem means that your content is not aligned with respect to the size of your viewport and the images are not scaled as per the mobile device’s screen size.

Solution:

This generally can be fixed by using a width element where images can be used, and the content sizing can also be fixed using width divs. Images are going to be a majority of the problem for content mapping and resizing.

Your website will have an image placed with the code below:

<img src=”image1.jpg” width=”1200″ height=”600″ />

This code will always make your image of 1200px width, and on mobile device it will display the image off the screen.
To fix this problem, remove the width and height of the image.

<img src=”image1.jpg” />

Update your CSS file to ensure that the width of images are never larger than the screen size.

img
{
display: block;
height: auto;
max-width: 100%;
}

Problem 4: Touch Elements Are Too Close

This problem is about the click buttons/menu bars/buttons on your web page which are too close to each other, making it difficult for the mobile user to click the correct link. This issue is commonly seen on the main navigation of the website where links are crowded together and should be spaced out evenly.

Solution:

Google recommends that the links should be placed at least 48 pixels height/width depending on the viewport position. Feel free to browse an article where Google explains about the size to maintain between different elements Size Tap Targets Appropriately.

Problem 5: Where To Test Your Site?

To test your website and make sure that you have met all the pre-requisites of the new algorithm change, Google has created a page where you can manually test your pages – Google Mobile-Friendly Test.

Are you currently facing mobile optimization challenges? And want to solve them swiftly without losing your search rankings?

Are you looking to optimize your mobile apps?

Feel free to check our blog explaining How To Optimize iOS Apps