Welcome to WebmasterWorld Guest from 34.207.78.157

Forum Moderators: not2easy

Increase Tap Target Size In Footer For Mobile

     
7:03 pm on May 10, 2019 (gmt 0)

Junior Member

Top Contributors Of The Month

joined:Dec 2, 2017
posts: 61
votes: 1


I want to increase the size of the tap targets in my footer section for mobile devices.

Chrome’s Lighthouse says the current height of the footer tap targets in mobile is 18px and suggests it be increased to 48px.

Footer HTML:
<div class="footerBoxa">
<h2 class="alternate5"><strong>Menu:</strong></h2>
<p class="small">
<a href="../example.htm” (tap target)
<a href="../example.htm” "
<a href="../example.htm”. "

CSS:
.small{font-size:0.92em;}

.footerBoxa{float:left;width:30%;padding:0;margin:0 1% 0 1%;}
.footerBoxb{float:left;width:30%;padding:0;margin:0 1% 0 1%;}
.footerBoxc{float:left;width:30%;padding:0;margin:0 1% 0 1%;}

CSS - media queries:
.footerBoxa{width:98%;}
.footerBoxb{width:98%;}
.footerBoxc{width:98%;}

.footerBoxa{width:48%;}
.footerBoxb{width:48%;}
.footerBoxc{width:98%;}

The tap targets are located in both footerBox a and b. Regular text is in footerBox c.

What is the best way to increase the size of the tap targets in my media queries while keeping it visually balanced with the regular text in footerBoxc? Should I add top and bottom padding to the tap targets? Increase the font size and add padding? Something else?

Thanks for your help!
3:24 am on May 11, 2019 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2548
votes: 717


This is a difficult question to answer without being able to see the actual layout. Typically I would say increase the padding, but as I said it really depends on the specific layout.
5:16 am on May 11, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15636
votes: 795


Psst!
.footerBoxa{float:left;width:30%;padding:0;margin:0 1% 0 1%;}
.footerBoxb{float:left;width:30%;padding:0;margin:0 1% 0 1%;}
.footerBoxc{float:left;width:30%;padding:0;margin:0 1% 0 1%;}
=
.footerBoxa, .footerBoxb, .footerBoxc {float:left; width:30%; padding:0; margin:0 1%;}
It sounds as if you need an @media rule specifying some max-width (your choice) and then set a non-zero padding for that size. Possibly even two sizes, a smallish one for tablets and a still smaller one for phones.

With rare exceptions, default padding is 0 (I think lists and similar have built-in padding), so “padding:0" shouldn't even be necessary to specify.

Now, about those multiple floats ... but that's a subject for a different thread.
3:02 am on May 12, 2019 (gmt 0)

Junior Member

Top Contributors Of The Month

joined:Dec 2, 2017
posts: 61
votes: 1


I’m wondering if I can keep the footerBox code the same in the media queries (with your optimization) and make the list anchor text (tap targets) buttons with top and bottom padding between each button.

Desired look:

- padding (non clickable space) - 4px high
- button with 15 px above and below horizontally centered anchor text (18 px high) = 48px high clickable button with text
- padding (non clickable space) - 4px high

Repeat above for each additional anchor text (tap target)

If that might work how would I handle the variable width of each link? I would want to maintain the same left margin but have the button length accommodate the length of each anchor text link.

Is it okay (seo wise) to style buttons that are the same color as the page background? Google won’t think that something is being hidden?

Thanks for your help!
5:36 am on May 12, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15636
votes: 795


padding (non clickable space)
Ordinarily, padding would be, “yes-clickable” space, since it’s part of the element. If you want to increase non-clickable space, that’s a margin.
1:09 pm on May 12, 2019 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4296
votes: 288


Is it okay (seo wise) to style buttons that are the same color as the page background? Google won’t think that something is being hidden?
Not so much a seo concern as a usability concern, button background color generally a user experience question. The color can signal to users to draw attention or highlight the tap target. A good number of users are impatient and action targets should be made obvious and user friendly rather than blending in to the background. The object of buttons is to be user friendly rather than attractive and unobtrusive. ;)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members