Mobile Size tap targets appropriately (Dynamic News)

  • Unknown's avatar
    stephendove8 · Member ·

    Hello,

    I’m trying to change the distance/size of the tap targets appropriately for the Dynamic News theme to help with mobile SEO. Does anybody know how this could be done?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, can you list which tap targets you wish to increase? It isn’t just one setting, and are you talking about for phones, or tablets or both? With a score of 95/100 I wouldn’t worry too much about it and it appears that the targets they are talking about are the post date, author and leave a comment for the most part. To enlarge those to the point Google would like them will likely make for a less satisfactory user experience on your site since those things will end up taking up a lot more space.

    You can get a general idea by adding the following to your custom CSS, saving and then running it back through Google Speed and also view it on your phone.

    @media screen and (max-width: 480px) {
.postmeta a:link {
    font-size: 120%;
    line-height: 50px;
    padding-right: 0 !important;
    display: block;
}
}
  • Unknown's avatar
    stephendove8 · Member ·

    Hi,

    Thanks for your reply, I’m more talking about my menu at the top of the page. The tap targets are too close together and just need moving to the side a tad, not too much… But just so that the end-user doesn’t mistakenly tap/click on the wrong link.

    Do you think this is a good idea to optimize these then?

    Thanks again

  • Unknown's avatar
    thesacredpath · Member ·

    The menu (Home, FIFA 14, Helpful Tips, etc.) goes to the minified menu at 960px and narrower. The minified menu is specifically designed for tablets and phones. On my iPad in portrait orientation (1068px wide) the menu items are spaced so that I can easily tap them.

    The only thing I might have a problem with would be the social icons up in the header area above the menu. If you wish to space those out some, use the following CSS and adjust as desired. I put the margins on the left so that the last icon on the right would stay aligned as it originally was.

    #social-icons-menu li {
    margin-left: 10px;
}
  • Unknown's avatar
    thesacredpath · Member ·

    I also noticed things tighten up again at 40em in width when the icons go from right aligned to center. You can add the following media query to spread them out below that width.

    @media screen and (max-width: 40em) {
    #header-social-icons #social-icons-menu li {
        margin-left: 5px;
        margin-right: 5px;
    }
}
  • The topic ‘Mobile Size tap targets appropriately (Dynamic News)’ is closed to new replies.