The fold is a newspaper idea that refuses to die. On a laptop it sits at one height, on a phone at another, and on a very large monitor it almost disappears. Yet the question behind it still matters: what does a stranger learn before they scroll?
This guide shows you what to put above the fold on a SaaS site. You will get a five slot model for the first screen, what research says about scrolling, three examples from pages we designed and a test for laptop and phone.
Key takeaways
Do not chase a pixel line. Design for what a visitor learns in the first screen on their device.
Fill five slots: buyer, outcome, product, proof and action.
People do scroll, but attention is heaviest at the top, so the top carries the promise.
On a phone, the first screen is smaller. Rank the five slots and cut the rest.
Test on a real laptop and a real phone, with strangers.
What does above the fold mean for a SaaS site?
Above the fold means what a visitor sees without scrolling when the page loads. The line moves with every screen size, so treat it as a first screen, not a fixed number of pixels.
The term comes from print. On the web it is useful as a reminder that the first screen decides whether someone reads on. It is not a rule that everything important must fit there, and it is not a reason to avoid scrolling.
For B2B SaaS, the first screen has one job: let a stranger say what the product is, who it is for and what to do next. If you have not decided those three things, start with Positioning an AI Agent Product or How to Explain Your AI Product on Your Website.
Do people scroll, and does the fold still matter?
People do scroll, but attention is concentrated near the top. A Nielsen Norman Group eye tracking study from 2018 (120 participants) found people spent about 57% of their viewing time above the fold, down from 80% in an earlier 2010 study. About 74% of viewing time fell in the first two screenfuls, and about 81% in the first three.
That tells you two things. The old belief that nobody scrolls is wrong. Page length is not the problem. It also tells you that attention drops sharply after the first screen, so the most important content and the main action belong near the top. NN/g’s advice is to use cues such as cut off text, which show that more content waits below, and to avoid designs that look finished when they are not.
The study is from 2018 and measured large desktop screens, so use it as a direction, not a law. Test on your own page.
What is the Five Slot First Screen?
The Five Slot First Screen lists the five things a first screen should carry. Each slot answers one question a stranger asks.
Slot | The stranger’s question | What fills it |
|---|---|---|
1. Buyer | Is this for me? | A named role, company type or situation |
2. Outcome | What do I get? | A headline stating a result in plain words |
3. Product | What is it? | A real interface, output or short loop |
4. Proof | Can I believe it? | One customer, number or source |
5. Action | What do I do now? | One main button that says what happens |
You do not need every slot to be large. A buyer slot can be half a line in the subhead, and proof can be a single logo row with names. What matters is that none is missing.
Pro tip: Cover the page with a sheet of paper, then lower it to the bottom of your first screen. If a stranger cannot fill the five slots, the page has a problem no scroll can fix.
How do three real first screens fill the slots?
We designed three AI landing pages as case studies, ORYN, Simora and ROVR. They are our own projects, not client work, and we have no traffic data for them, so this shows design decisions, not results.
Page | Product slot | Buyer slot | What follows the hero |
|---|---|---|---|
ORYN, AI agent monitoring | Dashboard preview in the hero | Technical teams and leaders | Sections on AI visibility, cost and governance |
Simora, node based image canvas | The canvas in the hero | Creators and studios | A closer look at the node canvas |
ROVR, robot delivery | The robot itself | Customers, and stores adding ROVR | A strip of trusted partners, then why ROVR |
The pattern is the same in all three: the product slot comes first, because the product is hard to picture. ROVR is the only one with two audiences, so it carries two actions. For more on those pages, read AI Landing Page Design.
How do you fit the first screen on a phone?
Rank the five slots and keep the top three on a phone, with the other two one swipe away. A phone first screen has less room, so something has to give.
Keep the headline, which carries the outcome and often the buyer.
Keep one product visual, cropped to the part that explains the product.
Keep the main action, and make it reachable with a thumb.
Move proof to the next swipe, but keep one short line near the top if you can.
Cut the second button, the long paragraph and any decoration that pushes the product down.
Check the phone view first when you design, not last. Many first looks start from a message, an ad or a social post opened on a phone, so a broken phone view can cost real visits.
What should you never put above the fold?
Leave out anything that delays the answer to the five questions.
A full screen video that must load before anything else appears
A rotating carousel of slogans, since only the first slide gets read
A pop up that covers the hero before the page makes sense
Five navigation items and three buttons that compete for attention
A model name or technology claim in place of a stated outcome
None of these is forbidden, but each one has to earn its place against the five slots.
What goes wrong above the fold?
Most problems come from designing for one screen size, showing a slogan instead of the product, or pushing proof too far down. The six to avoid:
Designing for one screen size. The fold is different on every device.
A slogan and no product. Visitors see an idea, not the thing.
Two equal buttons. Visitors choose neither.
Proof pushed to the footer. The claim has no support where it is read.
Hiding the page below a huge hero. Nothing signals that more is below.
Never testing on a phone. The layout breaks where first visits happen.
How do you test your first screen this week?
Run a five second test on a laptop and on a phone, with five strangers each.
Show only the first screen for five seconds, then hide it.
Ask what the product is, who it is for and what they would do next.
Record answers word for word, and compare laptop with phone.
Pass if four of five name the product and the buyer.
Fix the slot that most people miss, then test again.
Pro tip: Ask people to describe the product in their own words, then use their phrases in your headline. Strangers are often clearer than the team.
Also read: AI Homepage Messaging Mistakes: 7 Fixes From Three Real Teardowns, SaaS Website Messaging Audit.
To read the full projects, see the ORYN AI agent monitoring landing page, the ROVR AI robot delivery landing page, or browse all of our case studies.
What does a stranger learn from your first screen?
Send us your homepage and we will fill in the five slots as a stranger would. Book a page review · See our work
SaaS above the fold FAQs
Five things: who the product is for, the outcome in plain words, the product itself, a piece of proof and one main action. They need not all be large. The test is whether a stranger can answer what it is, who it is for and what to do next from the first screen alone.
Yes, though not as a fixed line. People scroll, but research shows attention is heaviest near the top. A 2018 Nielsen Norman Group study found about 57% of viewing time above the fold. Treat the first screen as the place for your promise and main action.
It varies with the device, the browser toolbars and the window size, so no single number is safe. Design for the first screen on your visitors' real devices. Check your analytics for common screen sizes, and test your page on a real laptop and a real phone.
Usually yes. A real interface or output explains more than a headline alone, especially for AI products that are hard to picture. Crop to the part that shows the value, use realistic data and avoid a decorative illustration that says nothing about what the product does.
Yes. Kraftbase is a product messaging and UI/UX design studio for AI and B2B SaaS companies. We write and design the first screen together, so the headline, product visual and action come from one decision about the buyer.
One main button, and at most one quieter secondary action. Two equal buttons make visitors choose, and many choose neither. If you serve two audiences, make that explicit and give each its own clearly labeled action, as in a customer path and a partner path.
Show five people who match your buyer the first screen for five seconds, then ask what the product is, who it is for and what they would do next. If four of five answer correctly, it works. Test on a laptop and on a phone.
About the author
Jenish is a designer at Kraftbase, a product messaging and UI/UX design studio in Vadodara, India, that helps AI and B2B SaaS teams in the US, UAE and India explain and design what they’ve built.
Sources
Scrolling and Attention, Nielsen Norman Group, April 15, 2018 (nngroup.com/articles/scrolling-and-attention)
Kraftbase case studies: ORYN and ROVR (kraftbase.com/case-studies), section lists read Nov 2, 2026. These are our own projects, not client work.
Five Slot First Screen: Kraftbase framework, not a published standard
Page review
What does a stranger learn from your first screen?
Send us your homepage and we will fill in the five slots as a stranger would.
The fold is a newspaper idea that refuses to die. On a laptop it sits at one height, on a phone at another, and on a very large monitor it almost disappears. Yet the question behind it still matters: what does a stranger learn before they scroll?
This guide shows you what to put above the fold on a SaaS site. You will get a five slot model for the first screen, what research says about scrolling, three examples from pages we designed and a test for laptop and phone.
Key takeaways
Do not chase a pixel line. Design for what a visitor learns in the first screen on their device.
Fill five slots: buyer, outcome, product, proof and action.
People do scroll, but attention is heaviest at the top, so the top carries the promise.
On a phone, the first screen is smaller. Rank the five slots and cut the rest.
Test on a real laptop and a real phone, with strangers.
What does above the fold mean for a SaaS site?
Above the fold means what a visitor sees without scrolling when the page loads. The line moves with every screen size, so treat it as a first screen, not a fixed number of pixels.
The term comes from print. On the web it is useful as a reminder that the first screen decides whether someone reads on. It is not a rule that everything important must fit there, and it is not a reason to avoid scrolling.
For B2B SaaS, the first screen has one job: let a stranger say what the product is, who it is for and what to do next. If you have not decided those three things, start with Positioning an AI Agent Product or How to Explain Your AI Product on Your Website.
Do people scroll, and does the fold still matter?
People do scroll, but attention is concentrated near the top. A Nielsen Norman Group eye tracking study from 2018 (120 participants) found people spent about 57% of their viewing time above the fold, down from 80% in an earlier 2010 study. About 74% of viewing time fell in the first two screenfuls, and about 81% in the first three.
That tells you two things. The old belief that nobody scrolls is wrong. Page length is not the problem. It also tells you that attention drops sharply after the first screen, so the most important content and the main action belong near the top. NN/g’s advice is to use cues such as cut off text, which show that more content waits below, and to avoid designs that look finished when they are not.
The study is from 2018 and measured large desktop screens, so use it as a direction, not a law. Test on your own page.
What is the Five Slot First Screen?
The Five Slot First Screen lists the five things a first screen should carry. Each slot answers one question a stranger asks.
Slot | The stranger’s question | What fills it |
|---|---|---|
1. Buyer | Is this for me? | A named role, company type or situation |
2. Outcome | What do I get? | A headline stating a result in plain words |
3. Product | What is it? | A real interface, output or short loop |
4. Proof | Can I believe it? | One customer, number or source |
5. Action | What do I do now? | One main button that says what happens |
You do not need every slot to be large. A buyer slot can be half a line in the subhead, and proof can be a single logo row with names. What matters is that none is missing.
Pro tip: Cover the page with a sheet of paper, then lower it to the bottom of your first screen. If a stranger cannot fill the five slots, the page has a problem no scroll can fix.
How do three real first screens fill the slots?
We designed three AI landing pages as case studies, ORYN, Simora and ROVR. They are our own projects, not client work, and we have no traffic data for them, so this shows design decisions, not results.
Page | Product slot | Buyer slot | What follows the hero |
|---|---|---|---|
ORYN, AI agent monitoring | Dashboard preview in the hero | Technical teams and leaders | Sections on AI visibility, cost and governance |
Simora, node based image canvas | The canvas in the hero | Creators and studios | A closer look at the node canvas |
ROVR, robot delivery | The robot itself | Customers, and stores adding ROVR | A strip of trusted partners, then why ROVR |
The pattern is the same in all three: the product slot comes first, because the product is hard to picture. ROVR is the only one with two audiences, so it carries two actions. For more on those pages, read AI Landing Page Design.
How do you fit the first screen on a phone?
Rank the five slots and keep the top three on a phone, with the other two one swipe away. A phone first screen has less room, so something has to give.
Keep the headline, which carries the outcome and often the buyer.
Keep one product visual, cropped to the part that explains the product.
Keep the main action, and make it reachable with a thumb.
Move proof to the next swipe, but keep one short line near the top if you can.
Cut the second button, the long paragraph and any decoration that pushes the product down.
Check the phone view first when you design, not last. Many first looks start from a message, an ad or a social post opened on a phone, so a broken phone view can cost real visits.
What should you never put above the fold?
Leave out anything that delays the answer to the five questions.
A full screen video that must load before anything else appears
A rotating carousel of slogans, since only the first slide gets read
A pop up that covers the hero before the page makes sense
Five navigation items and three buttons that compete for attention
A model name or technology claim in place of a stated outcome
None of these is forbidden, but each one has to earn its place against the five slots.
What goes wrong above the fold?
Most problems come from designing for one screen size, showing a slogan instead of the product, or pushing proof too far down. The six to avoid:
Designing for one screen size. The fold is different on every device.
A slogan and no product. Visitors see an idea, not the thing.
Two equal buttons. Visitors choose neither.
Proof pushed to the footer. The claim has no support where it is read.
Hiding the page below a huge hero. Nothing signals that more is below.
Never testing on a phone. The layout breaks where first visits happen.
How do you test your first screen this week?
Run a five second test on a laptop and on a phone, with five strangers each.
Show only the first screen for five seconds, then hide it.
Ask what the product is, who it is for and what they would do next.
Record answers word for word, and compare laptop with phone.
Pass if four of five name the product and the buyer.
Fix the slot that most people miss, then test again.
Pro tip: Ask people to describe the product in their own words, then use their phrases in your headline. Strangers are often clearer than the team.
Also read: AI Homepage Messaging Mistakes: 7 Fixes From Three Real Teardowns, SaaS Website Messaging Audit.
To read the full projects, see the ORYN AI agent monitoring landing page, the ROVR AI robot delivery landing page, or browse all of our case studies.
What does a stranger learn from your first screen?
Send us your homepage and we will fill in the five slots as a stranger would. Book a page review · See our work
SaaS above the fold FAQs
Five things: who the product is for, the outcome in plain words, the product itself, a piece of proof and one main action. They need not all be large. The test is whether a stranger can answer what it is, who it is for and what to do next from the first screen alone.
Yes, though not as a fixed line. People scroll, but research shows attention is heaviest near the top. A 2018 Nielsen Norman Group study found about 57% of viewing time above the fold. Treat the first screen as the place for your promise and main action.
It varies with the device, the browser toolbars and the window size, so no single number is safe. Design for the first screen on your visitors' real devices. Check your analytics for common screen sizes, and test your page on a real laptop and a real phone.
Usually yes. A real interface or output explains more than a headline alone, especially for AI products that are hard to picture. Crop to the part that shows the value, use realistic data and avoid a decorative illustration that says nothing about what the product does.
Yes. Kraftbase is a product messaging and UI/UX design studio for AI and B2B SaaS companies. We write and design the first screen together, so the headline, product visual and action come from one decision about the buyer.
One main button, and at most one quieter secondary action. Two equal buttons make visitors choose, and many choose neither. If you serve two audiences, make that explicit and give each its own clearly labeled action, as in a customer path and a partner path.
Show five people who match your buyer the first screen for five seconds, then ask what the product is, who it is for and what they would do next. If four of five answer correctly, it works. Test on a laptop and on a phone.
About the author
Jenish is a designer at Kraftbase, a product messaging and UI/UX design studio in Vadodara, India, that helps AI and B2B SaaS teams in the US, UAE and India explain and design what they’ve built.
Sources
Scrolling and Attention, Nielsen Norman Group, April 15, 2018 (nngroup.com/articles/scrolling-and-attention)
Kraftbase case studies: ORYN and ROVR (kraftbase.com/case-studies), section lists read Nov 2, 2026. These are our own projects, not client work.
Five Slot First Screen: Kraftbase framework, not a published standard
Page review
What does a stranger learn from your first screen?
Send us your homepage and we will fill in the five slots as a stranger would.