WordPress.org

Make WordPress Core

Opened 6 weeks ago

Last modified 6 weeks ago

#53202 new enhancement

Twenty Twenty: Buttons Are Not Responsive on Mobile Devices

Reported by: deborah86 Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.7.2
Component: Bundled Theme Keywords:
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 6 weeks ago.
how the page looks on desktop devices
Web-capture_13-5-2021_75945.jpeg (43.1 KB) - added by sabernhardt 6 weeks ago.
how the exact page looks on mobile
Web-capture_13-5-2021_8542.jpeg (43.5 KB) - added by sabernhardt 6 weeks 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 6 weeks ago.
smaller on mobile
twenty-twenty-cta-desktop.png (2.5 KB) - added by sabernhardt 6 weeks ago.
text (and link) size adjustment for tablet/desktop screens

Download all attachments as: .zip

Change History (8)

@sabernhardt
6 weeks ago

how the page looks on desktop devices

@sabernhardt
6 weeks ago

how the exact page looks on mobile

@sabernhardt
6 weeks 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
6 weeks ago

  • Description modified (diff)

#2 @sabernhardt
6 weeks 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
6 weeks ago

smaller on mobile

@sabernhardt
6 weeks ago

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

#3 @deborah86
6 weeks ago

@sabernhardt

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

Note: See TracTickets for help on using tickets.