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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Kyle SantosQuality AssuranceCommented:
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
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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 SantosQuality AssuranceCommented:
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 SantosQuality AssuranceCommented:
Anytime! o/
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Search Engine Optimization (SEO)

From novice to tech pro — start learning today.