Mobile usability issues found on webmaster tools (education pro theme)

[lilysimulado]

Hi everyone, just got bunch of messages from webmaster tools that there bunch of mobile usability issues found on my site.

The specific errors are,

Touch element too close and content not sized to viewport.

I'm using the education pro theme, I thought it was mobile optimized or did I mess up somewhere?

Any help or advice how to solve this issue would be much appreciated.

Lily

http://theprepbook.com

[Tom]

Hi Lily,

I had this recently with a site I built with Altitude Pro (Google demanded more padding around some links in mobile views.) I think that Google has revamped their mobile guide and the tools used (like the alert(s) you received). If I'm right, this is another indication of their (growing?) emphasis on mobile design being a part of page rank influences. Perhaps these specific tests and metrics weren't

Webmaster Tools/Googlebot actually likes your mobile setup (Awesome! This page is mobile-friendly.) Did you change something?

PageSpeed Insights has a couple recommendations for you to boost your score.

Good Luck!

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[lilysimulado]

Hi Tom thanks for the insight, I have been trying to solve the issue but the webmaster tool keep giving me the error Touch element too close and content not sized to viewport.

Anyone with advice on how to adjust mobile so it follows google guidelines?

[lilysimulado]

Still stuck with this issue, anyone with any tips on how to fix it?

The 2 errors I get are,

Touch element too close
Content not sized to viewport

Any advice would much appreciated.

Thanks,

Lily

[Tom]

Hi Lily,

The theme is fine enough, out-of-the-box, but Google has become very particular about a few things, particularly for the mobile user experience ("UE" or "UX"). I expect StudioPress will update their themes appropriately for future use.

Your 2 errors from Google are explained on the results page:

"Content not sized to viewport":

"The page content is too wide for the viewport, forcing the user to scroll horizontally. Size the page content to the viewport to provide a better user experience. The page content is 332 CSS pixels wide, but the viewport is only 320 CSS pixels wide. The following elements fall outside the viewport:
The element <a href="http://theprepbook.com/">TOEFL iBT Practice Online</a> falls outside the viewport."

Your header/logo setup makes the page wider than the device screen (i.e. "viewport"): 332px page vs 320px device, making a horizontal scrollbar appear on 320px smartphones. Google justifiably hates this and cites your header/site-title link. Fix the header width setup and the problem disappears.

"Touch element too close":
(You may have already addressed this.) Something on your page -- links from your header, footer, social media plugin, whatever -- are deemed to be too close together for a mobile user experience according to Google. Space these items with some padding +/or some margin and this problem disappears too.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[lilysimulado]

Thanks Tom for your help! One last question (sorry im newbie), where in the css would I make these changes? I assume there is a section that only edit the mobile version of the site however I can't seem to find it. Any pointers would be a huge help.

Thanks again,

Lily

[emasai]

Look at the bottom of the style sheet for the Media Queries section. This css behaves differently according to the size of the viewport. If the rules that Tom indicated are not there you will need to add them.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[Tom]

H Lily ... and Lynne: (you're faster than I am 🙂 )

Unfortunately the theme is now "Sample" and there's no header/logo image to fix. 🙁

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[CDM]

I find all of this fascinating. We are investigating going with Genesis framework, and one of the reasons was to make our site mobile friendly.. which it isn't at all. I really like your site Lily and wow, I can't believe that Google jumped on you. We got the touch elements and the viewport error messages for our old site (and justifiably so).. But your site looks great. Now, I'm really worried that our new site won't be up to scratch either

CD

[Tom]

@CDM,

As info, the site we have been discussing here is an earlier rendition that used another theme design. The current rendition that you are seeing is the generic StudioPress "Sample" theme.

Genesis itself is "mobile friendly" and the professional themes produced for Genesis retain that feature. With each implementation and design modification of any site you have to be aware of the impacts that your design choices will have on the finished product.

Google is rolling out new criteria that you can read about here. I am confident that when fully revealed by Google, StudioPress and Genesis theme design shops will make adjustments suitable for Google's new algorithms.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[lilysimulado]

Hello again everybody! Just to clarify the mobile responsive issues I'm having most probably have to do with something I have changed when setting up the site.

I was able to solve the first error message I think, “Touch element too close”. the problem was that the font of the links on the footer was to small (14) I changed it to 16 now that error message is gone.

The second problem I'm still struggling with, “Content not sized to viewport”. More specifically: The page content is 332 CSS pixels wide, but the viewport is only 320 CSS pixels wide" I think it has something to do with the logo, anyone with any advice on what I should look at?

I have double checked that the * Add viewport meta tag for mobile browsers add_theme_support( 'genesis-responsive-viewport' ); is in functions. Also I haven't changed anything to the media queries which was recommended to check out and the rules are all still there.

Sorry for the long text:) Thanks for taking the time!

[Tom]

... and we're back to Education Pro 🙂

Yes, it is the logo, which is also continually changing size and composition. Please try the following changes in the Education Pro theme. This should do what I think you want to achieve with the header/logo area: smaller than the default 100 pixels, stay within the height of the menu.

1. Make the header/logo image file 300x83px; upload and place this using the theme customizer.

2. In functions.php, make this change (around line 40 ?) to set the logo height at 83 pixels. Make a backup copy of the current file before making changes.

//* Add support for custom header
add_theme_support( 'custom-header', array(
    'width'           => 300,
    'height'          => 83,    //  was 100
    'header-selector' => '.site-title a',
    'header-text'     => false,
) );

3. Make the following changes in the child theme stylesheet (style.css). Make a backup copy of the current file before making changes. (I cannot be certain of all of the changes you've made so I may have missed something. You may have to undo other changes you have made to padding and/or margin for elements in the header area.)

line 1002 - remove this code

.site-title a {
    margin: 3% 10%;
}

line 1051- change min-height

.site-header {
    background-color: #fff;
    border-top: 3px solid #e44a3c;
    box-shadow: 0 3px rgba(70, 70, 70, 0.05);
    min-height: 61px;       /* make this 80px again */
}

line 1068 - remove shadow

.title-area {
    background-color: #e44a3c;
    box-shadow: 0 3px rgba(70, 70, 70, 0.1);        /* commnent or delete this line */
    color: #fff;
    margin: 0 auto;
    padding: 20px;
    position: absolute;
    text-align: center;
    width: 300px;
}

line 1096 - change min-height

.header-image .site-title > a {
    float: left;
    min-height: 100px;         /* make this 83px */
    width: 100%;
}

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Author]

Posts