4 ms·
If you start with what we already know, natural responsiveness is fairly straight-forward. There are still phones out there running 320px. There are desktops ru
by bryans 4y ago
If you start with what we already know, natural responsiveness is fairly straight-forward. There are still phones out there running 320px. There are desktops running 6-8K. There are people using side-by-side windows at 4K, making each window slightly less than 1080p. And we know the same page needs to work on all of those and everything in between. With just those four pieces of information and a little logic, you can make confident decisions about your layout's behavior at different breakpoints.
With that in mind, the same is true now as it has been for almost 20 years. The layout should be made of 320px columns growable to 400px, while components occupy one or more columns. If everything else is based on that foundation, it will be rare to run into special cases. Whereas the current breakpoints based around 768 and 1024 are actively working against you by creating common dead zones that you need to adjust for.
You can see the 1025-1079 dead zone in action by visiting most websites in 4K side-by-side, causing a horizontal scroll as the content overflows. That includes major sites from Google, Meta and others who really ought to know better. Since almost all of my browsing is done side-by-side, I've resolved to reducing the default browser zoom to 90%, which eliminates the horizontal overflow on most of these sites.