Genesis responsive design no longer good enough for Google?

[MelonBird]

As you may know, on April 21, Google will start ranking sites according to mobile friendliness. Since I use a responsive theme from Genesis (News Pro), I thought my site would be fine.

Guess again. The Mobile Friendly test, which is the one they're going by, likes some of my pages but rejects others which are virtually identical. I cannot for the life of my figure out what the problem is. The reason it always gives is "Content wider than screen" and "Links too close together." And yet the site looks great in the Studiopress responsive simulator, and on every phone I've seen it on. Nothing appears to be wider than the screen, but that's true in the Mobile Friendly test rendering too!

At first I assumed it couldn't be Genesis, so I removed my ads. That wasn't it. Then I tried removing plugins that added visual elements to the pages - nothing. So I checked Pagespeed Insights for more details, but that just led to more confusion. Take this page, for example. In the "Mobile Friendly" test, I get the above issues. But in Pagespeed, it just says "Tap targets too close together" and lists several elements - no mention of the content being wider than the screen. One of the tap target elements is the breadcrumbs, so at least that aspect of Genesis responsive design is apparently being rejected by Google now.

Can anyone guess what these issues are and how to fix them? Or suggest anything to try or test that maybe I haven't thought of? I'd really appreciate feedback at all.

http://mixthatdrink.com

[David Chu]

I just ran your site there, and it came out mobile-friendly! Maybe your Super Cache was showing an earlier version.

As for links being too close together, your social icons are close, and many items near the bottom of the page are close. But that may all be fine. Maybe have your buddy phone test it!

I will say that I have many clients who don't like the amount of whitespace on modern sites, so when they get a theme upgrade or responsive makeover, they will say "yuck" and ask me to carve out the extra space. Depending on context, I'll tell them that this isn't a good idea - phone users often need this extra space for tap-ability and readability. Sometimes the client doesn't care, and insists on it anyway. Whatever! 🙂

But your site looks great, and I wouldn't take those hyper-fastidious Google recommendations too literally. Just try their speed testing if you want to get bummed out - you could have a site load in 3 seconds and they'll still find all kinds of things to complain about. 🙂

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[MelonBird]

Hi Dave, thanks for checking it out, and for the kind words. But most pages are still showing as not mobile-friendly, like this for example. And I empty Super-Cache completely every time I make a change, before testing.

I've done a lot of work on this today, and learned some really bizarre stuff:

--Google is NOT okay with how News Pro does the entry meta footer, with the categories and tags. Had to enlarge those fonts in mobile view.
--Google is NOT okay with how close a commenter's name is to the comment time link. Had to add padding there.

And for the grand finale of weird, guess what's "wider than screen"? You know how in comments, people can link to their websites? So what you see on the screen may be "Jim" but Jim links to "http://sitenamehere.blogspot.com" or whatever? Well, if "http://sitenamehere.blogspot.com" is wider than a phone screen, as most links are, then your site won't rank as mobile-friendly. Even though the link isn't actually what's visible on screen.

I personally think Google has lost their tiny minds, but again, I cannot afford to ignore them. A drop in rank means a drop in income for me. I don't know what to do, except remove the option to link to your site in comments, and I prefer not to do that... but it may be my only choice. 🙁

[David Chu]

Melon,
Wow, then I'm as mystified as you! Maybe when I ran it, it passed because the socials didn't load! And the long link thing... that's grossly unfair! You might need to get a serious SEO geek on it. (that's not me).

I have 2 hackish last-ditch ideas you can try, but if Google is that unreasonable, it still may not work:

The first is to try forcing long URL's to break, like so. I never use this, but it will force a sequence of letters to "break" even if there's no space in it. Example:

a.myLink {
    word-break: break-all;
}

The last thought is to liberally hide overflow on any offending column. Such as:

.entry-content {
   overflow: hidden;
}

Good luck!
Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[MelonBird]

Dave, I think that first one helped... sort of. I still have to go through and manually change any links people have just copied and pasted into linked text, but at least now that is having an effect. It wasn't earlier!

So now I will have to manually fix it every time my commenters leave a link. 🙁

[David Chu]

Glad it helped a tad. Look around... maybe someone else somewhere is dealing with the same nonsense!

And you could use a sort of "nuclear comments" option by hitting everything in the comments, note the asterisk:

.entry-comments * {
    word-break: break-all;
}

That breaking can look a little funny on some words, of course.

Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[MelonBird]

Thanks, Dave, I found a Facebook group for Genesis, and someone there found the final steps. Which I'll post on the off-chance anyone else is having the same fun:

First, he had me add this, which is along the lines you were thinking:

