Buttons for small screens

[OVA-robin]

Github

yousee.dk still supports iPhone 5 which is 320 pix. On these small screens, the text often goes out of the button. Which is not acceptable.

A smaller version of all buttons in DNA must be made, which should only be used on screens that are smaller than 375 pixels wide.

The font size of this little button should be 16pix and semibold. The height of the button should be 40 pix. To make this small button with a smaller font size accessible, the green color on these small buttons should be #1A8924

[dechowdev]

In order for us to fix this we need to understand a couple of things for the screenshot you have sent:

• Is this highlighting the issue or the solution?
• The specs you mentioned are following the 8 point grid (8 * 5) = 40px but i believe the button is that size today, however it might "shrink" on mobile, I think though that's intentional (to cram in more buttons seen from a marketing and functionality side @grandorf (?) )
• You mention a size 375px - is this a hi-dpi screen that is that size? - I strongly believe we have made our media queries as such it is a maximum of 480px in regards to mobile styling - so this one should also be affected of it as well.

If there is no issue in regards to the button being full-width but you'd rather have a different adjustments of sizes, I think we should initiate the discussion, but know that your decisions don't just affect Digital Help, but all squads utilizing DNA today. Either that or we can make a modifier (as it's called) to make a specific mobile version that fits these screens (--big-mobile)

[OVA-robin]

Hej Lukas. Knapper i dag er 48 pix høje. De nye mindre knapper vi grafikere er kommet frem til at vi mangler til små skærme ( iPhone5 og iPhone SE) er dem der kun skal være 40 pix høje.

Jeg har kun oplevet tekster der ikke kan være på knapper og tekster der går i to linjer af samme årsag på de små skærme. Altså dem der er under 375. så snart skærmen er 375 eller over ser knapperne fine ud.

Om der laves nye knapper eller om knapperne bare opfører sig anderledes er op til jer.

Svarer dette på dine spørgsmål? vi kan også tage den over telefonen. Da jeg måske ikke forklarer det tydelig nok.

[havgry]

Just my fifty cents:

• If you want to avoid longer button texts from overflowing as in making more room for the text, adjusting the horizontal padding might yield better results. Here's a few variations with and without padding adjustments:
• I don't get why the background color should be changed.

[grandorf]

To begin with we need to keep in mind that some users has fat fingers. From Google:

Luckily for you, you don't have to go around measuring the finger tips of all of your potential users. Apple and Android have determined the optimal tap targets for you. Apple's Human Interface Guidelines recommend a minimum 44 x 44 px area while Android recommends 48 x 48 dp* when designing buttons for mobile apps.

Today the small button version is 48px high. So we can make it a little smaller. I don't see why we should introduce a new button. Let us instead modify and optimise our small button we already have. It's the last modifier on the page: https://dna.yousee.dk/docs/components/form-elements/buttons

As @havgry says I also think we can go a long way by just removing some of the horizontal padding. No reason to have that much.

I am sure by decreasing the padding and the height of the button with 4px we will get the small version to look and work as expected. Then we just need to test the contrast as @OVA-robin says. If it's a problem we need to make the green color darker.

[OVA-robin]

OK. I hear what you’re saying. Is this how we solve the task?:

All our buttons need to change on screens smaller than 375 pix. The height should scale down from 48pix to 44pix. The font size should scale down from 20 to 16 The green background color of the button must be changed from # 1FAB2E to # 1A8924

(Our current button complies with the accessibility requirements we follow. Font size 20 on our green button. But when the font is scaled down, the contrast needs to be increased. Hence a darker button, so we still comply with the accessibility requirements.)

[grandorf]

Yeah. I think that is a good solution. Nice to see you have focus on the contrast and WCAG requirements 🙏🏻

[OVA-robin]

After a talk with Michael Grandorf, we have decided to close this task and make a new one.