Goal
Clarify what our breakpoints should be and document them as Codex tokens
Historically, most of the breakpoint groundwork was done in MobileFrontend and MinervaNeue.
User stories
- As a designer I need that the most used and relevant screens are covered with the breakpoints, to be able to design on those screens and know that my designs will work well on those screen sizes.
Considerations
Current breakpoints definitions in Codex:
Defined in 'codex-base.json', status 2022-03-31
A capable mobile device considered minimum available screen width.
Many older feature phones that were already able to browse the web have screens smaller than this value. As they weren't considered smartphones with real HTML/CSS rendering capabilities, this min-width mostly acted as sanity check to ensure something is a smartphone.
@min-width-breakpoint-mobile: 320px;
A tablet considered devices' minimum available screen width.
Tablet size was defined with first wide-spread Samsung tablet, Galaxy S5 mini and low enough to cover early generation iPads (768px):
@min-width-breakpoint-tablet: 720px;
A desktop considered devices' minimum available screen width.
Currently used (as @width-breakpoint-desktop) in MW core, MinervaNeue and Vector. Extensions GrowthExperiment, MediaSearch, Wikibase, RelatedArticles (CodeSearch).
@min-width-breakpoint-desktop: 1000px;
Wider desktop breakpoint.
Currently used (as @width-breakpoint-desktop-wide) in Vector. Extensions UploadWizard/MediaUploader (CodeSearch). As @large in Flow defined 6 years ago.
@min-width-breakpoint-desktop-wide: 1200px;
Extra wide desktop breakpoint.
Defined 6 years ago in Flow as @xlarge. Not in use anywhere.
@min-width-breakpoint-desktop-extrawide: 2000px;
Additional data point
[[ https://codesearch.wmcloud.org/things/?q=%40media&i=nope&files=&excludeFiles=&repos= | Codesearch after @media ]]
Most used screens during the last year:
Visit this web for more info.
Desktop:
- 1920x1080 (22.33%)
- 1366x768 (18.1%)
- 1536x864 (10.78%)
- 1280x720 (6.13%)
- 1440x900 (5.98%)
- 1600x900 (3.45%)
Tablet:
- 768x1024 (33.71%)
- 810x1080 (6.76%)
- 1280x800 (6.63%)
- 800x1280 (5.84%)
- 601x962 (4.8%)
- 962x601 (3.15%)
Mobile:
- 360x800 (8.83%)
- 414x896 (6.48%)
- 360x640 (5.69%)
- 390x844 (5.33%)
- 412x915 (4.75%)
- 360x780 (4.21%)
Developers notes
As the latest proposal changes two currently used breakpoints:
720 => 768
2000 => 1920
It seems reasonable to amend former with a workaround token as it seems possibly impactful, and latter by just using the new breakpoint value. Given how low usage of 2000 in our current codebase is and how small the differences would be projected.
It might be a helpful path forward, that we've defined breakpoint tokens so far with width, while in Codex and the future we're aiming for min-width/max-width.
Figma
Figma spec sheet with proposal here.
Acceptance criteria (or Done)
Design:
- Create Figma spec sheet documenting our breakpoints
- Add breakpoints in our Figma library
Code:
- Document breakpoints in Codex demo (we could add a table like this)
- Implement breakpoints in Codex