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.
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...
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.
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.
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.
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.
When it does load it looks like this could've just be a static site, so it's interesting to see it being a serverless function that crashes the whole time.
But yes, the idea of designing for the fold is from early 2000s (or i guess I should say pre-2010 in my experience) and should stay there.
And your takeaway is that ad pollution is thus justified? If so, weird take IMO, especially the huge number of examples of bad incentives the ad world encourages. Better: subscription services and building the free web.
My first pro web development gig was at an agency that only did pharma. All pharma websites need to have the FDA's black box warning above the fold. So in some cases the fold is a regulatory concern, not one of vanity for designers.
What we'd do for a bunch of them is put the indication and black box warning in a position:fixed element. That text would be the start of the full fine-print on the drug. When you scroll the fine print section into view the now redundant fixed warning would hide. e.g. https://www.botoxchronicmigraine.com/https://www.skyrizi.com/
Also the FDA won't let you dismiss a box warning. It needs to be visible on the page at all times. A cookie warning can be more annoying because it can be dismissed.
Really this was a print agency that thought of web developers as an unfortunate cost center necessary to make their photoshop follies into web pages. It was a really tough case of no one knowing their audience too:
- html email designs with complicated 9 slice borders that are impossible to render consistently
- the real audience for the web site is the client's internal network, who are on IE8 or even 7 (9 had been out for a long time) and you want features I need to hand code in JS or 9 slice.
- the real real audience is the legal review, so it's worth it to develop a tool to capture the whole site to a PDF they can mark up including drawing a "fold" line on the page
None of the sites I'm linking here are ones I wrote, just examples.
Reloading the page worked for me and showed the real content. It is a collection of past visitors viewport heights. When I opened it I saw more than 50 different heights.
For people not using CSS a lot, vh is a little tricky on mobile. I guess that's what's behind "kind of" in the parent comment. It has to do with the fact that the viewport size changes as you start scrolling down [0]
I think the more interesting part is which heights are interesting to keep in mind.
The below 900 ones are somewhat obvious as they also match smartphone sizes, but I was surprised to see very little common border above that. In particular anything above 2000 seems pretty rare.
This is an unusually aesthetically pleasing error page. I paused for a moment thinking it was some kind of artistic statement, but nope, it's a real error as far as I can tell.
