Let Web Pages Flow

It’s getting easier and easier to design a page that fits the screen while still containing more content below.

The problem is that it’s sometimes very unclear that there is more content on the page.

Compare these two pages containing exactly the same content. One is designed to give a "full screen" experience. The other allows the content to "flow off" the screen:

It’s very clear with the "flows off" page that we can scroll down to see the rest of the content. This website is not wasting my time making me guess (not to mention the fact that it also takes less scrolling to see the exact same content).

Even worse, sometimes the "fullscreen" design is so visually effective that it fools me completely and I miss the content below "the fold" entirely.

This membership-based adult beverage website features some really clever design and I like the aesthetic a lot. But some of the important membership actions are below this screen!

The way the background image ends, it looks for all the world like the page ends here. There’s also a goodly chunk of whitespace below this (and it used to be even bigger!) The only clue that there’s more is the scrollbar. If I didn’t know better, I’d swear they were trying to hide the rest of the content.

This one sticks out in my mind because I actually contacted support because I couldn’t figure out where these features were. I face-palmed pretty hard when they told me to scroll down!

This one gets me every time I visit. Leanpub has to have one of the weirdest "product" pages ever designed. Most of the information about the book you’re looking at is past the gray "footer" at the bottom of the screen!

I really don’t understand what they were trying to do here.

I’m not a huge fan of the big "hero" image or video that often takes up the entire initial screen of many (or even most) product websites. It feels like traditional TV and/or magazine advertising.

It makes me think, calm down, I’m already on your website. Maybe put less thought into how you can catch my attention (which you already have) and more into how you can give me the information looking for?

The funny thing is that to make up for the unintuitive experience, they often have to put arrows (often animated so you see them) indicating that there is more stuff if you scroll down. I’d laugh, but I’m worried the laughter would turn into crying.

You can try to give a "full-screen experience" on a scrolling page, but I’d really rather you didn’t.

If you’ve done your very best to make it look like the page ends at the bottom of my screen, don’t be surprised if I end up thinking the page ends at the bottom of my screen!

Also:

Please consider just letting the content flow like a document. You can still make the top of the page as pretty as you like and I’ll enjoy it just as much.