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

Printable View

03-19-2015, 01:50 PM
kuau

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

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 :)
03-19-2015, 03:27 PM
molendijk

See this.
03-19-2015, 03:50 PM
molendijk

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.
03-19-2015, 04:03 PM
mlegg

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">
03-19-2015, 11:32 PM
molendijk

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.
03-19-2015, 11:48 PM
kuau

Interesting. I did think they were synonymous, but you're probably right.
03-20-2015, 12:46 AM
kuau

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?
03-20-2015, 12:56 AM
molendijk

This suggests that your pages don't validate. Have you tried the WC3 Markup Validation Service for your pages?
03-20-2015, 01:12 AM
kuau

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

Quote:

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.
03-20-2015, 04:37 AM
ddadmin

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.
03-20-2015, 04:24 PM
kuau

Wow, thanks so much! I knew nothing about css media queries. Thanks for pointing me in the right direction. I still would like to know how best to deal with images. I learned originally that you should specify the width & height to speed up the image display, but I'm wondering if, to be mobile friendly, perhaps you do something like <img src="photo.jpg" style="max-width:100%" > within a <div> that is set to a percentage width. Would that work?

And for slideshows like Swiss Army, do you specify the div that holds the slideshow with percentage widths as well? All my sites have fixed widths wider than 900. Should I make them narrower, or should I change everything to percentages? Thanks, aa :)
03-20-2015, 05:06 PM
molendijk

You could do things like the following:

Code:

<div style="position: absolute; height: 30%; "> <img src="http://www.dynamicdrive.com/forums/image.php?u=22058&dateline=1218538433" alt="" style="height: 100%; min-height: 100px"> </div> <div style="position: relative; width: 30%; "> <img src="http://www.dynamicdrive.com/forums/image.php?u=22058&dateline=1218538433" alt="" style="width: 100%; min-width: 100px"> </div>

To avoid distorsion of the images, it's better to give them either width or height, not both.
03-20-2015, 06:28 PM
Beverleyh

A really easy way to deal with images in responsive design is to do this;

Code:

img { /* basic responsive img */ max-width: 100%; height: auto; width: auto\9; /* IE8 */ }

