Google Emailing Non-Mobile Friendly Sites

[ZydoSEO]

Not sure if anyone here has seen one (first I've heard of it), but Google has emailed a friend of mine basically telling him that his site was a non-responsive site and that as a result it would do poorly in search results for searches performed from mobile devices.

I wonder if emails will go out about HTTPS as well.

Trying to get a copy of the exact email.

[EditorialGuy]

What's worrying by the message - at least the way I interpret it - is that Google appears to be threatening to rank what it regards to be "mobile unfriendly" pages differently on phones than it ranks them on PCs.

Exactly. And why not, if pages don't display well on phones? IMHO,the only real question is how important a ranking factor "mobile-friendliness" will be in mobile search.

[londrum]

it makes sense because users will likely prefer mobile friendly sites on mobile phones
my only problem with it is that the mobile test seems to paint everything with the same brush. a site that looks and works okay on one size of phone (a bigger phone) might not be as pleasant on a smaller phone, but they still mark it as mobile-unfriendly. the screen size that the test uses is very small indeed (is it 320px?).

but I've been meaning to redo my site for all sizes anyway, and the email finally got me to do it

[EditorialGuy]

my only problem with it is that the mobile test seems to paint everything with the same brush. a site that looks and works okay on one size of phone (a bigger phone) might not be as pleasant on a smaller phone, but they still mark it as mobile-unfriendly. the screen size that the test uses is very small indeed (is it 320px?).

Yep. "Mobile-friendly" is a moving target, and in any case, what looks good on an iPhone 4 may looked dumbed-down on a phablet. In time, perhaps Google's
mobile-search results will be personalized for the device that's being used. That would make more sense than assuming that the searcher with a Nexus 6 is viewing the same kind of screen as the searcher with a four-year-old iPhone.

[Rosalind]

I've just had this email for one of my websites. I notice this site fails the test too. It's something I've put off fixing because I'm too busy adding new content, and I imagine I'm not the only one.

Google's Mobile-Friendly test doesn't seem to update in real time, which is annoying.

Can anyone tell me whether adding mobile stylesheets in the following way to the html header is enough to pass their viewport test? Assuming the mobile version actually is mobile friendly, of course.

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile-friendly.css" />

[Dymero]

Rosalind, the tester appears to base its judgement on how the page actually renders, so I'd say that as long as your mobile style sheet is accomplishing the task, that stylesheet call should work well.

Don't forget to also add the meta viewport tag.

[nomis5]

Can anyone tell me whether adding mobile stylesheets in the following way to the html header is enough to pass their viewport test?

I doubt that very much. Thee is no need at all to have a separate "mobile" stylesheet, it can easily, and probably better, be incorporated into the main style sheet.

I certainly have no separate mobile style sheets and I still get the mobile friendly status.

[londrum]

i can confirm that it's not enough. what finally fixed it for me was to reduce everything below the width of 320px. if anything is sticking out beyond that then it seems to fail... unless you do this:

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

that should pass it, but unfortunately the mobile will just display the site at whatever width it is normally, even if it is a lot wider than the screen -- meaning the user will have to do loads of horizontal scrolling

i might be wrong though... that's just what happened with me

[lucy24]

the mobile will just display the site at whatever width it is normally

That's a separate error called "content not sized to viewport". It's most likely to show up with images, where you can override it with a {max-width: some-percentage} line. But if you've got the kind of site that sets all widths in explicit pixels, then it's time for a recode.

Which is OK, because it was time for a recode anyway. I'm not going to widen my (desktop) browser window just because some part of your page says {width: 1280px;} because the designer's preference is more important than the user's. Instead I'll go find a more readable site.

[londrum]

It's a problem when you've got banner adverts though. Lots of people have 728x60s, and even the 468x60 ones are too wide to pass googles test

Squashing a 728 down into 320 pixels by sizing in percentages makes it too tiny to read

[keyplyr]

Banners should be made responsive (not fixed) using CSS, as should all images. I offer banner advertising at the very top of hundreds of pages. Viewed on my small mobile phone they look fine and easily read. Png & Gif are better at this than JPG.

[micklearn]

Are these emails being sent to mainly ecommerce sites and/or informational sites, as well?

[lucy24]

Are these emails being sent to mainly ecommerce sites and/or informational sites, as well?

As well as what? Between commerce and information, that would seem to cover it. Anyway, there is no floor, no threshold below which they won't bother about you. Trust me on this ;)

But hey, guess what I just figured ou; I stopped by to report it. When Page Speed Insights says to minify your html, css and js, they don't mean minify. I could never understand why they claimed my html was minified (it isn't) while the css and js weren't (and never will be). It's because when they say "minify" they mean "compress" as with gzip.

In Apache the line is

AddOutputFilterByType DEFLATE text/css text/javascript

I have to assume my host already does this with html, so I didn't say anything about it. I just added this line. And abracadabra, now my styles and scripts are "minified" according to Google.

[not2easy]

Squashing a 728 down into 320 pixels by sizing in percentages makes it too tiny to read

It may appear that way on some device emulators, because they can't all emulate device pixels. Really it is not seen at 320 wide, it does not use "desktop" pixels but device pixels so a 728 banner viewed 320 on a desktop is unreadable, but not on a device with a 320 px screen (ratio 2 to 1) using 640 device pixels. It reads just fine.

