Google Reports Mobile error 'Text Size Too Small'

Hi

Google analytics keeps reporting that my text is too small to read when rendered on a mobile device.
I've checked and Google have access to index both my css and JS files (robots.txt is not blocking anything).

My mobile css sets the font-size to 16px which I've read is Google recommended minimum font size?

Still if I run the mobile friendliness test I get

X Text too small to read
X Links too close together
X Content wider than screen

Can someone point me in the right direction, what am I missing?

Regards,

Pete
LVL 58
Pete LongTechnical ConsultantAsked:
Who is Participating?
 
Tom BeckCommented:
My iOS Simulator is showing what Kyle posted. I'd trust that more than an online simulator.

I noticed in the Safari Development tools that Safari is interpreting your Google Analytics / Custom Search / Delayed Ad code such that it is putting an iFrame in the DOM tree BEFORE the head tag.
iFrame in a bad place.Try moving your Google Analytics / Custom Search / Delayed Ad code to the bottom of the page.

Also remove these extra meta tags:
<meta name="viewport" content="target-densitydpi=device-dpi">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Open in new window

When I do these two things on a local copy of your page I go from what Kyle posted to this:
With corrections.
0
 
Tom BeckCommented:
Hard to say without seeing the site, but it sounds like your site is not responsive down to mobile screen size ("Content wider than screen"). So basically your page shows the same way on mobile as it does on a desktop and visitors are forced to zoom in and scroll around to read the content. Google has made its requirements for mobile compatibility more strict recently. Essentially, all sites must be mobile friendly to get Google's seal of approval. Otherwise your SEO rating suffers.
0
 
mark brownCommented:
You need to set a viewport first in order to make your website mobile friendly. See the link: https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/set-the-viewport
I think this is the main reason that you are getting above error.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Pete LongTechnical ConsultantAuthor Commented:
Sorry Troops link to homepage

The site 'should' render a different size and load a different css on a mobile device so either I've set that up wrong, or its not working?

Thanks for the replies

P
0
 
Kyle SantosCustomer RelationsCommented:
Screenshot-1.png
I took a quick look at how your page performs.  Some of the site appears to render properly, but I highlighted the top and bottom of the screen showing where its not rendering properly.  Seems like your Header and Footer are not adjusting with different css.
0
 
Pete LongTechnical ConsultantAuthor Commented:
0
 
Pete LongTechnical ConsultantAuthor Commented:
OK  - Ive replaced the Google Tracking code with the latest one - its still in the <head>
Ive changed the CSS and the footer now appears to resize correclty
Ive removed those three meta tags.

Can you recheck http://www.petenetlive.com/home_test.html to see how it renders now?

Cheers

P
0
 
Pete LongTechnical ConsultantAuthor Commented:
On a brighter note Google now categories that page as
'Awesome! This page is mobile-friendly.'

So we are making some progress

P
0
 
Tom BeckCommented:
It certainly renders better in the iOS Simulator.
iOS SimulatorStill, that iFrame just below the <html> tag seems strange. Maybe I just never noticed that behavior before.
0
 
Pete LongTechnical ConsultantAuthor Commented:
Hi Tom,

Im going to quit while I'm ahead, Time to do a site backup and roll the change out sitewide.
Thanks for your help - If ever you have a broken firewall I hope I can repay the favour :)
What simulator are you using? is it freely available?

Pete
0
 
Tom BeckCommented:
Using the iOS Simulator that comes with xCode on a Mac. But you could just as well use Chrome Developer Tools. There's an icon in the upper left that lets you choose a mobile device by screen size.
Device mode
0
 
Kyle SantosCustomer RelationsCommented:
Apologies, I should have stated I was using Google Chrome's developer tools as Tom just showed you.

I've been trying to keep up to date on Google's algorithm for Mobile Optimization by reading some good articles here and there that explain it very well.
http://moz.com/blog/9-things-about-googles-mobile-friendly-update
http://searchenginewatch.com/sew/how-to/2402354/mobile-optimization-and-the-google-algorithm-change-7-steps-to-stay-friendly#

Believe me, Experts Exchange is going through this same overhaul, despite just having released its Mobile App!

o/
0
 
Pete LongTechnical ConsultantAuthor Commented:
Cheers guys much appreciated :)
0
 
Kyle SantosCustomer RelationsCommented:
Anytime! o/
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.