Twenty Twenty: Buttons Are Not Responsive on Mobile Devices

[deborah86]

On mobile devices and tablets, the buttons are not responsive. They appear like they would on the desktop website. The buttons should be responsive so users have enough area to click on. They are too small on the mobile and tablet versions of the website.

This is what Google says about using buttons:

BE THUMB-FRIENDLY
People use their fingers to operate mobile devices—especially their thumbs. Design your site so even large hands can easily interact with it.

• Use large, centered buttons and give them breathing room to reduce accidental clicks.
• Pad smaller buttons to increase the clickable area.
• Pad check boxes by making the text clickable

​https://services.google.com/fh/files/blogs/GoMo_Best%20Practices_GoMo%20Branded.pdf

This is how the page looks on desktop devices.

This is how the exact page looks on mobile

As you can see, the buttons are not responsive and do not take up the view so they can easily be clicked on by someone using the mobile device.

If you change the width settings, this only changes the width of how the buttons will appear on desktop and mobile devices but it does not make them responsive.

You can tell the buttons are not responsive because the size of the text within the buttons does not change.

Here is a link to the page where I did the test: ​http://t2.dhosting.network/buttons-not-responsive-on-mobile

Note: The images are from a desktop computer using the dev tools to change to the mobile view but I get the same result on my mobile device.

[sabernhardt]

how the page looks on desktop devices

[sabernhardt]

how the exact page looks on mobile

[sabernhardt]

If you change the width settings, this only changes the width of how the buttons will appear on desktop and mobile devices

[sabernhardt]

Hi @deborah86! I uploaded your screenshots to the ticket so they would show here.

Google's GoMo initiative mentions padding smaller buttons to increase the clickable area, but these links are already larger than the minimum 44px by 44px recommended in both ​Apple's (mobile) UI tips and ​WCAG 2.1 guidelines for any screen size.

• For screens narrower than 700px wide, the link is 51.75 pixels tall with text at 15px.
• For larger screens, the link is 58.65 pixels tall with text at 17px.

So they are responsive, though smaller on mobile. I wouldn't mind increasing the text size and/or making the line-height an even number, yet I do not consider this a bug.

[sabernhardt]

smaller on mobile

[sabernhardt]

text (and link) size adjustment for tablet/desktop screens

[deborah86]

@sabernhardt

What about making the text smaller so it isn't shown on two lines?

[karmatosed]

It is my belief this isn't a bug, but I would love you to confirm @sabernhardt based on the latest updates here. What do you think?