Anyone who types in the address from a business card or taps the website link in a business profile lands on the homepage. Its top part is the area every visitor sees before scrolling, and that is where they decide within moments whether to stay: Am I in the right place, with my request and in my area? Is it worth reading on? How do I get to an appointment or a quote? The article on the page plan of a business website describes the homepage's job briefly: say in one sentence what the business does, for whom and where, followed by the services as entry points, a piece of trust evidence and the next step. This article goes one level deeper. It shows which four building blocks belong in the first screen, how they shift between desktop and mobile, in which order the sections below follow down to the footer, and how to check the first screen before the page goes live.
Why the first screen matters
How much attention the top of a page receives was measured by Nielsen Norman Group using eyetracking. The analysis covered more than 130,000 eye fixations on a 1,920 × 1,080 pixel screen (Nielsen Norman Group 2018).
They came from 120 participants who completed tasks on pages from many sectors, including news sites, online shops, blogs, FAQ pages and reference pages (Nielsen Norman Group 2018). The result: about 57% of viewing time fell on the area above the fold, meaning what is visible without scrolling (Nielsen Norman Group 2018). The first two screen heights, up to 2,160 pixels, together accounted for 74% (Nielsen Norman Group 2018). The second screen alone received 17%, about a third of what the first one got; the remaining 26% was spread in small portions over the rest of the page (Nielsen Norman Group 2018).
Something has shifted compared with the previous study: in 2010, 80% of viewing time was still spent above the fold (Nielsen Norman Group 2018). People scroll more today, and the fold is not a wall. It remains the line below which attention drops sharply, though. Even within the first screen, attention is unevenly spread: more than 65% of the viewing time above the fold was concentrated in the top half of the visible area (Nielsen Norman Group 2018). The author, Therese Fessenden, draws a short conclusion: reserve the top of the page for high-priority content and keep major calls to action above the fold (Nielsen Norman Group 2018). For a homepage, that means the headline with service and place belongs at the top edge, not underneath a full-screen photo.
What the figures do not say
Four building blocks above the fold
The first screen does not need to explain everything. It needs to answer three questions a visitor asks in the first moments: Am I in the right place? Is it worth reading on? What happens next?
Four building blocks are enough for that, and they carry over to almost any homepage, whether a trade business, a practice, a law firm or a shop. An image can add to them if it shows something real: the team, the workshop, a finished job. It frames the four blocks; it does not replace them. How the headline looks typographically and whether it stays readable in two lines on a phone depends on the choice of typeface; more on that in the article on fonts for your website.
Service and place
The main headline says what the business does and where: “Bathroom renovation in Hildesheim and the surrounding area” instead of “Welcome”. It uses the words customers type into search themselves. The company name is already in the logo and does not need to occupy the headline as well.
Benefit line
One sentence below says what the customer gains or what sets the business apart: “Planning, removal and tiling from one team, one fixed contact person”. It is concrete and verifiable, not a row of values such as quality, passion and experience.
One main way to enquire
A clearly designed button with a verb that names the next step: “Request a date”, “Arrange a call-back”, “Ask for a quote”. The phone number may sit next to it as a second way, but not a third and fourth button with the same weight.
One trust element
A single, verifiable signal that removes the obvious doubt: master craftsman status, specialism, service area, a photo of a real job or a link to reviews. One element that is true carries more weight than a row of seals nobody can trace.
Scroll table sideways
| Building block | Weak | Solid |
|---|---|---|
| Headline | “Welcome to our website” | “Bathroom renovation in Hildesheim and the surrounding area” |
| Benefit line | “Quality, passion, experience” | “Planning to tiling from one team, one fixed contact person” |
| Way to enquire | “Learn more” plus three more buttons of the same size | “Request a date” as a button, phone number as a tappable link |
| Trust | Collection of seals without explanation, superlatives without proof | “Master craftsman business” and a link to local references |
| Image | Stock photo, slider with changing messages | Photo of a real job, static, with alt text |
The main path: one button, one goal
Many homepages offer several equally weighted buttons in the first screen: services, about us, contact, offers. For the visitor, that means making a decision before knowing whether they are in the right place.
A single main path that leads to an enquiry is clearer, with at most a second, visibly subordinate one. Which path is the main one depends on the business: for an emergency service it is the call, for a practice the appointment booking, for a construction firm the project enquiry. Without this path, visits lead nowhere; the article on visitors who do not enquire lists it as the first cause. As for colour, the button has to stand out from the background, and the text on it has to be readable. How a brand colour achieves both is shown in the article on brand colours with enough contrast.
- The label is a verb with a goal: “Request a date” rather than “More” or “Let's go”.
- The button's accent colour appears only once in the first screen; if it also sits on decorative elements, the button loses its signal.
- On mobile, the target is at least 24 × 24 CSS pixels (WCAG 2.2, success criterion 2.5.8), and for the main path clearly larger and full width.
- The button leads straight to a short form or opens the dialler, not to an overview page with further decisions.
- The phone number sits next to or below it as a tappable link, not as an image.
- The same main path appears again further down, at the end of the last content section.
A trust element that holds up
The fourth element is the least conspicuous and the easiest to overdo. In the first screen, one signal is enough if it answers the obvious question: can this business do what I need?
For a trade business that is often the master craftsman's certificate, for a practice the specialism, for a delivery service the delivery area. Detailed evidence, references and team photos follow further down; how they work without empty phrases is described in the article on the about page. Reviews are an obvious trust element, and they come with a duty: anyone who makes consumer reviews accessible must provide information on whether and how they ensure that the reviews come from consumers who actually used or purchased the goods or services (Section 5b(3) UWG). A star rating in the first screen therefore needs a link to that information, for example directly below it. The details are in the article on customer reviews on your website.
What has no place in the first screen
On mobile: less space, same order
Nielsen Norman Group's eyetracking took place on desktop screens (Nielsen Norman Group 2018).
On a phone, the first screen is narrower and holds far less content: a header with logo and menu icon, the headline, one or two lines of text, a button, and the edge is reached. The order of the four building blocks stays the same; only the space for each one shrinks. What sits side by side on desktop, text on the left and image on the right, is stacked on mobile. The page structure then decides whether the image or the headline comes first, and a full-screen photo above the headline pushes all four blocks below the edge. Basics on font size, tap targets and the thumb zone are in the article on your website on mobile.
On mobile, the image is also a question of loading time. On 76% of pages on mobile, the largest element that appears during loading is an image, compared with 85% on desktop (HTTP Archive Web Almanac 2025). This element, measured as Largest Contentful Paint, helps decide how quickly a page feels ready; a good value is under 2.5 seconds (web.dev). On mobile, 62% of pages achieve that (HTTP Archive Web Almanac 2025). Homepages do worse than secondary pages: only 45% of homepages reach good Core Web Vitals on mobile, against 56% of secondary pages (HTTP Archive Web Almanac 2025). Among the possible reasons, the analysis suggests that homepages are updated more often and carry more changing components. A large image, a slider, an embedded video and several pop-ups in the first screen are exactly such components.
Scroll table sideways
| Building block | Desktop | Mobile |
|---|---|---|
| Service and place | One line at the top left, next to or above the image | Two or three short lines directly below the header |
| Benefit line | One sentence below the headline | One short sentence, with the detail further down |
| Way to enquire | Button, with the phone number next to it as text | Full-width button, phone number tappable |
| Trust | A line or small badges below the button | One line below the button, if need be just below the edge |
| Image | To the right of the text or as a calm background | Below the button or as a shallow strip, not full screen above it |
| Menu | Main items visible in one row | Menu icon, plus a call icon in the header |
One mistake that weighs particularly heavily on mobile is lazy-loading the large image at the top. Lazy loading makes sense for images further down; for the largest image in the first screen, it slows down the display. About 16% to 17% of pages lazy-load exactly this image anyway (HTTP Archive Web Almanac 2025). If you keep your image at the top, set it to load immediately and keep the file small.
The zoom test
What clogs the first screen
A weak first screen is often not empty but overloaded. Every extra element competes with the headline and the button for the same scarce space, and on mobile it pushes them below the edge.
Google describes the consequence of pop-ups clearly: interrupting users too often with intrusive interstitials can frustrate them and damage their trust in the website (Google Search Central). These five patterns take space away from the four building blocks:
- Sliders with several slides: each slide carries a different message, and anyone who does not wait sees only the first. One fixed statement with one image is clearer and loads faster.
- Pop-ups on opening: newsletter windows, voucher notices, chat prompts. Google recommends using banners that take up only a small part of the screen instead of full-page interstitials (Google Search Central).
- A consent banner covering a large part of the page: the request itself may be necessary, but it does not have to hide the headline and button; a compact banner at the bottom edge keeps the first screen readable.
- Movement without reason: autoplaying videos, scrolling tickers or text flying in from the side pull the eye away from the headline. If you use motion, keep it calm and respect the system setting for reduced motion.
- An oversized logo and a two-level header: on mobile they take up a large part of the screen before the first line of content appears.
The order below the fold
Below the fold, attention spreads over several screen heights. In the Nielsen Norman Group study, the first three screen heights together accounted for 81% of viewing time (Nielsen Norman Group 2018).
So the homepage does not have to be short, but every section has to earn its place, and the most important ones come first. An order that works for many businesses looks like this:
- Services as entry points: one card per service with one sentence and a link to its own service page.
- Evidence of the work: references with photo, place and type of job, or a short list of typical jobs.
- The process in steps: what happens after the enquiry, from the call-back to the on-site appointment.
- Service area and availability: places, phone or opening hours, directions.
- Who is behind it: a team photo, two sentences and a link to the about page.
- Frequently asked questions: the questions actually asked before an enquiry, with short answers.
- The second enquiry section: the same main path as at the top, with a sentence on what happens after sending.
- The footer: contact details, links to the imprint and privacy policy, and a short sentence about the business.
The service cards are the hinge between the homepage and the rest of the website. What finally convinces is not the homepage but the page that describes a service in full, and the cards lead there. How such pages are built is covered in the article on service pages with one page per service. Every section starts with a headline that carries its message, not with a label such as “Our services”. People who scroll rely on headings and bold text to identify what is important (Nielsen Norman Group 2018). One trap of airy design is the false floor: if the first screen ends with a clear edge and plenty of white space, the page looks finished. The study recommends visible signals that there is more, such as cut-off text at the bottom edge (Nielsen Norman Group 2018); on mobile, it is often enough for the next card to reach a little into the first screen.
The footer is where visitors look for the imprint and privacy policy. Under German law, the mandatory information of a commercial digital service has to be easy to recognise, directly accessible and permanently available (Section 5(1) DDG); a link in the footer, which appears on every page, is the usual way to do this. Which details belong in the imprint is described in the article on imprint and privacy policy. Beyond that, the footer carries what visitors look for again at the end of a page: phone number, address and availability.
How to check the first screen
Whether the first screen does its job can be checked without any tools.
The test becomes meaningful with a person who does not know the business, and it belongs on all three device sizes: what sits above the fold on desktop can slip just below it on a tablet, and on mobile a separate layout applies anyway.
- Open the page on a phone without scrolling: does it say what the business does and where?
- After a few seconds, ask the test person what the business offers and what they would do next.
- Is the main path to an enquiry visible without scrolling and labelled with a verb?
- Is a verifiable trust element visible, and is it accurate?
- Does a banner or pop-up cover the headline or the button on first load?
- Does the first screen stay readable when the text is enlarged in the browser?
- Does the next section visibly reach into the first screen so it is clear there is more?
- Does the large image at the top appear without delay, with lazy loading switched off for it?
From framework to finished homepage
In XICflow, a homepage does not start on a blank sheet.
The templates include 6 starting points as full-page templates, among them a landing page, plus industry landing pages and individual sections to drop in, such as hero, price band, FAQ and call to action (XICflow features page). The template provides the framework; you write the headline, benefit line, button and trust element for your business. You change the order of the sections in the editor by drag and drop, moving blocks to their new position. You check the first screen in the live preview, which shows the page in 3 viewports, desktop, tablet and mobile, and displays every change instantly at all three sizes (XICflow features page). Examples of finished websites are in the demos.