What is above the fold in UX?
Above the fold in UX is the part of a page visible on screen without scrolling, while below the fold is everything you only reach by scrolling down.
also calledfirst screen · initial viewport · above-the-scroll
The phrase comes from newspapers, where editors put the juiciest headline on the top half of the folded front page so it caught your eye on the newsstand. On the web, the fold is the bottom edge of whatever screen the visitor happens to be using. What sits above that edge gets seen first, and often decides whether the person bothers to look further.
- The fold is the bottom edge of the first screen, and it moves with every device.
- Put a clear headline, a short explanation and one main action in that first view.
- People do scroll, but only when the top of the page gives them a reason to.
- Test on real screen sizes, and use scroll data from your own product.
Where exactly is the fold on a website?
Here is the awkward truth: there is no single fold. A phone, a laptop and a huge desktop monitor all cut your page at different places, and browser toolbars, cookie banners and sticky headers eat into the space even more. A layout that shows a headline, a button and an image on your design screen may show only a logo and a banner on a small laptop.
So designers stopped talking about one line and started talking about the first screen a visitor sees on a given device. You check it on several sizes and make sure the important part survives on all of them.
What belongs in the first screen
Think of the first screen as a handshake. In a couple of seconds a visitor should be able to tell where they are, what you offer and what they can do next. For most pages that means:
- A clear headline that says what the page or product is about
- One short supporting line or a relevant image
- A single primary action, such as a sign-up or search
- Enough navigation to feel oriented, not a wall of links
You do not need to cram everything up there. You need to earn the scroll.
Do people really not scroll?
They do. Scrolling is a normal habit on phones and on long pages, and people will happily keep going when what they see makes them curious. The catch is that attention is highest at the top and drops as the page continues, so content that is unclear or irrelevant at the start gets abandoned before the scrolling begins.
The practical lesson is not to put everything above the fold. It is to give a reason to continue. A visible hint of the next section, a headline that is cut off halfway, or a clear visual flow downward all tell the visitor that more is waiting.
Common mistakes
A full-screen hero image with a tiny line of text is the classic one: it looks great in a pitch deck and tells the visitor nothing. Another is stacking a cookie notice, a promo bar and a chat widget on top of the page until the real content is pushed off screen.
The opposite error is a false floor, where a big horizontal band of white space makes the page look finished so people do not scroll at all. Check your design with real content, on real devices, and watch where people actually stop.
When the fold matters and when it does not
It matters most on landing pages, home pages and ad destinations, where you have seconds to convince a stranger. It matters much less on long articles, documentation and dashboards, where people arrive already committed to reading or working.
Analytics and scroll maps from your own product will tell you more than any rule of thumb, so treat the fold as a question to test, not a law to obey.
Above the fold and below the fold: your questions, answered
What does above the fold mean in web design?
It means the content a visitor sees on screen the moment a page loads, before scrolling. The term borrows from newspapers, where the top half of the folded front page held the biggest stories. On the web the exact cutoff depends on the device.
Is the fold still relevant in UX?
Yes, but as a guideline rather than a hard rule. The first screen still shapes first impressions and decides whether people keep going, so it deserves care. What changed is that nobody should try to stuff everything into it.
How many pixels is the fold?
There is no fixed number. It varies with screen size, browser toolbars and device orientation, so a common desktop height is very different from a typical phone. Instead of chasing one pixel value, design for the range of screens your visitors really use and test on a few of them.
What should go above the fold on a landing page?
A headline that states the value, a short supporting line, one clear call to action and a visual that supports the message. Add enough navigation to orient visitors, but avoid clutter that competes with the main action.
Do users scroll below the fold?
Yes, people scroll regularly, especially on phones, when the first screen looks relevant and hints that more is coming. If the top of the page is confusing or empty of value, many will leave without scrolling at all.
More quick answers
What is the opposite of above the fold?
Below the fold, meaning content you only see after scrolling. It is a good home for supporting detail, proof and secondary actions.
Should the call to action be above the fold?
For a page whose job is a single action, usually yes. For pages that need explanation first, a clear action a little further down can work just as well, as long as it is easy to find.
How do I check what is above the fold on different devices?
Use your browser's responsive mode and a few real devices, then look at what appears before any scrolling. Remember that banners and sticky headers take space too.
What is a scroll map?
A scroll map is a visual that shows how far down the page visitors typically get, usually as a color gradient. It helps you see where attention fades.
Does the fold matter for mobile?
It does, because phone screens are small and the first view is tiny. The upside is that vertical scrolling is natural on mobile, so a short first screen with a clear direction works well.
White space in UX is the empty area around and between interface elements, which gives content room to breathe and makes a screen easier to read and scan.
A heatmap in UX is a visual overlay that uses color to show where users click, tap, scroll or look on a page, with warmer colors marking more activity.
Responsive design in UX is an approach where a website or app adapts its layout and content automatically to fit any screen size, from phone to desktop.
Visual design in UX is the craft of shaping how a product looks, using color, type, imagery, layout and spacing to make it clear, usable and appealing.
Navigation in UX is the set of menus, links and cues that help people find content, move between pages and always know where they are.
Found this useful? A GitHub star helps other designers find it.