[mcmcdtx]

This illustrates something that has been driving me crazy for years. It seems like more and more sites have modal floating elements at the top and bottom so my 1080 screen is only using a third of the available space for content, I hate to think what the internet must be like for people with 720 ultrabooks now. I've always assumed site designers are all using 4k screens and just can't believe people live without them anymore.

[LeifCarrotson]

I just bought a 4k screen for myself, but it's still 16:9 (3840 x 2160). Scaled to the same relative size, it's no better.

I also have a 1920x1200 screen at work that I love, it's only 120 pixels taller and I honestly don't notice the difference much when in use, but when I push content over to the laptop screen or unplug, it's a huge loss.

I tried to find a 4:3 or 3:2 high-res screen, but even 2560 x 1600 (half as many pixels as my 4k, only 16:10) was more than double the cost of 16:9. I could not find any affordable displays with a non-widescreen aspect ratio.

And now I'm part of the problem, having signaled to the panel OEMs that I want 16:9...

[moritzwarhier]

The modals and stickies are there for marketing reasons obviously, and given sufficient budget, they will be designed responsively as well (not saying this makes the experience better).

Comments on this except for the one mentioning vh honestly don't reflect current web dev + design reality anymore. And even then, you probably want to consider dvh vs vh depending on what you are doing (of course you don't want your whole layout to shift because of the on-screen keyboard either)

But they reflect mistakes that bad designers make all the time.

When I was doing web dev, it was mostly like this: there are two mock-ups, one for 1920x1080 and one for the viewport of the latest iPhone or sth similar.

The rest was up to the skill and interpretation of the developer.

To a degree, this is a sane approach, because as a web dev, it is your job to understand this and tweak things to look good regardless of DPR and viewport size in CSS pixels.

If you want to design the perfect landing page, you will encounter all kinds of tradeoffs depending on viewport dimensions. But it can be fun to tackle this problem.

[JaumeGreen]

Google Ads is barely usable on my wife's 14' screen. I do have a bigger screen, but she doesn't. So yeah, some people are not conscious at all of other people's limitations.

[moritzwarhier]

SaaS backends often don't consider responsive designs for sane reasons. It's a tradeoff. It's hard to make a web app with many controls and widgets responaive without ruining the experience on bigger screens.

Also, 14" notebooks such as the MacBok Pro are notorious in their own right, they have a viewport width of about 1300 CSS "pixels" and about 2560 physical pixels on the horizontal axis (DPR around 2).

Many web devs fail to consider DPR in their media queries. Plainly speaking, a 14" MBP has less "CSS pixels" than a cheap 14" laptop with 1920x1080 physical pixels and a DPR of 1.

[8n4vidtmkvmk]

I want a CSS var for dppx so I can rescale a canvas element to it's native resolution. This is hard to do without JS right now but if you don't, your graphics will be blurry.