--- title: "Design the first screen so that searchers see the answer and keep reading" description: "What belongs above the fold on desktop and mobile: headline, opening, visuals, navigation, calls to action, speed, type, and trust signals, and how to test it." canonical: "https://scalewithsearch.com/articles/ux-seo-above-fold-optimization" date: "2026-03-20" modified: "2026-09-25" --- ## Site navigation - [Scale With Search](https://scalewithsearch.com/) - Real estate - Real estate - [Real estate](https://scalewithsearch.com/for/real-estate) - Work - Start here - [Send your brief](https://scalewithsearch.com/work#send-your-brief) - [Prepare your six-question brief](https://scalewithsearch.com/work#prepare-your-six-question-brief) - Build - [Site build, content library with SEO, signal desk](https://scalewithsearch.com/work) - For your business - Trades and home services - [Auto body and collision shops](https://scalewithsearch.com/for/auto-body-and-collision-shops) - [Foundation and home repair contractors](https://scalewithsearch.com/for/foundation-and-home-repair) - [Garage door and fencing contractors](https://scalewithsearch.com/for/garage-door-and-fencing-contractors) - [HVAC contractors](https://scalewithsearch.com/for/hvac-contractors) - [Janitorial and commercial cleaning companies](https://scalewithsearch.com/for/janitorial-and-commercial-cleaning) - [Locksmiths](https://scalewithsearch.com/for/locksmiths) - [Moving companies](https://scalewithsearch.com/for/moving-companies) - [Pest control companies](https://scalewithsearch.com/for/pest-control-companies) - [Plumbing and electrical contractors](https://scalewithsearch.com/for/plumbing-and-electrical-contractors) - [Restoration and water or fire damage companies](https://scalewithsearch.com/for/restoration-and-water-fire-damage) - [Roofing companies](https://scalewithsearch.com/for/roofing-companies) - [Towing companies](https://scalewithsearch.com/for/towing-companies) - [Tree services and landscaping companies](https://scalewithsearch.com/for/tree-services-and-landscaping) - [Solar installers](https://scalewithsearch.com/for/solar-installation) - [General contractors](https://scalewithsearch.com/for/general-contractors-and-construction) - [Paving, concrete, and flooring contractors](https://scalewithsearch.com/for/paving) - Practices and professional services - [Bookkeeping and tax practices](https://scalewithsearch.com/for/bookkeeping-and-tax-practices) - [Dental practices](https://scalewithsearch.com/for/dental-practices) - [Family and criminal defense law firms](https://scalewithsearch.com/for/family-and-criminal-defense-law-firms) - [Med spas and aesthetics practices](https://scalewithsearch.com/for/med-spas-and-aesthetics) - [Personal injury law firms](https://scalewithsearch.com/for/personal-injury-law-firms) - [Veterinary clinics](https://scalewithsearch.com/for/veterinary-clinics) - [Gyms and fitness studios](https://scalewithsearch.com/for/fitness) - [Therapy and outpatient health practices](https://scalewithsearch.com/for/therapy-and-outpatient-health) - [Medical billing companies](https://scalewithsearch.com/for/medical-billing) - [Insurance agencies](https://scalewithsearch.com/for/insurance-agencies) - [Financial advisors](https://scalewithsearch.com/for/financial-advisors) - [Property management companies](https://scalewithsearch.com/for/property-management) - [Recruiting and staffing agencies](https://scalewithsearch.com/for/recruiting-and-staffing) - [Architects and interior designers](https://scalewithsearch.com/for/architects-and-interior-designers) - [Logistics and supply chain companies](https://scalewithsearch.com/for/logistics-and-supply-chain) - Agencies, MSPs, and manufacturing - [IT and managed service providers](https://scalewithsearch.com/for/it-and-managed-service-providers) - [Machine shops and precision manufacturers](https://scalewithsearch.com/for/machine-shops-and-precision-manufacturing) - [Marketing agencies and freelancers](https://scalewithsearch.com/for/marketing-agencies-and-freelancers) - [SEO agencies and consultants](https://scalewithsearch.com/for/seo-agencies-and-consultants) - [Small manufacturers and fabricators](https://scalewithsearch.com/for/small-manufacturers-and-fabricators) - Restaurants, shops, studios, and nonprofits - [Restaurants and hospitality businesses](https://scalewithsearch.com/for/restaurants-and-hospitality) - [Retail stores and ecommerce sellers](https://scalewithsearch.com/for/retail-and-ecommerce) - [Photographers, event planners, and travel agents](https://scalewithsearch.com/for/photographers) - [Churches and nonprofits](https://scalewithsearch.com/for/churches-and-nonprofits) - [All industries](https://scalewithsearch.com/for/) - Learn - For your office - [Office job guides](https://scalewithsearch.com/guides/) - [Browser calculators](https://scalewithsearch.com/tools/) - Start here - [How it works](https://scalewithsearch.com/how-it-works) - [Free Starter Kit](https://scalewithsearch.com/kit/business-memory-starter-kit.zip) - [Synthetic specimen](https://scalewithsearch.com/specimen/working-session-specimen.zip) - Guides - [The Complete Guide to Business Memory for AI Agents](https://scalewithsearch.com/articles/business-memory-for-ai-agents-guide) - [The Complete Small-Business Guide to AI Agent Governance](https://scalewithsearch.com/articles/ai-agent-governance-guide-small-business) - [The Complete Guide to Leaving Vendor AI Memory](https://scalewithsearch.com/articles/leaving-vendor-ai-memory-guide) - Articles by cluster - [Business memory](https://scalewithsearch.com/articles/business-memory-for-ai-agents-guide) - [Agent governance](https://scalewithsearch.com/articles/ai-agent-governance-guide-small-business) - [Migration and ownership](https://scalewithsearch.com/articles/leaving-vendor-ai-memory-guide) - For machines - [llms.txt](https://scalewithsearch.com/llms.txt) - [llms-full.txt](https://scalewithsearch.com/llms-full.txt) - [Machine view](https://scalewithsearch.com/?view=machine) - Company - Evidence - [Proof](https://scalewithsearch.com/proof) - Company - [About](https://scalewithsearch.com/about) # Design the first screen so that searchers see the answer and keep reading. A visitor clicks your result. The page opens on a full-screen stock photo, a cookie banner, and a headline that does not match the query. The visitor goes back to the results within seconds. Everything below that first screen never gets read. "Above the fold" is the content visible before the visitor scrolls. The term comes from newspapers, where the stories on the top half of the folded page got the most attention. On the web, the first screen is the only content every visitor sees. This article covers what belongs there, how to make it render fast, and how to test it. ## Know what the first screen does for search Google does not rank a page by its bounce rate, and it indexes content below the fold as well as content above it. The first screen still matters for search in three ways. First, Google's page layout algorithm, introduced in 2012, can demote pages where ads push the main content below the first screen. Second, intrusive interstitials that cover the content on mobile count against a page's experience signals. Third, the Largest Contentful Paint (LCP) element is always in the first screen, so what you put there sets the page's LCP. The larger effect is on visitors. Nielsen Norman Group published eye-tracking research in 2018 on this question. People spent about 57 percent of their viewing time above the fold, and 74 percent in the first two screenfuls. Visitors do scroll, but only when the first screen earns it. [User engagement signals](/articles/user-engagement-signals-seo-ux) explains which engagement data Google does and does not use. ## Know where the fold falls The fold moves with every device. Phones show far less height than desktop monitors, and tablets fall between. Browser address bars, toolbars, and the phone's system bars take part of the screen. A design that assumes the full screen height puts key content lower than planned. Check your analytics for the most common screen sizes among search visitors. Test the first screen at the top three sizes. Common responsive breakpoints are about 320 to 768 pixels wide for phones, 769 to 1,024 for tablets, and 1,025 and above for desktop. Plan the first screen for each breakpoint separately. Render the first screen on the server. Content that JavaScript builds after load appears late, and the visitor's first impression is an empty frame. ## Write a headline that confirms the query Visitors read the headline first to check that they are in the right place. - Make the H1 the most prominent text on the screen through size, weight, and position. - Use the words the searcher typed, so that relevance is obvious at a glance. - State the benefit or the answer, not only the topic. - Keep it to about 50 to 60 characters, so that it scans in one pass. - Add a subheadline that gives context the headline cannot fit. Specific headlines beat generic ones. "Marketing tips" tells the visitor nothing. "17 email automation workflows for SaaS onboarding" tells them exactly what they will get. ## Open with the answer The opening paragraphs decide whether the visitor keeps reading. They must deliver on the headline at once. Connect the first sentence to the search intent. A tangent or a long preamble sends visitors back to the results. Start with the substance: the answer, the key fact, or the situation the reader is in. A surprising fact or a direct question can hook the reader, but only if the next sentence delivers. Two to three short paragraphs usually fit above the fold with the headline. A longer introduction pushes the key content below it. As a rough guide, a desktop first screen holds about 150 to 250 words with the headline and navigation. A phone holds far fewer, so prioritize harder there. ## Choose visuals that carry information Visuals set the tone before the visitor reads a word. A hero image should show the subject. Generic stock photos of smiling office workers are so common that visitors ignore them, and they take space from the answer. A specific product photo, a diagram, or a screenshot earns its place. Compress hero images and serve them in WebP or AVIF, because the hero image is often the LCP element. Write descriptive alt text: screen readers read it, and search engines use it to understand the image. [Image optimization for UX and SEO](/articles/image-optimization-ux-seo) covers formats and sizes. Use icons only when their meaning is obvious, or pair them with a text label. Do not autoplay video with sound; most browsers block it by default. Offer video as an option with a clear play button. A full-screen hero makes a strong statement and delays the content. On an article or a service page, keep the hero short so that the headline and opening paragraph stay visible. ## Place navigation for the next step Navigation in the first screen tells visitors what else the site offers. A sticky header keeps the menu available as the visitor scrolls. On a phone, keep it slim so that it does not take a large share of a small screen. A hamburger menu saves space but hides the links; put one or two critical links outside it. Mega menus suit large sites with deep hierarchies, and small sites do not need them. A visible search box helps visitors on large sites who know what they want. Breadcrumbs take little space and show where the page sits in the site. [Navigation design for SEO](/articles/navigation-design-seo) covers menus and internal links in more depth. ## Put one clear call to action in view The page's main action belongs in the first screen, on pages where the visitor arrived ready to act. Choose one primary call to action. Several competing buttons split attention. Make it visible with size, contrast, and white space. Label it with the result: "Start free trial" says what happens, and "Submit" does not. Put a short value statement next to it, so that the visitor knows why to click. Remove friction behind it, such as forced account creation or a long form. On phones, make the button large and place it within thumb reach. Use device-specific actions. A "Call now" button with a `tel:` link suits a phone. A quote request form may suit desktop better. Informational articles are different. A visitor who searched a question wants the answer first. A sales button above the answer reads as a bait and switch. ## Make the first screen render fast The visitor sees a blank screen until the first screen renders. 1. Keep LCP at 2.5 seconds or less. Identify the LCP element in PageSpeed Insights and optimize that element first. 2. Give the LCP image `fetchpriority="high"` or a preload hint. 3. Inline the critical CSS for the first screen and defer the rest. 4. Defer JavaScript that the first screen does not need. 5. Lazy load images below the fold, and never lazy load the images in the first screen. [Lazy loading for SEO](/articles/lazy-loading-seo-implementation) covers the rules. 6. Control font loading with `font-display`, so that text does not stay invisible or shift when the web font arrives. Build in layers. The HTML alone should show the headline and the opening. CSS adds the design. JavaScript adds enhancements that the content does not depend on. ## Design the phone version first Phones carry most search traffic for many sites, and Google indexes the mobile version of every page. The mobile first screen needs the hardest choices. Stack content in one column. Visitors scroll vertically on phones by habit, and horizontal swiping is awkward. Make tap targets at least 48 by 48 CSS pixels, a common guideline; WCAG 2.2 sets 24 by 24 as the minimum. Use body text of about 16 pixels or more, so that visitors do not need to zoom. Keep interstitials off the first screen, apart from legally required notices. [Interstitials and pop-ups](/articles/interstitials-popups-seo-impact) covers which formats Google treats as intrusive. ## Use a layout pattern that fits the page | Pattern | How visitors read it | Fit | |---|---|---| | F-pattern | Across the top, down the left side, and across again | Text-heavy pages; put key words at the start of lines and headings | | Z-pattern | Top left to top right, diagonally to bottom left, then across | Landing pages with a few distinct action areas | | Single column | Straight down | Articles and focused landing pages | | Multi-column | Scanning between columns | News sites and dashboards; needs careful responsive design | | Cards | One self-contained unit at a time | Product listings, portfolios, article collections | ## Set type for comfortable reading Use body text of 16 to 18 pixels, with headings sized to show the hierarchy. Keep lines to about 50 to 75 characters; longer lines tire the eye, and shorter lines feel choppy. Set body line height near 1.5 and tighter for headings. Add slight letter spacing to body text only if the typeface needs it. Meet a contrast ratio of at least 4.5 to 1 for body text, the WCAG AA level. Use weight, such as regular, medium, and bold, to create emphasis without more sizes. ## Use white space to group and focus White space shows which elements belong together and which stand apart. Keep margins consistent between elements, and give text and buttons enough padding. Surround the key element, such as the headline or the call to action, with space to draw the eye to it. Too much white space has a cost too: it pushes the answer below the fold. On phones, reduce the spacing and keep readability. ## Make interactive elements look interactive Buttons need clear affordance: a shape, contrast, or shadow that says "click me." Flat design sometimes hides what is clickable. Hover states confirm interactivity on desktop, but phones have no hover, so the default state must be clear alone. In forms, use visible labels, the right input types, and inline validation that reports errors as the visitor types. Show progress in multi-step forms, because visitors finish more often when they know how many steps remain. Small feedback, such as a button animation or a success message, confirms that the action worked. ## Show trust signals early A professional logo and a clean design show a real organization. Contact details, such as a phone number or a clear contact link, show openness. Security and payment badges show that checkout and form pages are protected. Customer counts or short, real customer quotes show that others trust you. On articles, show the author's name and credentials near the headline and a visible date for the last substantial update. ## Test the first screen Measure scroll depth, engaged sessions, and engagement time in GA4 for search visitors, by page type and device. Use heat maps to see what visitors look at and click. Run A/B tests on layout changes, such as a shorter hero or a moved call to action. Wait for a significant result. Watch a few users land on the page in a moderated test, and ask what they expected to find. Compare their answer with what the first screen shows. ---- ```text .|########||. .|########||. .|########||. |##||. .||##|. |##||. .||##|. |##||. .||##|. |#|. .|#|. |#|. .|#|. |#|. .|#|. |#| |#| |#| |#| |#| |#| .#| |#. .#| |#. .#| |#. .#. .#| .#. .#| .#. .#| |#. .#| |#. .#| |#. .#| |# ...... #| |# ...... #| |# ...... #| .# ||#########| #| .# ||#########| #| .# ||#########| #| .#. |######||######|. .#. .#. |######||######|. .#. .#. |######||######|. .#. #. .##|###|##|#|######| .# #. .##|###|##|#|######| .# #. .##|###|##|#|######| .# || |##|#||||||||||||#||#| || || |##|#||||||||||||#||#| || || |##|#||||||||||||#||#| || # |#||||||||||||||||||||#| #. # |#||||||||||||||||||||#| #. # |#||||||||||||||||||||#| #. || |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| || # .#||||||||||||||||||||||||#| # # .#||||||||||||||||||||||||#| # # .#||||||||||||||||||||||||#| # || ....|||#||||||##|#|||#|#||##||||....|. || || ....|||#||||||##|#|||#|#||##||||....|. || || ....|||#||||||##|#|||#|#||##||||....|. || #. . ....|# ....#||| ||| .#||| ....#. .# #. . ....|# ....#||| ||| .#||| ....#. .# #. . ....|# ....#||| ||| .#||| ....#. .# # . ||||#| .#####|| . .#| .#||| ||||# #. # . ||||#| .#####|| . .#| .#||| ||||# #. # . ||||#| .#####|| . .#| .#||| ||||# #. .| ||||| #. |#|||||. || #. |#||. .||||| || .| ||||| #. |#|||||. || #. |#||. .||||| || .| ||||| #. |#|||||. || #. |#||. .||||| || || |.... #. ....|#. |. ...|. ....|| || || |.... #. ....|#. |. ...|. ....|| || || |.... #. ....|#. |. ...|. ....|| || #. .||||||##||||||##||####|||||||#||||||#| .# #. .||||||##||||||##||####|||||||#||||||#| .# #. .||||||##||||||##||####|||||||#||||||#| .# # .||####|###########################|. # # .||####|###########################|. # # .||####|###########################|. # # .#||||||.#.|| # |. ..# #| #|||||#| # # .#||||||.#.|| # |. ..# #| #|||||#| # # .#||||||.#.|| # |. ..# #| #|||||#| # # .#|||||| .. |# ## |#| ...#|#|||#| # # .#|||||| .. |# ## |#| ...#|#|||#| # # .#|||||| .. |# ## |#| ...#|#|||#| # # .#|||#|# .# .#| #| ##|.#..#|||||#| # # .#|||#|# .# .#| #| ##|.#..#|||||#| # # .#|||#|# .# .#| #| ##|.#..#|||||#| # # .#||||||############|######|||||#| # # .#||||||############|######|||||#| # # .#||||||############|######|||||#| # # |...||#||||||#||||#|#||||||#|||||#||| |.| # # |...||#||||||#||||#|#||||||#|||||#||| |.| # # |...||#||||||#||||#|#||||||#|||||#||| |.| # #. .. ||||# .|||##|. |#| .|| || .|||#. #| # .# #. .. ||||# .|||##|. |#| .|| || .|||#. #| # .# #. .. ||||# .|||##|. |#| .|| || .|||#. #| # .# || | ...|| ...##| | #| .|. |. ##### .. .| || || | ...|| ...##| | #| .|. |. ##### .. .| || || | ...|| ...##| | #| .|. |. ##### .. .| || || ||||| || ||||#| . |. |. |#. ||||| |#| || || || ||||| || ||||#| . |. |. |#. ||||| |#| || || || ||||| || ||||#| . |. |. |#. ||||| |#| || || .# |.....#|....|#.||||.|||##.|#|....||.#||.#. #. .# |.....#|....|#.||||.|||##.|#|....||.#||.#. #. .# |.....#|....|#.||||.|||##.|#|....||.#||.#. #. #.|||||||#############################| ||| .# #.|||||||#############################| ||| .# #.|||||||#############################| ||| .# || ##||#||#||||||#||#||#||#||##. || || ##||#||#||||||#||#||#||#||##. || || ##||#||#||||||#||#||#||#||##. || # .#|||||||||#||#|||||||||||#| # # .#|||||||||#||#|||||||||||#| # # .#|||||||||#||#|||||||||||#| # || |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| || .# |#||||||||||||||||||||#| #. .# |#||||||||||||||||||||#| #. .# |#||||||||||||||||||||#| #. || |#||||||||||||||||||#| || || |#||||||||||||||||||#| || || |#||||||||||||||||||#| || #. .######|#|#########| .# #. .######|#|#########| .# #. .######|#|#########| .# .#. |#####||||#####| .#. .#. |#####||||#####| .#. .#. |#####||||#####| .#. |# ||########|| #. |# ||########|| #. |# ||########|| #. |# ...... #| |# ...... #| |# ...... #| |#. .#| |#. .#| |#. .#| |#. .#. |#. .#. |#. .#. .#| |#. .#| |#. .#| |#. |#| |#| |#| |#| |#| |#| .|#|. .|#|. .|#|. .|#|. .|#|. .|#|. |##||. .||##| |##||. .||##| |##||. .||##| .||########||. .||########||. .||########||. Scale With Search 2026 [scalewithsearch.com](https://scalewithsearch.com) ```