Support » Theme: Pilcrow » Fix mobile usabilty issues

  • Resolved lkabor

    (@lkabor)


    Hi there, I hope you can help me with an issue regarding my WordPress Pilcrow website http://www.lisakaborycha.com

    Today I received the following message from Google:

    “Google systems have tested 74 pages from your site and found that 70% of them have critical mobile usability errors. The errors on these 52 pages severely affect how mobile users are able to experience your website. These pages will not be seen as mobile-friendly by Google Search, and will therefore be displayed and ranked appropriately for smartphone users.”

    Is there a simple way to update my website to make it readable on all devices?

    Thanks so much,

    Lisa

Viewing 8 replies - 1 through 8 (of 8 total)
  • Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Hi Lisa, there is no magic fix. 🙂

    If you want to continue using Pilcrow, you’ll need to look at each of the issues flagged by Google and address them.

    Alternatively, you could install a separate mobile theme that would only be viewed by users on small devices. There is a mobile theme as part of Jetpack, and other options available in the plugins directory.

    Thanks Kathryn, for the quick reply.

    I guess there is no update for Pilcrow that addresses this problem?

    Google noted 3 issues: “touch elements too close,” “viewport not configured,” and “small font size.”

    Can you suggest a way I can fix these easily? These were flagged on 52 pages, so I’d rather not have to go one by one and change them.

    I do have Jetpack, but I’m not sure how to apply it to this problem.

    I greatly appreciate any suggestions you can make!

    Lisa

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    I guess there is no update for Pilcrow that addresses this problem?

    I’m afraid not. Pilcrow is an older theme – you might want to look for a newer theme that’s more mobile-friendly, or you could activate a separate mobile theme as I mentioned above, that’s probably the easiest route.

    Can you suggest a way I can fix these easily?

    No easy solution, unfortunately. You’d need to experiment with custom CSS for each of the problematic elements – and for the viewport, create a child theme – and test using Google’s tool to verify that the changes meet their requirements.

    Dear Kathryn,

    Well, I think I have resolved most of the issues. I activated the Jetpack mobility feature and afterward tested my site http://www.lisakaborycha.com on Google’s tool and it was given the thumbs up. I continue to reformat all the pages to increase font size, which is laborious, but it seems like this will do the trick.

    Thanks once again for all you good advice!

    Lisa

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    I activated the Jetpack mobility feature and afterward tested my site http://www.lisakaborycha.com on Google’s tool and it was given the thumbs up.

    Great!

    I continue to reformat all the pages to increase font size, which is laborious, but it seems like this will do the trick.

    If you activated Jetpack’s mobile theme, that’s what mobile devices will see, so I’m not sure why you’re reformatting the font size within posts on desktop devices – that’s no longer necessary once you’ve activated a separate mobile theme.

    Did you find the font too small to see on desktop/laptop? Even if you do, there’s no need to change the font size in the post editor on each page one by one, nor to change all the content to h2 tags instead of paragraphs. Adding a bit of custom CSS will take care of the font size everywhere – that’s what CSS is all about!

    For example, this would increase the font size of all post and page content:

    .entry-content {
        font-size: 150%;
    }

    Dear Katherine,

    Ok, at last I’m going to try to enter some CSS code to make my site lisakaborycha.com have one consistent font size on all the pages. Can you suggest what code I should enter, one that will be a good size for viewing also on tablets and other devices?

    My main concern has been that when there is an automatic update that the changes will disappear or become in some way distorted. Is this going to be a problem?

    And finally, if I try to change the colors of the background on my site will I rest messing everything up? I’ve been thinking for a while about changing the white lettering on the dark background. Is there a CSS code for this too?

    Thanks so much!

    Lisa

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Can you suggest what code I should enter, one that will be a good size for viewing also on tablets and other devices?

    You can experiment with the code I gave you above and test it on different devices, adjusting as you like until you get a size you’re happy with.

    .entry-content {
      font-size: 150%;
    }

    You many decide to set a couple of sizes for different screen widths, using media queries to target certain screen sizes:

    http://en.support.wordpress.com/custom-design/custom-css-media-queries/
    http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
    http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

    My main concern has been that when there is an automatic update that the changes will disappear or become in some way distorted. Is this going to be a problem?

    Be sure not to edit the theme files directly so you won’t lose your tweaks every time the theme is updated.

    It looks like you’re already using a custom CSS plugin, so continue adding your custom CSS there so your changes won’t be overwritten.

    And finally, if I try to change the colors of the background on my site will I rest messing everything up? I’ve been thinking for a while about changing the white lettering on the dark background. Is there a CSS code for this too?

    Could you please start a new thread for this question and explain what colour you want to change the background to, and what colour you want the text to be? This thread is very old and already marked as resolved, and it’s better to start fresh with a new question so you’ll get quicker help from the community. Thanks!

    Thanks Kathryn! The CSS code was perfect – once again you have really helped me improve my site!

    I will start a separate thread as you suggest about the issue of changing the color in the background.

    You are the greatest!

    Lisa

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Fix mobile usabilty issues’ is closed to new replies.