A directory of brand guidelines: logosearch.link

Stress-test your layouts in disco mode

Dom Habersack
Dom HabersackNovember 13, 2019
Several disco balls.
Don’t panic, this isn’t a real disco.

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

– Dom

PS: ish was released in 2012, and we’re still talking about “tablet layouts”.

Continue reading

A printed color palette with an eye piece.
#52September 2, 2020

My design turned out worse than I thought

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 person holding up a cookie shaped like the poop emoji.
#61November 4, 2020

How the poop emoji broke my website

A few emoji included in a font are responsible for Firefox not showing syntax highlighting in my code snippets.

A person using an Apple Pencil with an iPad.
#44July 8, 2020

The iPad got the best pointer

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.

Read all issues →