People spend 57% of their page-viewing time above the fold, according to Nielsen Norman Group's 2018 eye-tracking study of 120 participants and more than 130,000 fixations. The second screenful gets 17%. On a B2B SaaS homepage, that first screen is where a visitor decides whether you sell what they came for.
This guide measures that first screen. On 28 October 2026 we loaded 15 B2B SaaS homepages in headless Chrome at 1440 by 900 and at 390 by 844, recorded the headline, type size, button positions, proof and product imagery in the top 600 pixels, and checked every number against a screenshot. The rest of the page comes from NN/g, StatCounter, web.dev, the HTTP Archive Web Almanac and Unbounce.
Why 600 pixels and not "the fold"
There is no single fold. There is a fold per screen, and the useful question is how much of your hero the smallest common laptop sees.
StatCounter's September 2026 desktop figures put 1920 by 1080 first at 28.07%, then 1536 by 864 at 10%, 1366 by 768 at 7.95% and 1280 by 720 at 4.71%. Browser tabs, the address bar and the operating system's taskbar take a further slice. Our working estimate is 120 to 140 pixels on a typical Windows laptop, which leaves roughly 630 to 650 pixels of page on a 1366 by 768 screen and under 600 on 1280 by 720. Then your own navigation takes 50 to 80 pixels, and an announcement bar another 30 to 40.
That is why we design to 600. It is not a law. It is the height where a hero still works on the screens one in eight desktop visitors uses, and it leaves a margin on the larger ones.
NN/g's own advice from its 2015 fold article still applies here: the fold matters because people only scroll when the visible part promises something worth scrolling for. In its eye-tracking data, the 100 pixels just above the fold were viewed 102% more than the 100 pixels just below. A hero that ends with an empty band of background at 580 pixels reads as finished.
The five jobs of the first 600 pixels
A B2B SaaS homepage has a short first screen and a long list of people who want space in it. We give it five jobs and turn everything else away.
- Say what it is. A category word a buyer already searches for, and ideally who it is for. Our 24-site scorecard of B2B SaaS websites found the category word is the element most heroes drop.
- Give one specific. The subhead names functions, a result or a type of customer. It is the line that turns a slogan into a product.
- Offer one next step. One primary button, optionally a quieter second. For sales-led products the primary is the demo; for product-led products it is the sign-up.
- Show one piece of proof. A number, a customer logo row, a ranking or a rating. One is enough to say "other companies like you trust this".
- Show the product, or a credible picture of it. Real interface beats illustration for software that people will log into every day.
Jakob Nielsen's summary of Microsoft Research's dwell-time study, covering more than 2 billion visits, is the reason for the discipline: the first 10 seconds decide whether someone stays, so the value proposition has to land inside them. Tuch and colleagues at Google measured aesthetic judgements forming within 50 milliseconds, and found low visual complexity scored best at the shortest exposures. A crowded hero loses before anyone reads it.
The 15 examples, measured on desktop
| Site | H1 words | H1 size (px) | H1 top (px) | Hero CTA top (px) | Proof in 600 | Product UI in 600 |
|---|---|---|---|---|---|---|
| Stripe | 22 | 48 | 258 | 519 | Live GDP counter | No, abstract art |
| Notion | 6 | 96 | 144 | about 414 | None | Strip from 533 |
| Asana | 5 | 64 | 160 | None | None | Strip from 500 |
| Miro | 7 | 56 | 198 | about 452 | None | Yes, boards |
| Snowflake | 2 | 32 | 170 | 437 | None | Strip from 570 |
| Okta | 6 | 64 | 312 | None | None | No, photo |
| Gusto | 7 | 110 | 172 | about 500 | None | Yes, UI cards |
| Salesforce | 7 | 80 | 160 | 461 | "#1" claim in H1 | No, agent avatar |
| Atlassian | 5 | 64 | 148 | 321 | None | Yes, from 434 |
| Freshworks | 6 | 72 | 170 | None | None | No, particles |
| Pendo | 9 | 52 | 242 | 546 | None | No, waveform |
| Contentful | 6 | 72 | 275 | about 590 | None | Mock UI cards |
| Retool | 4 | 72 | 240 | about 400 | None | Yes, prompt box |
| Algolia | 3 | 77 | 221 | about 590 | None | Partial, code |
| Personio | 4 | 72 | 196 | 361 | G2 leader badge | No |
Source: Octo Agency measurements in headless Chrome, 28 October 2026. "About" values were read from screenshots where the script missed an animated button. Snowflake's H1 reports 32 pixels, though it renders larger as styled artwork.
Headlines are short. The median is six words. Stripe is the outlier at 22, because its H1 holds a six-word headline plus a 16-word continuation in a lighter colour. Read alone, that first line is also six words.
Type is large. The median H1 is 72 pixels, from 48 at Stripe to 110 at Gusto. Large type is a bet that the headline is right. At 96 or 110 pixels, a six-word line takes two full rows and 200 to 230 pixels of height.
The headline starts around 200 pixels. The median top edge is 196 pixels, which leaves about 400 pixels for the subhead, buttons, proof and any product. Okta starts lowest at 312, because a utility bar, an announcement bar and a floating navigation stack above it.
Three heroes have no button. Asana, Okta and Freshworks rely on the navigation button. Asana fills the space with role tabs, which are useful but are not a next step. Two more, Contentful and Algolia, put their button at about 590 pixels, half-cut on a short laptop.
Proof is rare, and logos sit lower. Stripe, Salesforce and Personio show something at the top: a live counter, a ranking claim and a G2 badge. None of the 15 had a customer logo row fully inside 600 pixels on desktop.
Nine of 15 run an announcement bar. Event promotions, acquisitions and launches take 30 to 40 pixels each, above the navigation, every day of the campaign.
The same 15 on a phone
The phone fold is taller, but the hero content stacks, and EU cookie banners take the bottom of it. Our run came from a Serbian connection, so we saw the banners an EU buyer sees.
| Measure | Result |
|---|---|
| Median H1 size | 40 px (range 27 to 52) |
| Hero CTA visible above 600 px | 12 of 15 |
| Hero CTA at or below the 600 px line | Contentful (at the line), Miro (email field above, button below) |
| No CTA in the first screen | Freshworks (H1 wraps to six lines, ending at 515 px) |
| Cookie banner over the lower viewport | 9 of 15 |
| Mobile H1 different from desktop | Asana, Stripe (continuation dropped) |
Source: Octo Agency measurements in headless Chrome, 28 October 2026.
Two lessons stand out. First, a headline that wraps to three lines on desktop can wrap to six on a phone: Freshworks' 48-pixel serif fills the screen before its subhead begins. Second, Stripe's mobile hero quietly drops its 16-word continuation, which is the right instinct. Write a headline that survives being the only thing on the screen.
Asana showed a different headline on mobile, "The OS for human-agent teams", from desktop on the same afternoon. That may be a test, a rotation or a deliberate per-device message. Either way, check both widths before you approve copy.
A word on the AI wave
Seven of the 15 headlines use "AI", "agents" or "agentic". Several of the rest put it in the subhead instead. That is a measurement, not a criticism, but it has a cost: when every hero in a category says AI, the word stops telling a buyer what the product does.
Compare Personio, "The intelligent HR platform", with Okta, "Bring agents out of the shadows". Personio names a category in four words, and its subhead lists Core HR, Talent and Payroll. Okta's line works for a security buyer who already knows Okta, and much less well for one who arrived from a search. Unbounce's 2024 benchmark of more than 41,000 landing pages found pages written at a fifth to seventh grade reading level converted at 11.1%, against 5.3% for professional-level writing. Plain category words are part of that.
The anatomy we build to
This is the specification we would hand a designer for a B2B SaaS homepage hero. It is drawn from the measurements above and the attention data, and every value is a starting point to test, not a rule.
| Element | Where (desktop, px from top) | Size and length | Mobile |
|---|---|---|---|
| Announcement bar | 0 to 36, only during a campaign | One line, under 12 words | Hide or shorten |
| Navigation | to 72 | Five to seven items, one filled button | Logo, menu, one button |
| Headline | starts 140 to 200 | Six to nine words, 56 to 80 px, two lines | 36 to 44 px, three lines or fewer |
| Subhead | 24 to 32 below headline | 15 to 25 words naming functions or buyer | Same copy |
| Primary and secondary CTA | ends by 480 | Primary filled, secondary outline or text link | Full-width primary above 600 |
| Proof | ends by 580 | One row: logos, rating or one number | Directly under the CTA |
| Product visual | starts by 450 | Real interface, visible edge above the fold | Below proof, cropped to the key panel |
Source: Octo Agency working specification, informed by NN/g (2015, 2018), StatCounter (2026) and the measurements above.
Put proof under the button, not in a later section. The 15 sites show how often logos slide below the fold. On a short laptop a logo row at 620 pixels is invisible, and NN/g's data says content just below the line is treated very differently from content just above it.
Let the product visual break the fold. A visible top edge of a product window at 450 to 550 pixels tells the visitor there is more below, which is the cure NN/g describes for the "illusion of completeness".
Pair the CTAs by motion, not by colour. The common pair in our examples is a sign-up or demo button plus a lower-commitment link: "How Gusto works", "Watch demo", "See how it works". Our B2B SaaS website playbook covers which pages those second links should lead to.
Speed: the hero image is usually the LCP
The largest element in your first screen is almost always the element Google times. The HTTP Archive Web Almanac 2024 found an image was the LCP element on 73.3% of mobile pages and 83.3% of desktop pages. It also found 16% of mobile pages with an image LCP lazy-loaded that image, which delays it by design.
web.dev sets "good" LCP at 2.5 seconds or less at the 75th percentile of page loads. In the Almanac data, 59% of pages met it on mobile and 74% on desktop. Three practical rules follow for a hero: never lazy-load the hero image, serve it at the size it displays, and if the hero is a video, give it a light poster frame because the poster can become the LCP. Our B2B SaaS speed statistics have the category data, and the conversion rate statistics show why the hero is worth that care.
What this means for your homepage brief
If you are briefing a redesign, write the first 600 pixels before anything else. Write the six-to-nine-word headline with a category word in it. Write a subhead that names what the product does. Decide which single action matters most this year, a demo or a sign-up, and give it the filled button. Choose one piece of proof that a buyer in your category recognises. Then ask the designer for a screenshot at 1366 by 768 and at 390 by 844 with a cookie banner on, and check that all five jobs still show.
We build B2B marketing sites in Webflow on a four-week process, and the hero is the first thing we lock in week one because every other section takes its message from it. We would expect to test the headline and the proof position before anything further down the page. Our marketing websites service page explains how we scope a homepage and the pages around it.
