I am the fold (2015) | Hacker News Reader

I am the fold (2015)

iamthefold.com

101 pointsgitgud43 comments

Cached here: https://web.archive.org/web/20231228133419/https://iamthefol...

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.

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.

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.

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.

> 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.

    /signed lycos

Oh the irony.

As much I agree with you, you're talking about the collision of content and eyeballs and advertising. Brands insist on getting their juice.

It needs a dynamic, server side component, regardless of how you choose to design the site.

And if it was to serve a static page, it would also need a client side dynamic component.

So I would probably also have gone with full server side rendering.

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.

https://en.wikipedia.org/wiki/Boxed_warning

Shouldn't it be fixed to a point in the screen then? Very much like cookie notices?

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.

Here's an example using the fold https://alexiononesource.com/soliris

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.

I feel like viewport height (vh) kind of solved this. Designing for a specific height is janky but now you can just programmatically do it.

Exactly. Combining vh with a min and a max height is the best solution nowadays to design an effective landing page.

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.

Worth noting that it's points, not pixels. On my 15" Macbook Pro, full screen, it shows 900 as the line, whereas in pixels it's closer to 1800 or sth.

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]

[0] - https://dev.to/frehner/css-vh-dvh-lvh-svh-and-vw-units-27k4

This is a great idea and really good execution. Apparently the server is not beefy enough for HN front page, but that is easily forgiven in my book.

Design for the inverse pyramid.

https://en.m.wikipedia.org/wiki/Inverted_pyramid_(journalism...

the (presumably) stateless, serverless function that appears to serve the site has.. crashed?

i dunno, i feel like the wording of this error message could be improved :)

Even pure functions are allowed to return error values

I remember working for a startup in 2015 when this whole fold thing was still thought to be a big deal.

Needless to say I’m glad we trust people know how to scroll now.

What's the median viewport height?

I am become HN hug of death

> This Serverless Function has crashed.

> Your connection is working correctly.

> Vercel is working correctly.

Looks like it’s down for now.

Or maybe that's what it's supposed to do.

it folded.

I feel like looking at that art piece where they put a regular banana in a glass cover and people were admiring it.

I was scared to ask (still I am)

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.

Edit: archived error page, for people not seeing it https://archive.is/g6IhW (ironic!)

It's the default Vercel error page

neato

Engineering lead: "Let's use serverless functions. That way we will never have to worry about scalability"

Now you have two problems.

For me this occurs when I put my phone on landscape.

Folded under the pressure.

That's the default Vercel error page

I can't see the popularity of the red line. How will I see the popularity of fullscreen Chromium on Windows 11 now? /j

Reply on news.ycombinator.com