?Mobile friendliness of a website is the most significant factor when ranking results for a search performed  on a mobile device. We need to focus on how well a page renders and displays on different screen sizes for distinct mobile devices. 

One of the best methods to make the website mobile friendly and used by most of the people is responsive design using the mobile viewport. 

What is a page’s viewport?

A window in which a web page can be seen is called a viewport. It is not the area in which a page displays because the dimensions of the page can be bigger than the viewport. Basically it is what happens when you need to scroll from left to right to see the information present on the page. If you require to scroll the page from left to right to view the full page then it means  the page is missing the viewport or has an unconfigured viewport.

To add this mobile viewport to your page you need to use the viewport meta tag. Like other meta tags this is also placed in the HTML file and in the head section like as below:

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

The value in the content attribute that is width- device, tells the browser to render the page to fit in the device’s screen width. The initial-scale =1 commands the browser to make the page as wide as possible when a page is shown in the landscape. 

How to make your design SEO responsive?  

To make your design truly responsive you need to set the page viewport, size and content of the page according to the viewport. To make sure that your page good user experience for all type of mobile devices, below are some tips to follow:

• Avoid fixed width elements like large images. Compress the elements to fit within the width of the viewport. If you will not compress then the image will be larger than the viewport and will require side scrolling.
• As screen width varies from device to device so don’t not rely on specific width to render your page. Your page should render correctly at any width. 
• Use relative width values in your page’s CSS. Using absolute values can cause elements to load wider than the viewport. The same goes for positioning values. Large absolute values can cause assets to load outside the viewport. 

How to use viewport for Mobile SEO?

If your page has responsive design, it helps to make your site mobile friendly. It improves your SEO. But you also need other options to make it fully optimized:-

• Dynamic design: This requires you to build an entirely separate page and then serve the appropriate version by detecting the user-agent. To tell search engines which version they should access, and to prevent caching servers from sending the wrong version, you will have to use the Vary HTTP header on the page.

• Mobile subdomain: When you make a totally dynamic design, you need to make a whole new site and then host it at a subdomain like comapnyname.com . Google figures out the relationship between domains and domains  but you can not rely on this fact. So you need to add canonical tags for mobile sites pointing back to the desktop version. Finally, you’ll have to redirect visitors to each version, mobile and desktop, based on their user-agent. Even worse, subdomains don’t reliably share link juice with the rest of the site, so you’ll isolate your mobile and desktop sites from each other. This could cause issues in the future with Google moving toward its mobile first index.

How to make your font size mobile-friendly for SEO?

There exist different sizes for mobile devices so it is necessary for the text of your site to have a font size that is legible on various screen sizes. The font should be big enough so that it is not required to zoom the page to read the text, simultaneously it should be too big that the user needs to scroll all the time to see the text. 

What is the ideal SEO mobile font size?

The ideal mobile site has text that is comfortably readable when the user is looking at their phone at a comfortable distance.  The ideal font size for mobile devices is 16px. In your site’s CSS file use the ems in your font-size attribute. It makes the fonts more scalable.  Moreover the ems also helpful as it changes it changes text relative to the size set in the document.

How to make ensure your text is legible on all screens?

1. Search mobile themes or templates

If you are using any CMS like WordPress, shopify or other platform then you can buy a mobile template or theme that has the ability to make your site mobile friendly automatically.  The text will automatically resize to suit the device being used. 

Before buying any template, you should view the reviews given the other developers who used them. You can also visit the sites that have been made using the specific template and can have an idea about how it appears.

The templates or theme also provides live demo before payment so you can also preview the demo before purchasing. And foremost do not forget to use the mobile viewport in your web design. 

2. Implement mobile responsive design

 CSS also plays an important role to manage  the font for your site across different devices.

          Font size can use different units of measures to declare how big your text should be:

• pixels (px)
• points (pt)
• EMs (em)
• percent (%)

    It is recommended to use the browser default of 1.2em, 12pt,16px or  p{font-size:120%;}.

Below is the list of conversion for each measure:

For each type use reasonable font size: headings, paragraphs and titles. 16 pixels is default CSS settings. Most themes you installed for your site would have additional theme settings to make it easy for you to change the size based on your site and visitors needs.

3. Height size for your font

 There should be enough gap between the sentences so that the text does not appear congested. While you can get away with small line heights and tight text on a desktop site, it will be almost impossible for a user to read such text on a device with a small screen without zooming and this makes for a rather unpleasant experience.

Google recommends using at least the browser default line-height of 1.2 which means that the spaces between lines of text are at least 1.2 times the size of the text itself.

4. Media queries for different screen sizes

 To control the size of your text there are different media queries for various screen sizes. You can customize each font size based on different screen sizes in your CSS  file. For instance:

html{font-size:100%;}

@media(min-width:60em){html{font-size:100%}}

        Other items on which you can query on are: min-width, max-width, min-height max-height,  

       Google recommends  following media query rules:

• When the browser is between 0px to 640px wide, max-640px.css is applied.
• When the browser is between 500px and 600px wide, styles within the @media  are applied.
• When the browser is 640px or wider, min-640px.css is applied.
• When the browser width is greater than the height, landscape.css is applied.
• When the browser height is greater than the width, portrait.css is applied.

 5. Design different versions of your website for different devices

If you are unable to create a responsive web design, you can create a different mobile friendly site for your business. Using a separate mobile site requires extra work to create and maintain, but it has worked for some websites. 

You can use m-dots to create a mobile friendly site, hence the term “m-dot”. An m-dot is a new site designed to be mobile friendly and hosted at a subdomain, usually “m.websitename.com”. You have to redirect users on their phones to the mobile version of your site.