How to Fix Mobile Usability Error in Google Webmaster


#1

Recently i checked my site through webmaster, everything was fine except the Mobile usability issue. It ask for view port etc.

As, right now, i did not make my site fully responsive, nor i added any view port tags etc.

I would like to ask from @Mohammad how to fix the issue, you see in the screenshot.

We have various view port tags, which one should i insert. and should i bring responsive must in my site.?

Site goes here: www.templatezy.com

#2

There is a brief info on the same error: please Check

https://support.google.com/webmasters/answer/6101188?hl=en


#3

These errors are received by all template owners who have not yet made their templates responsive by installing the viewport tag and using CSS3 media queries to create a fluid stylesheet for their mobile users connecting to your site via mobile phones or tablets.

Google now favors Mobile responsive sites over non-responsive sites in order to serve its users with fast loading and user friendly websites that may serve their queries faster.

Six Famous Mobile Usability Errors and their FIXES

  1. Flash usage
  • Fix: Mobile devices dont render flash based content therefore instead use HTML5 or gif to create animations
  1. Viewport not configured
  • Fix: Read below
  1. Fixed-width viewport
  • Fix: Never set content width to a fixed value instead use width=device-width to make content auto adjust itself to screen size.
  1. Content not sized to viewport
  • Fix: Use relative width and position Relative values for CSS elements. Use Overflow Hidden to avoid horizontal scrollbars
  1. Small font size
  • Fix: Set font-size such that it may be clearly visible to the mobile user. Best to do is to set it to 100%
  1. Touch elements too close
  • Fix: Use wider margins and padding values. Keep a distance between borders and the content.

Viewport not configured

Add the following meta tag to your blog

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

Add CSS3 Media Queries

Now you just need to add different styles to your content widths and font sizes for sections like Header, Posts, Sidebar and Footer to make them fluid and self-adjusting to different screen sizes. Start creating the styles for screen width 320px and then proceed to other sizes. Take help from MBT stylesheet source file

/* -----------Responsive Styles Cheat Sheet by MBT -----------------*/
@media only screen and (max-width:320px) {
}

@media only screen and (max-width:380px) {
}

/*-----iPhone 2G, 3G, 4, 4S ----------*/
@media only screen and (max-width:480px) {
}

/*-----iPhone 5,6 ----------*/
@media only screen and (max-width:568px) {
}

/*-----iPad, Tablet, Kindle, Nexus ----------*/
@media only screen and (max-width:930px) {
}

@media only screen and (max-width:1024px) {
}

@media only screen and (max-width:768px) {
}

Remember to user percentages for widths to make them relative. Never use fixed dimensions It will take only 30 minutes to make your site fully responsive. You can test your site on device emulators like


#4

Thanks @Mohammad for being letting us the Six Famous Mobile Usability Errors and their FIXES. i will soon add the viewport, follow the above rules, and make the site fully responsive.

Also let me know, what can i do for this integrated video. it would be work too.

<div class='featurecontentleft'>
      <div class='slideshow'>
        <iframe frameborder='0' height='290' src='//player.vimeo.com/video/113319050?byline=0&amp;portrait=0' width='499'/>
      </div>
    </div>

After the customization, will the webmaster showing error will removed automatically. or this will showing after the customization done.