body {
-ms-word-wrap: break-word;
word-wrap: break-word;
}

It made the long links stop being an issue, but I was still getting "fails". So he looked at my robots.txt and advised me to take out some blocking lines, which I won't repeat here because chances are no one else had those lines... there are infinite mistakes one can make with robots.txt, so clearly I need to sharpen my understanding of how it all works.

And that did it! Now every page is passing.

[David Chu]

Melon,
As they say in the old country, Ab Fab! Glad to hear it.

Yes, "word-wrap/break-word" is almost stock now. It's always included in the default WordPress themes now. Esthetically, I actually don't like it. 🙂 But it's useful in some ways, and obviously in this situation.

"word-break/break-all" is more drastic, and I suggested it because it sounded like you were in an extreme situation. "word-break/break-all" can look even funnier, because you have giant words splitting in half.

I believe you're also on point with the concept that all of this can be avoided with a bit of SEO awareness while building a theme. My own sites just cruise through these tests - more support for the concept of leaving decent space between things! And something else to convince my OCD clients to do that! 😉

Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[PTTurboe]

Hello All,

I am getting Google Webmaster Tool warning now using the Executive Pro theme.

It is coming out mobile friendly on the Google checker site.

But, not in Webmaster tools.

Anyone know of a fix?

[MelonBird]

PTTurboe, the Mobile Friendly test is the one that counts. If you're passing it, you WILL be considered mobile friendly and your rankings will be fine. Webmaster Tools can take weeks to update its results. I got all my pages passing the mobile friendly test a week or two ago, and Webmaster Tools has just now reduced the number of pages it says are a problem. Eventually they'll all go away, but Google doesn't check everything immediately. So don't worry about that.

Also, if you're in WMT and use it to see what's "wrong' with your pages, it uses the PageSpeed tool, which is very nit-picky and tells you every single thing you could possibly improve. You don't have to get "perfect" in it to keep your rankings high.

[lunadauhnn]

I hedged my bets with using Genesis themes exclusively for my higher-end client websites...and I'm not displeased but this new shift with Google analytics is making my clients nervous.

They all are totally "mobile compliant" but the Page Speed Insights show some issues....

All my premium websites are built with Genesis and Foodie, News Pro & (coming soon) Parallax.

I am hoping that StudioPress is going to post a guide for how to optimize Genesis websites for the new Google analytics...Some of my clients have been building their search rankings for eons and are very concerned. Can you, the StudioPress team, hand out some suggestions for how to proceed?

Many thanks for a great and well-supported product.

Dawn @ RedSpiralHand.com

[jonathonfowler]

Hi,

I’m getting a Pagespeed Insights message advising me my site isn’t Mobile Frindly. I use Genesis Sample Theme as a child theme.

The Pagespeed Insight message:

73 / 100User Experience
This page may not pass Google’s Mobile-Friendly Test. Learn more.

Should Fix:
Use legible font sizes
The following text on your page renders in a way that may be difficult for some of your visitors to read. Use legible font sizes to provide a better user experience.
The following text fragments have a small font size. Increase the font size to make them more legible.
Contact Jonathon and 3 others render only 5 pixels tall (16 CSS pixels) see screenshot.
Adaptable and…guarantee you and 33 others render only 5 pixels tall (18 CSS pixels) see screenshot.
Scotland’s mos…cular settings and 15 others render only 5 pixels tall (18 CSS pixels) see screenshot.
"Thank you for…n the future!" renders only 6 pixels tall (19 CSS pixels) see screenshot.
Ashleigh & Mat…Wedding Photos renders only 5 pixels tall (16 CSS pixels) see screenshot.
Finding the ri…of the moment and 12 others render only 5 pixels tall (18 CSS pixels) see screenshot.
containing hig…ur wedding day and 5 others render only 5 pixels tall (18 CSS pixels).
love renders only 5 pixels tall (18 CSS pixels).
Jonathon Fowle…burgh, EH7 5NP and 2 others render only 5 pixels tall (18 CSS pixels).
Telephone: 07817 517604 renders only 5 pixels tall (18 CSS pixels).
All content on…onathon Fowler renders only 5 pixels tall (16 CSS pixels).
Hide details
Configure the viewport
Your page does not have a viewport specified. This causes mobile devices to render your page as it would appear on a desktop browser, scaling it down to fit on a mobile screen. Configure a viewport to allow your page to render properly on all devices.
Configure a viewport for this page.

I’m confused, I bought Genesis a couple of weeks ago after reading it was mobile responsive…but it’s not ‘mobile friendly’?

I;d be grateful if anyone could advise me how to fix this. Thank you!

---

Award-winning wedding photographer in Scotland

[Author]

Posts