Change 776007 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] docs: Simplify breakpoint documenting sentences.

https://gerrit.wikimedia.org/r/776007

Change 776007 merged by jenkins-bot:

[design/codex@main] docs: Simplify breakpoint documenting sentences.

https://gerrit.wikimedia.org/r/776007

I've been working in the Grids & Layouts task T298198 and I created this proposal based on our current breakpoints. Since breakpoints and grids are related, I have some questions about the breakpoints added in the task description:

1. Would it be possible to update our current breakpoints? We could create more common sizes breakpoints like the following ones (e.g. 1440px - 1024px - 768px - 320px)

2. If we can't create that new breakpoints, would it possible to mix some of the current breakpoints? 1000 and 1200 are too similar and we could mix them to have the following breakpoints:

@min-width-breakpoint-desktop-extrawide: 2000px
@min-width-breakpoint-desktop~~-wide~~: 1200px
@min-width-breakpoint-desktop: 1000px
@min-width-breakpoint-tablet: 720px
@min-width-breakpoint-mobile: 320px

cc: @Catrope @AnneT @Volker_E

From the DST design session today, it makes most sense from a production perspective to mark a breakpoint like @min-width-breakpoint-desktop: 1000px as legacy outside of our token scale.
And test several more application use cases with affected products using the current 1000px token.

I've worked on this new breakpoints proposal adding the following:

• New breakpoints sizes: based on the most used screen sizes today
  • 1920px (max)
  • 1366px
  • 768px
  • 320px (min)

• Legacy breakpoints: our current breakpoints
  • 2000px (max)
  • 1200px
  • 1000px
  • 720px
  • 320px (min)

About new breakpoints, I've created them based on the most used screens (here where you can find the most used screens today). So, I proposed breakpoints from 320px (the smallest screen) to 1920px, and we will apply a 1514px max-width content for our grids in this other task T298198.

👁 Here you can view the Figma file with the new breakpoints proposal.

In T303522#7969997, @bmartinezcalvo wrote:

NOTE: @alexhollender_WMF we need to know if 1200px and 1000px would have impact in DIP since in this proposal I've documented them as legacy.

• we are currently using the 1200px breakpoint in order to reduce the size and spacing around the table of contents, so that the article can take up more space at that smaller size
• we are currently using the 1000px breakpoint in order to hide the table of contents

Vector, MediaUploader, UploadWizard and one community skin, StarCitizenTools / mediawiki-skins-Citizen are the only ones using 1200px widely.

I'm a big proponent of the agreed on proposal, I think that it's very solid and while hold for major parts.

One note on the naming, while the t-shirt scale makes sense in a number of other token categories, I'd pledge to use mobile, tablet, desktop, desktop-wide and desktop-extrawide or similar.
It's really hard to apply those and keep the abstraction in head on this specifically unchanging category. Thoughts @bmartinezcalvo and @Sarai-WMDE…?

In T303522#7996273, @Volker_E wrote:

I'm a big proponent of the agreed on proposal, I think that it's very solid and while hold for major parts.

One note on the naming, while the t-shirt scale makes sense in a number of other token categories, I'd pledge to use mobile, tablet, desktop, desktop-wide and desktop-extrawide or similar.
It's really hard to apply those and keep the abstraction in head on this specifically unchanging category. Thoughts @bmartinezcalvo and @Sarai-WMDE…?

I don't thing using the name of the devices in the token name is the best solution since some of them works for more than one device, e.g. breakpoint-desktop would work for both small desktop screens and landscape tablets.

Instead of using t-shirt names (I used them to have a more short names and @Sarai-WMDE used them too for text size) we could use instead these other names we use in other tokens like shadows:

• Extra Large
• Large
• Medium
• Small
• Extra Small

(It's the same than t-shirt names but with a more large name)

Hi @bmartinezcalvo, thanks for the ping for feedback. I mostly agree with this proposal and it fits in with the 3 layouts we use on the Growth Desktop version of the homepage (see this task T258005 for reference to the responsive breakpoints we have set, and demo the page live at testwiki at Special:Homepage).

The one part that seems odd is the breakpoint-M (1200px) and breakpoint-L(1366px) sizes being quite close together to not make a material difference, and I would suggest either removing one, or reconsider the sizes with trending breakpoints in mind, so that perhaps we have Large at closer to 1536px. By trending, I mean if zooming out on the last 5 years of the statcounter site, the 1536x864 is moving higher, whilst the 1366x768 is moving down:

Having a set of reference sizes is really useful for designers, especially when based on common used sizes. What is not clear to me is that the breakpoints should match exactly those reference sizes.

Defining breakpoints creates a set of ranges of sizes in which the design layout will be optimized for those sizes. An aspect that may be problematic is to define the breakpoints in a way that leaves the reference sizes at the very extreme of the ranges. This means that sizes that are very close to a reference size can get a design that is less optimized for them. For example, 1920px wide screens seem to be the most common desktop size based on the data above and is the reference size for the XL size, however a user that has a browser window that is not full-width (e.g., 1910px) will get the L version of the design which was optimized for a smaller L size (1366px).

These variations in sizes can exist for different reasons such as window size being different (smaller) than screen size or device diversity.

I think it may be more useful to have the reference sizes more centered in the ranges the breakpoints define. In that way when designing for a reference size, devices in the same category (slightly larger or smaller than the reference) will get the experience designed for their category. There is an article covering this idea in more length.

Based on last comments from @Pginer-WMF and @RHo I've been working on a new proposal aligning the breakpoints not with the right value of the most used screens but using these most used screen sizes as midpoint of each breakpoint (as explained in in this article sent by @Pginer-WMF ).

The breakpoints based on the midpoints of these most used screen sizes would be:

• breakpoint-L 1680px and more
• breakpoint-M 1120px - 1799px
• breakpoint -S 640px - 1119px
• breakpoint-XS 320px - 639px

{F35258903}

With this new proposal where the most used screens are at the midpoint of each breakpoint (view here):

• We cover more screen sizes with fewer breakpoints. In this proposal we use 4 breakpoints while in the previous proposal we used 5 breakpoints (the 5 one was used for the 1200px one).
• We cover a larger number of screen sizes as each breakpoint covers several important screen sizes. Also, the most used screens have been tested here and we can view that all them are well covered with these breakpoints.
• We don't have very approximate breakpoints (as we had in the previous proposal @RHo where breakpoint-L and breakpoint-M were so close)
• We cover important use cases as the ToC one @alexhollender_WMF (in 1280px screens we would use the breakpoint-M and the ToC would be a bit narrow but I think it could work)

{F35258981}

Thanks @bmartinezcalvo, this latest proposal with four breakpoints looks good to me!
Though I think there is a typo on breakpoint-M - I assume the range should be 1120px to 1679px (not 1799px as it is currently in the mock and figma)... is that right?

In T303522#8019834, @RHo wrote:

Thanks @bmartinezcalvo, this latest proposal with four breakpoints looks good to me!
Though I think there is a typo on breakpoint-M - I assume the range should be 1120px to 1679px (not 1799px as it is currently in the mock and figma)... is that right?

@RHo oh yes, it was a mistake. Updated with 1679px. Thank you Rita!

{F35265198}