How to make your website as mobile friendly and get it ready for Google algorithm change

By -

Google have announced website should be friendly for mobile and it is essential factor in ranking in the search result from 21st April. The changes in Google algorithm is reported by an email if you are a account holder in Google webmaster tool so you have much time to occur changes in your site to become mobile friendliness.

Here we discuss few difficulties you are facing in designing website friendly for mobile and ready for algorithm change.

Viewport

Setup your website view port accurately on the page, view port tells at which widths the webpage will be responsive to. the view port Meta tag tells the browser How to behave when it renders the webpage,you can manage how big the view port will be.
The section of the page in view is view port so test it on a mobile, it tells either the view port sets on a certain width by showing display the top left of page or it display full width of web page.

 Example

Click Element placed not too close In mobile provide proper enough gap between the links to click, or if touch element on web page too close to each other so there is possibility to click wrong link.

Size Tap

Google suggest that links are at least 48-pixel height x width it depends on position of
view port.

Font Size

If font size is small enough it’s difficult to see on mobile screen
Google recommend some distinct suggestion on font size

  • Configure the view port, it produce font scale on different devices
  • use 16 CSS pixels, accommodate the size as required on the properties of the font size
  • use relative sizes of the base size which describe typographic scale
  • Text is in vertical space with in its characters and each font has to adjust. Generally use default line-height of 1.2em.
  • do not use different fonts and fonts sizes, restrict on the number of used font and typographic scale

Content sized to viewport

Content have to be obey the size of viewport, some of content do not, to solve this problem fixed width elements or fixed width device images create problems with fixed width like this

This code makes your image to have 600px width push image off the page

To adjust this remove width and height of image

But make sure image is in accurate size for website, or resize the image with server side code like ghost script or by Photoshop.

Use CSS for surfing that images width is not larger than the screen size.

 Google Mobile Test tool for your website

Test your website to check it fulfill all requirements of new algorithm changes Google produce a page for checking website is mobile friendly or not.

Click here for Mobile-Friendly Test

Illahi Bux

A freelancer Web & Mobile Developer,Trainer and Project Rescue. Help people in web & mobile developing for a variety of clients both near and far to grow the business.live truthfully and embrace their lives through creativity.

A freelancer Web & Mobile Developer,Trainer and Project Rescue. Help people in web & mobile developing for a variety of clients both near and far to grow the business.live truthfully and embrace their lives through creativity.

Leave a Reply

Your email address will not be published. Required fields are marked *