1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Google: Clickable elements too close together

Discussion in 'HTML & Website Design' started by sarahk, Apr 5, 2019.

  1. #1
    I've got Google rejecting a page because the clickable elements are too close together... and there's the risk that eventually they'll reject the rest of the site. I have limited control over the site content but can set up the stylesheet etc to compensate for some user issues.

    From these screenshots can anyone suggest what it is that might be failing the tests?

    In the content for this page they've got a handful of links at the bottom:

    upload_2019-4-6_10-36-57.png


    And then there are the common elements:
    upload_2019-4-6_10-35-30.png upload_2019-4-6_10-39-17.png upload_2019-4-6_10-37-50.png
     
    sarahk, Apr 5, 2019 IP
  2. adresaklumea

    adresaklumea Well-Known Member

    Messages:
    131
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    103
    #2
    I can't see any ads here.
     
    adresaklumea, Apr 10, 2019 IP
  3. sarahk

    sarahk iTamer Staff

    Messages:
    28,494
    Likes Received:
    4,457
    Best Answers:
    123
    Trophy Points:
    665
    #3
    Nope, no ads.

    This is a problem reported through webmaster tools and impacts on the site's ability to be found by mobile search.
     
    sarahk, Apr 10, 2019 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    The phone/address up top need at least 1em of margin between them (basically above the collapsing menu), the menu items also need -- at least on mobile) their sizes via padding and margins increased to 1em.

    A good rule of thumb is 2.5em of height is your minimum to make them a good finger-sized target. Generally designs like the one you have there doesn't entirely allow for such choices due to poor layout and whitespace choices elsewhere. Basically temporarily make their backgrounds coloured, then take an adult male's index finger and hold it over the link. If you can see background top/bottom and/or the link is narrower than the top of the finger to the first joint, it's too small. The exception being run-in links such as plaintext inside a paragraph, and even then it's why I've come to favor 1.5em line-heights.

    Shame you don't have control over the markup though, looking at the actual page it really needs to be tossed and started over -- to the point I'd not be surprised if regardless of actual appearance any such automated 'tools' are unable to process it properly and falsely reporting such issues. Just another train-wreck laundry list of how NOT to code a website that's so common in the age of bootcrap and jqueeg. Presentational classes replicating 1990's markup behaviors, clearing DIV like it's still 2003, endless pointless includes for Christmas only knows what, SPAN for nothing, P around non-paragraph content, gibberish use of numbered headings, lack of proper media targets on the stylesheet LINK, JavaScript on pages I see ZERO legitimate reason to even have scripting. It's got problems that run a LOT deeper than anything Crazy Goog's automated tools are going to tell you.

    If someone brought that to me as a client I'd put a round through its head like Old Yeller and start over from scratch. Whoever built the original template isn't qualified to write a single line of HTML. Though technically that's me saying it twice, since I already insinuated ignorance and incompetence when I mentioned "bootcrap"

    Some random tool having problems with it? Tip of the iceberg.
     
    deathshadow, Apr 10, 2019 IP
    sarahk and Karen May Jones like this.
  5. sarahk

    sarahk iTamer Staff

    Messages:
    28,494
    Likes Received:
    4,457
    Best Answers:
    123
    Trophy Points:
    665
    #5
    I'm about to disappear for a week but I'll give it a whirl after Easter. Thanks for the suggestions!!!
     
    sarahk, Apr 10, 2019 IP
  6. kingsoflegend

    kingsoflegend Well-Known Member

    Messages:
    202
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    108
    #6
    Open Chrome dev tools and run a mobile audit. It will tell you exactly what elements are too close together.
     
    kingsoflegend, Apr 27, 2019 IP