The first screenful of your website is the only content every visitor is guaranteed to see. Everything below the fold is conditional — it only gets seen if the first screen earns the scroll. Most websites treat the fold as a design afterthought and wonder why their bounce rate is high.
The 5-Second Decision
Eye-tracking and session recording studies consistently show that users make the stay-or-leave decision within five seconds of landing. That’s not time to read your about section, browse your portfolio, or assess your pricing. It is only enough time to answer three questions: What is this? Is it for me? Is it worth more time?
If the first screenful cannot answer all three questions, the visitor leaves. Not because your product is bad, not because your price is wrong — because the design failed to communicate in the time available.
The implication is stark: the design decisions made in the first viewport-height of your page are worth more than all the design decisions below the fold combined. A mediocre above-fold can kill a brilliant below-fold experience before the user ever reaches it.
What “The Fold” Actually Means in 2026
The term comes from newspapers — the content visible on the top half of a folded broadsheet. In web design, it means the content visible without scrolling.
The fold is not a fixed line. It shifts with every device, screen size, and browser chrome height. Common viewport heights by device type:
- Desktop (1920×1080 monitor): ~900–940px visible height after browser chrome
- Laptop (1366×768 or 1440×900): ~600–768px visible height
- iPhone (14/15): ~667–844px depending on model and browser bar state
- Android mid-range: ~680–780px
The critical insight: design for the smallest common viewport in your actual traffic, not the largest. If you design for 900px desktop and your analytics show 40% of visitors are on laptops with 650px viewports, a significant portion of your “above the fold” content is actually below the fold for them.
How to find your specific fold height: Google Analytics → Reports → User → Tech → Screen Resolution. Sort by sessions descending. Your top five screen resolutions cover the vast majority of your traffic. Use the smallest height in that set as your fold target.
The Five Required Elements Above the Fold
For a service business, these five elements must all appear above the fold simultaneously — without scrolling — or the fold is failing:
(a) Business Name or Logo
Visitors need to know immediately whose website they are on. This is foundational orientation, not branding. It can be relatively small — 24–36px height for a logo mark — because it needs to establish presence, not dominate.
(b) What You Do — 10 Words or Fewer
The headline that answers “what is this site?” A single scannable claim. If it takes more than 10 words to state your value, you haven’t decided what your core value is yet. “Custom Websites That Rank on Google and Convert Visitors” is a clear claim. “Empowering Businesses Through Digital Transformation Solutions” is not — it could describe a hundred different services.
(c) Who It’s For
The subheadline that confirms “this is for me” to the right visitor and self-selects out the wrong ones. One or two sentences. “We build websites for clinics, restaurants, and service businesses in Indonesia who are tired of losing customers to competitors with better sites.” That sentence includes its target audience explicitly. A visitor who is a clinic owner in Jakarta reads it and immediately thinks: this is for me.
(d) One Primary CTA
One button. Not two equally prominent ones. Not three. The label must start with a verb and specify the outcome. “Get Started” is too vague. “Book a Free Strategy Call” is specific. The button must be visually dominant — filled with a high-contrast color, not an outline or text link — and it must be visible without scrolling on every device you care about.
(e) At Least One Trust Signal
A trust signal reduces the risk a visitor perceives in engaging further. Effective above-fold trust signals: a specific number (“500+ websites delivered”), client logos from recognizable brands, a review count with platform name (“4.9 stars · 87 Google Reviews”), or a certification. The key word is specific — “trusted by many” performs worse than “used by 430+ businesses” because specificity signals verifiability.
Above-the-Fold Requirements by Site Type
Different site types have different fold priorities. What’s critical for a service business is different from what matters for an e-commerce store.
| Site Type | Must Appear Above Fold | Can Live Below Fold |
|---|---|---|
| Service business | Value prop headline, primary CTA, trust signal | Process steps, full testimonials, portfolio archive |
| E-commerce | Category nav, search, hero product or deal | Full product grid, filter sidebar, recommendations |
| Portfolio | Name, role/specialty, 1–2 featured work samples | Full case study archive, contact form, bio |
| Local business | Business type, location, phone or WhatsApp button | Full services list, embedded map, hours |
| SaaS product | What the software does (not how), trial/demo CTA | Feature list, pricing, integrations |
The exercise: open your website and cover everything below the first viewport height. Ask someone who doesn’t know your business what the site does, who it’s for, and what they should do next. If they can’t answer all three, the fold is broken.
The Mobile Fold Is a Different Problem
Mobile screens are narrower, taller in ratio, and have different interaction patterns than desktop. The fold failure modes on mobile are distinct from desktop failures.
The nav-plus-logo tax: On mobile, a navigation bar at the top typically occupies 56–72px. The logo or brand name inside it takes another 40–60px visually. Before your hero content begins, you’ve already spent 120px of the ~680px fold budget on header infrastructure. That leaves about 560px for your headline, subheadline, CTA, and trust signal.
The hero image displacement problem: A hero image set to a fixed height of 300–350px on mobile pushes all text and CTAs below the fold. This is the single most common mobile fold failure. The CTA button that should drive enquiries is sitting at 580px — invisible until the user scrolls, which many won’t do.
Fix for the hero image issue: On mobile, either:
- Remove the standalone hero image and use a background image at 30–40% opacity behind the text/CTA block, so the overlay text and button stay visible
- Or limit the hero image to 200–240px maximum height and ensure the headline, subheadline, and CTA still appear above 667px
The autoplay video fold: An autoplay video that fills the viewport says nothing about what the business does. It is visual motion without information — a fold that uses 100% of its budget on ambience and zero on communication.
Text-first on mobile: The default pattern for mobile hero design should be text-first, visual second. Headline. Subheadline. CTA. Then the supporting image below, either as a standalone visual or not at all.
Six Common Above-the-Fold Failures
These are the patterns that appear most frequently when auditing websites, in rough order of how much damage they do:
1. Beautiful but uninformative hero image. A stock photo of happy people, a city skyline, or an abstract texture. It consumes 40–60% of the fold’s vertical space and communicates nothing about the business. Replace with an image that shows the result the customer gets, or a product screenshot.
2. Navigation consuming excessive viewport height. A nav bar with logo, five menu items, a language selector, and a search icon at 80px tall eats nearly 10% of the fold before the hero section even begins. Compress navigation to the minimum viable height. 56px on desktop is sufficient.
3. Three equally weighted CTAs. “Contact Us” | “Learn More” | “Get a Quote” — all displayed with the same visual weight. The visitor has to choose before they’ve decided to engage. One primary CTA. Everything else subordinate.
4. Trust signals buried below the fold. Review counts, client logos, and certifications are the elements that reduce hesitation — but they only work if the visitor sees them before deciding to leave. Move your strongest trust signal above the fold.
5. Headline that describes the company, not the benefit. “We Are a Full-Service Digital Agency” describes you. “Websites That Bring in Customers While You Sleep” describes the benefit to the visitor. The fold headline must be visitor-centric, not company-centric.
6. Missing location for local businesses. A local service business that doesn’t show its city, area, or location in the fold is invisible to visitors who are scanning for local relevance. “Jakarta Selatan” or “Serving Businesses in Surabaya” in the fold header or hero subheadline is a fold requirement, not optional.
The Indonesian Agency Default That Fails Every Time
There is a template pattern so common among Indonesian web agencies that it’s recognizable at a glance: a full-width hero slider, 60% of the fold height, cycling through 3–5 images. Under it: a centered tagline like “Kami Hadir Untuk Anda” or “Your Trusted Partner.” Then a row of service icons.
This layout fails the fold on every dimension. The slider is movement without message — it tells the visitor nothing specific. The tagline is generic. The service icons are below the fold on most mobile viewports. There is no CTA, no specific value proposition, and no trust signal. The entire fold is visual decoration.
The reason this pattern persists is that clients approve it during design review. It looks professional in a Figma mockup at 1440px desktop viewport. It looks like a “proper website.” The problem reveals itself only in Google Analytics, where you see 70–80% mobile bounce rates and average session times under 10 seconds.
The fix isn’t to add a CTA to the existing slider layout. The fix is to remove the slider entirely and replace it with a static hero that states specifically what the business does, who it’s for, and what action to take — in that order, all visible above the fold on a 375px iPhone.
The most effective fold redesigns we’ve done were also the most confrontational: removing the hero image the client loved, replacing the inspirational tagline with a functional one, and cutting the “welcome” paragraph that was pushing the CTA 300px below the fold. Clients pushed back on every change. Conversions improved after every change.
The F-Pattern and Z-Pattern — Where Eyes Go First
Eye-tracking research (Nielsen Norman Group) established two dominant reading patterns for web pages.
The F-pattern applies to content-heavy pages: news sites, blog articles, documentation, search results pages. The user reads the first line fully left to right, reads the second line partially, then scans down the left margin. Most of the right side of the page is never seen on F-pattern pages.
The Z-pattern applies to marketing and landing pages: the eye travels from top-left to top-right (across the top of the fold), then diagonally down to bottom-left, then across to bottom-right. CTAs placed at the bottom-right of the Z receive natural eye arrival — not because users plan it, but because that’s where the eye lands after completing the pattern.
Practical application:
- Service landing page → Z-pattern. Place your logo top-left, a trust signal top-right, your CTA at the bottom-right of the hero section.
- Blog post page → F-pattern. The headline and first paragraph carry almost all the weight; the right side of the page below the first fold scroll is low-attention territory.
- Homepage with multiple sections → Combination. The hero fold follows a Z; subsequent sections reset to mini F-patterns as users scan down.
First-Fold Audit Checklist
Use this on any service business website:
- Business name or logo visible without scrolling on mobile (667px height) and desktop (600px minimum)
- Headline clearly states what the business does in 10 words or fewer
- Subheadline specifies who the service is for
- One primary CTA button visible above the fold on all target devices
- At least one specific trust signal (number, review count, or client logo) visible above the fold
- Hero image (if used) communicates the benefit or result, not generic lifestyle photography
- Navigation height does not exceed 64px on desktop or 56px on mobile
- On mobile, the CTA button appears above 580px from the top of the viewport
Want a fold-by-fold audit of your website? Free consultation →
References
- Nielsen Norman Group — “How People Read on the Web: The Eyetracking Evidence” — https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/
- Nielsen Norman Group — “Scrolling and Attention” — https://www.nngroup.com/articles/scrolling-and-attention/
- Baymard Institute — Above the Fold Homepage Design (reference only)
- Google Analytics Help — Screen Resolution Reports (reference only)
- CXL Institute — “5 Second Test and Above the Fold Optimization” — https://cxl.com/blog/first-impressions-matter-the-importance-of-great-visual-design/
Above the Fold — Common Questions
Where exactly is 'the fold' in 2026?
There is no single fold — it varies by device and browser. The practical approach is to design for the smallest common viewport in your traffic mix. For most service businesses, that means 600px height for desktop visitors and 667px for mobile. Check Google Analytics under Reports → User → Tech → Screen resolution to see your actual visitors' viewport heights. Design for the bottom of the smallest common size, not the largest.
Should my hero image count as one of the required above-the-fold elements?
Only if it communicates something. A beautiful abstract image or a stock photo of smiling people does not count as a required element — it is decoration that consumes fold space without earning it. A screenshot of your product, a photo showing the result your client gets, or a before/after visual that reinforces your headline — those count. If the visual could be removed and the fold still communicates the same message, it is not a required element.
Is it wrong to have more than one CTA above the fold?
Having two CTAs is acceptable if one is clearly primary and one is clearly secondary. Primary: filled button, high contrast, verb-first label. Secondary: text link or outlined button with lower visual weight. What does not work is three CTAs at equal visual weight — that forces the visitor to make a choice before they've decided to engage, which usually means they don't choose anything. One is better than three. Two with clear hierarchy is better than two at equal weight.
How do I fix my mobile fold without redesigning the entire site?
Start with the hero section. Three targeted changes get most of the gain: (1) Make the headline your first visible element — not the logo, not the nav hamburger. (2) Move your primary CTA button to directly below the headline, not below the hero image. (3) If you have a hero image, reduce its height on mobile to 200–240px maximum, or use it as a background at 30–40% opacity so the text and CTA stay visible without the image pushing content below the fold.