How to comply with Google's demand to Fix mobile usability issues?

**kuau** · 03-19-2015, 01:50 PM

Over the past few days I have been flooded with emails from Google Webmaster Tools advising me to "Fix mobile usability issues found on..." virtually all my websites. I understand that Google will start penalizing sites in search results that are not mobile friendly. I have read all of Google's suggestions and I would like to comply but, to be honest, I cannot figure out how to go about it. On all of my sites I use css to define a set width for the site. Is the best solution to change all my width specs to percentages? And font sizes to percentages? I use a lot of images. How can I possibly define images dimensions as percentages? I use the Swiss Army Slideshow a lot, and the Anylink Menu script. How can they be made mobile-friendly? Are there responsive versions of these scripts? Or should I switch to different scripts?

Is it better to have 2 versions of websites, one for desktop and one for mobile? If so, do you code that in the <head> section so it is auto-detected, or do you place links in the html? My sites are all database driven and for the most part the image dimensions are stored in a database table. I really have no clue how to even begin to convert my sites to responsive designs. I also do not have a smart phone so cannot even try things out. Any help would be greatly appreciated.

Mahalo, aa

**molendijk** · 03-19-2015, 03:27 PM

See this.

**molendijk** · 03-19-2015, 03:50 PM

Putting this:

Code:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

in the head of my pages forced Google to analyze them as mobile friendly.
You can test your pages here.

**mlegg** · 03-19-2015, 04:03 PM

OMG I've been getting a ton of those emails too and I did have in <meta name="viewport" content="width=device-width, initial-scale=1.0">

**molendijk** · 03-19-2015, 11:32 PM

Here's my understanding of 'responsive' and 'mobile-friendly'. Correct me if I'm wrong.
'Responsive' and 'mobile-friendly' are not identical things.
A site is mobile-friendly if all its content is readable on any device. So a menu or an image that exceeds the width or height of the screen does not make the site mobile-unfriendly if wiping allows the visitor to see all of the menu or the image. In such a case, the site may be unresponsive without being mobile-unfriendly.
A site is unresponsive if it does not adapt to the size of the screen (of the device). A horizontal menu whose length (from left to right) does not adapt to the horizontal size of the screen makes the site unresponsive. But who cares as long as it is mobile-friendly? Google will not penalize you for unresponsiveness, but it will do so for mobile-unfriendlyness.

**kuau** · 03-19-2015, 11:48 PM

Interesting. I did think they were synonymous, but you're probably right.

**kuau** · 03-20-2015, 12:46 AM

I added that line to the head of my pages and it made it worse, showing only a phone sized section of my home page. What I would really like to do is learn how to adapt the css and slideshows so that they are in fact mobile-friendly. Does anyone know how to do that?

**molendijk** · 03-20-2015, 12:56 AM

This suggests that your pages don't validate. Have you tried the WC3 Markup Validation Service for your pages?

**kuau** · 03-20-2015, 01:12 AM

Thanks. I checked it and it validated with only one warning, which I have no idea what it means...

Using experimental feature: HTML5 Conformance Checker.

The validator checked your document with an experimental feature: HTML5 Conformance Checker. This feature has been made available for your convenience, but be aware that it may be unreliable, or not perfectly up to date with the latest development of some cutting-edge technologies. If you find any issues with this feature, please report them. Thank you.

**ddadmin** · 03-20-2015, 04:37 AM

This is a rather expansive topic, but in general when Google complains of your site not being mobile friendly, it's referring mainly to the layout of your page and font size, and not the scripts on your page. Adding a viewport tag is just the very first step in optimizing your site to be mobile friendly (and Google compliant):

Code:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

If that's all you did with no other changes to your page's CSS to optimize the viewing experience for smaller screen devices, then you're actually doing more harm than good, making the page even more cumbersome to view with the additional scrolling and panning to get to the desired part of the page.

The next step is to examine the layout of your page, and start using CSS media queries to selectively hide non essential portions of your page as the screen size gets smaller, such as the left side bar, banner or header images that exceed the width of the target viewing device etc. The goal is to end up with just your primary content that can be viewed comfortably by the mobile user without the need to scroll horizontally or squint to read it. For example, in your CSS file, you might add the following CSS to enlarge the default font size of the page and hide the left side bar of your page once the width of the browser falls below 740px:

Code:

@media (max-width: 740px){ /* responsive layout break point */

	body{
		font-size: 1.1em;
		line-height: 1.5em;
	}
	
	#leftcolumn{
		display: none;
	}

}

Test out your page against various different browser dimensions to see how the page reacts based on CSS media queries you've added to your page to simulate how it will look on mobile devices, and if the viewing experience is optimal.

Using CSS media queries alone should help you pass mustard with Google, but to make your site truly responsive, you may need to modify the markup of your page as well to use a responsive layout such as those offered in our CSS layouts section. Or you can take things a step further and use a responsive CSS framework such as Bootstrap.

Thread: How to comply with Google's demand to Fix mobile usability issues?

Thread Tools

Search Thread

How to comply with Google's demand to Fix mobile usability issues?

The Following User Says Thank You to molendijk For This Useful Post:

The Following User Says Thank You to molendijk For This Useful Post:

The Following 3 Users Say Thank You to ddadmin For This Useful Post:

Similar Threads

html5 mobile page sliding issues

google map marker issues via Json and PHP

Mobile detection function bound to click on a button, sadly having issues.

google issues?

Expando Usability

Bookmarks

Bookmarks

Posting Permissions