S,M,L viewport buttons. Random behavior and relation to breakpoints.

[georgiee]

Hello I just wanted to raise my hand on the topic of S, M, L viewport buttons.

I have many problems with these three viewport sizes and also a lot of headache reasoning with the client about it. It's totally not comprehensible for most people. Not even the tech-related guys.

The random characteristics are really not useful at all. For myself as a developer it's easy. I stick to the full view and use the developer tools anyway. So it's a problem at the client or somebody not so involved in the development process. And those people expect:

1. The expect the same values every time using that button. Initially seeding would help with this. But don't event consider it, read along.
2. If the given user have heard about responsive design he will see those buttons related to the given set of css breakpoints. Not something that changes randomly of a random range.

So I have those customer feedback alright in my mind:

• Hey S, M, L are not related to our agreed ranges
• The XL breakpoint is missing
• The naming, I think we agreed on using mobile, tablet, desktop. Do you remember?
• I found a bug, the viewport L is changing after clicking it the second time.
• Sorry to disturb you but I found the same bug for the button S

Okay, well I hope you see the problem. It's not us the developers who will use these buttons. I therefore disable them now but would love to see a configurable way to integrate the real breakpoints. Would allow me to quickly scan a size and the custmer is happy so play around with the viewport without resizing the window.

Here a possible solution:
I would rather see a relation to my own set of breakpoints here and not three random buttons with random widths. For the purpose of the you know, the user viewport is random too it would be sufficient to use a single button which generates a single value over the whole range of useful widths, wouldn't it ?

Related issues I already found to this:
#571
pattern-lab/styleguidekit-assets-default#54
pattern-lab/styleguidekit-assets-default#46

[bmuenzenmeyer]

This is a duplicate of pattern-lab/styleguidekit-assets-default#54 so I am going to consider it a 👍 for that and close.