Make WordPress Core

Opened 3 years ago

Last modified 6 weeks ago

#53202 new enhancement

Twenty Twenty: Buttons Are Not Responsive on Mobile Devices

Reported by: deborah86's profile deborah86 Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.7.2
Component: Bundled Theme Keywords: dev-feedback
Focuses: css Cc:

Description (last modified by sabernhardt)

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.

https://core.trac.wordpress.org/raw-attachment/ticket/53202/Web-capture_13-5-2021_75816.jpeg

This is how the exact page looks on mobile
https://core.trac.wordpress.org/raw-attachment/ticket/53202/Web-capture_13-5-2021_75945.jpeg

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.

https://core.trac.wordpress.org/raw-attachment/ticket/53202/Web-capture_13-5-2021_8542.jpeg

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.

Attachments (5)

Web-capture_13-5-2021_75816.jpeg (59.4 KB) - added by sabernhardt 3 years ago.
how the page looks on desktop devices
Web-capture_13-5-2021_75945.jpeg (43.1 KB) - added by sabernhardt 3 years ago.
how the exact page looks on mobile
Web-capture_13-5-2021_8542.jpeg (43.5 KB) - added by sabernhardt 3 years ago.
If you change the width settings, this only changes the width of how the buttons will appear on desktop and mobile devices
twenty-twenty-cta-mobile.png (2.1 KB) - added by sabernhardt 3 years ago.
smaller on mobile
twenty-twenty-cta-desktop.png (2.5 KB) - added by sabernhardt 3 years ago.
text (and link) size adjustment for tablet/desktop screens

Download all attachments as: .zip

Change History (9)

@sabernhardt
3 years ago

how the page looks on desktop devices

@sabernhardt
3 years ago

how the exact page looks on mobile

@sabernhardt
3 years ago

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

#1 @sabernhardt
3 years ago

  • Description modified (diff)

#2 @sabernhardt
3 years ago

  • Type changed from defect (bug) to enhancement

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
3 years ago

smaller on mobile

@sabernhardt
3 years ago

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

#3 @deborah86
3 years ago

@sabernhardt

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

#4 @karmatosed
6 weeks ago

  • Keywords dev-feedback added

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?

Note: See TracTickets for help on using tickets.