Stress-test your layouts in disco mode
In most teams I work in, people still talk about mobile-, tablet- and desktop-layouts. Those terms worked well when the lines between those classes were well-defined. Smartphones were always exactly 320 pixels wide, tablets started at 768 pixels. It’s been years since that has been the case. We now have large phones, small tablets, and frankenphones that are kind of both.
Accounting for its high pixel density, the iPhone 11 Pro Max shows websites at 414×896 pixels. It will show “tablet layouts” in landscape mode if those layouts start at 768 pixels. That is fine!
As screens grow, it’s okay to show more on them. That is the point of larger phones. We need to change how we think about breakpoints. Start by replacing the names “mobile”, “tablet”, and “desktop” with “small”, “medium”, and “large”. Where do these new breakpoints begin and end? I couldn’t tell you, because there is no single set of values that works for every layout.
I’ll write a post on this soon. For now, you can use Brad Frost’s viewport resizer ish. At first glance, it looks like your browser’s development tools: you can see a website at different sizes. The cool part of this is that the dimensions behind its sizes are not fixed. Each time you select “M”, you get a new width. This mirrors how medium-sized devices don’t all share the exact same dimensions.
To really put your layout to the test, put ish in disco mode to see if there are still viewport widths you don’t cover well. I’ll go first: domhabersack.com/posts in ish’s disco mode
PS: ish was released in 2012, and we’re still talking about “tablet layouts”.
What looks good in a design tool doesn’t necessarily look good in a browser. Working in both at the same time helps you catch those mistakes early.
A few emoji included in a font are responsible for Firefox not showing syntax highlighting in my code snippets.
Apple is adding mouse support to iPadOS. The thinking that went into the UX of the iPad’s new pointer is a fascinating evening watch.