Implement Mobile Friendly Website Design Strategy for Google Algorithm Update
07 May 2015
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
Get a Free Consultation
Talk to our expert today to know how we can help you optimize your website.
7 Website Design Mistakes You Should Avoid
Whether big or small, every business knows that the company’s website is one of the most important marketing collateral. Potential customers or users visit various websites looking for an answer to their business need or to buy a product or service offering. A website is the central hub of the company and a pivotal part of the company’s marketing and branding exercise and hence its appearance and usability are critical
Best Option for Enterprises: Mobile App or Responsive Design?
Businesses today have various questions in mind such as what is a responsive web design or a mobile website or a mobile web app for that matter. Are these all different names for the same thing?
E-commerce Challenges – 3: Making SEO Friendly E-commerce Site
A secure and attractive website is just one part of having an e-commerce solution. You need to have an SEO friendly e-commerce website in order to achieve success with your venture. If your website doesn’t rank on relative keywords or worst, is blacklisted by search engines, then no matter how attractive or secure your website is, you won’t have visitors.
5 Useful HTML5 Mobile Application User Interface Design Guidelines
Developing applications for smartphones is quite different from developing websites for the web, desktops and laptops. Today, there is more number of mobile devices than people present in the world.