this will make all images scale proportionally within their container (they won't break out and skew your layout) and it works back to IE7 as well as modern browsers. Plus, no extra markup required.

Slideshows (depending how they're constructed) can be a little more difficult to deal - those that use divs with background images don't behave the same way as img tags - but there are workarounds. Method #2 from this blog entry tends to be a good fallback solution and works well with divs and video http://www.dynamicdrive.com/forums/e...ponsive-Design
03-20-2015, 06:47 PM
ddadmin

The most common approach for making images responsive is, as you've mentioned already, to give it a max-width: 100% and height: auto attributes:

Code:

<img src="myimage.jpg" style="max-width:100%;height:auto;">

This in conjunction with placing the image inside a container that's fluid (ie: has a percentage width or the BODY tag itself) or responsive (using CSS media queries) will make the image scale up and down at the same time as its container. So again the devil's in the details of where your images are placed within your layout.

For JavaScript slideshows, making them mobile friendly is a different process for each specific script, assuming they are not mobile friendly to begin with. In the case of Swiss Army it isn't yet, though other scripts like Ultimate Fade In Slideshow are, so you might want to consider using that one until we get to upgrading the former as well for that purpose.
03-21-2015, 01:33 PM
kuau

Dear B: Thanks so much... great information! I have never ventured into this part of css... been out to lunch I guess LOL. I haven't had time to try anything yet, but I'm just wondering if making a site mobile-friendly will screw up the desktop version (?).
03-21-2015, 01:42 PM
kuau

Thank you! I used to use Ultimate Fade In Slideshow. I'm sure there was a reason why I switched to Swiss Army, but can't recall at the moment. I'll check it out. I really appreciate all the great feedback.. mahalo! aa :)
03-21-2015, 03:25 PM
Beverleyh

Quote:

Originally Posted by kuau

Dear B: Thanks so much... great information! I have never ventured into this part of css... been out to lunch I guess LOL. I haven't had time to try anything yet, but I'm just wondering if making a site mobile-friendly will screw up the desktop version (?).

Not really - you can retro-fit a desktop layout to make it fit narrower screens.

You may have heard of the term "mobile first" on your web travels, which (amongst other things pertaining to performance, accessibility and usability that I won't go in to here) means that a site has been developed with a narrow, linear layout in mind first; all default CSS for a site that looks and works nicely in mobile proportions comes at the top of a style sheet, then, media queries are added to target progressively wider screens (whenever your layout needs adjusting);

Code:

/* default skinny screen CSS here */ @media ( min-width:35em ) { /* CSS for screens that are wider than 560px */ } @media ( min-width:50em ) { /* CSS for screens that are wider than 800px */ } @media ( min-width:64em ) { /* CSS for screens that are wider than 1024px */ }

You can use px or other units for media queries, although it's preferable to use relative units (ems) due to more predictable browser scaling. Useful info here http://bradfrost.com/blog/post/7-hab...ries/#relative The default font-size for browsers tends to be 16px so you work out your desired em value by dividing the number of target pixels by 16 (1024px / 16px = 64em)

Anyway, the above media queries are for a mobile first approach. But you can use them in reverse to tackle a desktop layout that progressively downscales to narrower tablet then mobile widths;

Code:

/* wide desktop CSS here */ @media ( max-width:60em ) { /* CSS for screens that are narrower than 960px */ } @media ( max-width:50em ) { /* CSS for screens that are narrower than 800px */ } @media ( max-width:37.5em ) { /* CSS for screens that are narrower than 600px */ }

This is one of the ways to work a desktop layout backwards so that it becomes size-appropriate for mobiles.

Be aware that the retro-fitting/reverse approach usually leads to more CSS overrides and therefore bigger stylesheets, plus a greater use of display:none; to hide content that doesn't "work" on mobile.

Menus can be challenging too so you might find some useful info here http://bradfrost.com/blog/web/responsive-nav-patterns/

Hope that helps
03-21-2015, 11:53 PM
kuau

Wow, you are a goldmine of exactly what I need to know. I wish I had asked this question 5 years ago! Thanks so much. I have a lot of homework to do! :)
02-17-2018, 07:18 PM
kuau

Was Swiss Amy Slideshow ever made mobile friendly? I love that slideshow (thanks, John!).
02-17-2018, 09:15 PM
jscheuer1

By no means. However, there is a very good approximation in the current version of DD's:

http://www.dynamicdrive.com/dynamici...nslideshow.htm

For which I've update my Extra Buttons add on:

http://www.dynamicdrive.com/forums/e...e-in-slideshow

I'm also working (truth be told it's on the back burner for now) on a successor to Swiss Army, but it's currently without a lot of documentation, and is a completely different sort of script. Beta:

http://jscheuer1.com/cssimages/imagesdemo.htm

and:

http://jscheuer1.com/cssimages/imagesdemo2.htm

Might have some bugs, etc. But I was pretty impressed with it last I was messing with it. Main issue for me were the docs. If you like it, and think it works well on mobile (please check), perhaps you can help me refine the documentation. I did start writing them. Not sure if I have any of that (docs) live yet, though the code is pretty well commented.
02-18-2018, 04:09 AM
kuau

Hi John: Your successors to Swiss Army look great. I would be very happy to help with the documentation. God knows you've helped me enough. I was actually a technical writer for a software development company at one point. And I recall how programmers love to program but hate to do the documentation. The only problem is I may be the only person left on planet earth who doesn't own a cell phone, which is no doubt why I am trying to make my sites mobile friendly so late in the game. However, google has a site where it runs a test to see if it is mobile friendly and the results say: text too small to read, clickable elements too close together, viewport not set. https://search.google.com/test/mobil...40m5lGQSe-88Yw But it looks to me as if turning the phone sideways would solve the problem. Someone who is familiar with using a cell phone would be a much better tester of the functionality, and once it is mobile-friendly enough, I could help with the documentation. :)