[lucy24]

Squashing a 728 down into 320 pixels

If nothing else, a mobile device is typically a good deal closer to the user's eyes than a desktop screen is. And so on up the scale: imagine trying to read 14-point type on your TV screen. Just make sure your links aren't similarly squashed; a fingertip is not smaller than a mouse pointer.

[denisl]

but not on a device with a 320 px screen (ratio 2 to 1) using 640 device pixels. It reads just fine.

Does it really - especially in the various lighting/situations the mobile device may be used?

Not sure if I am going in the wrong direction here but with some of my sites I have incresed the font size for smaller screens.
And as Lucy has said, the space between tap points often needs to increase.

[not2easy]

Does it really? Yes, if you are "sizing in percentages" as was the context for that statement. If you're serving different sizes to different screens you are in a different environment, though it follows the same rules - just different instructions.

[Rosalind]

i can confirm that it's not enough. what finally fixed it for me was to reduce everything below the width of 320px. if anything is sticking out beyond that then it seems to fail... unless you do this:

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

that should pass it, but unfortunately the mobile will just display the site at whatever width it is normally, even if it is a lot wider than the screen -- meaning the user will have to do loads of horizontal scrolling

Thanks, Londrum. I added the viewport meta tag, and got another 10% or so on the test, but the same problem as you with horizontal scrolling. What I need to do is find a way to detect the screen size and deliver smaller images. I know I could use css to do that, but I'm looking for a server-side way to do it. That might work out faster in the long run for sites with just a few large images, or when it's mainly the top banner.

[Awarn]

I have a question on this. I have a page that has several pictures. The images are compressed. Pictures are 250px x 25px0 and when I use the pagespeed test It scores a 99 on mobile. The strange part in the desktop part it tells me I need to compress the images. I have tested using pingdom and grades are good. What do you think is the optimimal image size to maintain? Do you think it is best to have a small image and a large image?

[lucy24]

Careful, there: "size" means two different things, and Page Speed is concerned with both of them.

250px is small enough to fit even on a telephone in portrait mode, so that's good. But you don't say what the filesize (in kilobytes) is.

Further thought: Wouldn't the mere act of unzipping a gzipped file-- after previously gzipping it at the server end-- add something to page load time if you had a whole lot of images? At what point (in kps terms) would it become cost-effective? I don't think the various Page Speed testers even consider what happens on satellite connections, where every byte counts; they're measuring ordinary DSL-or-cable speeds.

[Hoople]

Are these emails being sent to mainly ecommerce sites and/or informational sites, as well?

I've received two of the emails:

One was received by a not-for-profit historic preservation org. Self granting with nothing for sale whatsoever 364 days of the year.

Second one came to me; a tiny web design 'firm' that on good years I come close to breaking even <G>

[toidi]

I won the google lottery 5 times this week, i'm guessing this is something different? Seriously, i never imagined that there might be a real google email mixed in with all the spam.

Hopefully, all those google employees who keep calling me are fake, or i am in big trouble.

[lucy24]

not-for-profit historic preservation org

Dang. So much for my hypothesis that they were saving dot org for later. I just got one for a dot org with name starting in a. Still haven't got one for my personal site, which includes content that hasn't been touched since 2009.

[keyplyr]

What I need to do is find a way to detect the screen size and deliver smaller images. I know I could use css to do that, but I'm looking for a server-side way to do it.

Try here for php to detect screen size: mobiledetect.net

However, CSS is the best(only?) way to size your larger images, just leave off the dimensions in your html code and size them with CSS.

[lucy24]

just leave off the dimensions in your html code and size them with CSS

But that's not a really happy tradeoff, because it adds to rendering time. If you put a "max-width" in the css, it will generally override simple "width" declarations. "Make the picture such-and-such size unless such-and-such circumstances arise."

[keyplyr]

But that's not a really happy tradeoff, because it adds to rendering time.

Well, that *is* the tradeoff in today's multi-platform world. With more modern rendering technologies, mapping is not the big issue it once was. We now float, layer, transcode, viewport, etc. CSS is the place for presentation.

"Make the picture such-and-such size unless such-and-such circumstances arise."

Yup, that's how its done. You don't need it in the HTML.

[denisl]

And how do you resize images that have image maps? I had believed that visitors were going to have to some scrolling.
Do I have to do new versions of them no more than 320px wide?

[keyplyr]

To move forward, sometimes things are left behind. For image maps, I started using absolute positioning with CSS. I like it better and it works well with mobile responsive.

[lucy24]

how do you resize images that have image maps

I think the short answer is: You can't.

[londrum]

i suppose if you were desperate you could break it up into individual images, and link each image. but they'd have to be of uniform size, like the cells in a table. maybe you could put them back together in a table too -- that would be really retro!

things were much better and easier when we were kids. those were the days. we didnt have mobile phones in those days so we didnt have all this faffing about

[alika]

For those who got an email, some questions:

- Did your traffic (mobile, organic) drop after the email?
- How long after receiving the email did your traffic drop?

I am just trying to gauge how much time Google gives sites before the impact of "be displayed and ranked appropriately for smartphone users" hit the site