Best startup websites: what the great ones do above the fold.

“Above the fold” is whatever shows before a visitor scrolls. People do scroll, but they still look hardest at the top. In Nielsen Norman Group's 2018 eyetracking study of 120 people, 57% of page-viewing time went to the content above the fold, and 74% to the first two screenfuls. The first screen does not need to hold everything. It needs to make the visitor want the second one.

Supabase, a database platform for developers that went through YC in Summer 2020, fits every part of a working first screen into a desktop window 800 pixels tall. Here is what we saw, and the visitor question each part answers.

• The headline is a two-line promise about how fast you can build and how far it scales. It answers “why should I care?” in seven words.
• A short paragraph beside it names the core, a Postgres database, and lists what you can add to it: sign-in, APIs, functions, real-time data, storage and vector search. It answers “what exactly is it?” for a technical reader who wants specifics.
• Two buttons split the visitors: start a project for people ready to try it, request a demo for teams that want to talk first. That answers “what do I do next?” for both kinds of buyer.
• Proof sits in the navigation: the company's GitHub star count, a signal its developer audience recognizes.
• The product starts at the bottom of the screen, with the first feature cards and small interface previews, so the scroll begins with the product rather than more promises.
• One extra: a banner across the top for the company's upcoming event. Useful for existing users, and one more thing for a first-time visitor to read.

A developer can tell what Supabase is, whether it fits and how to try it without scrolling. That is the job, and it takes fewer words than most founders expect.

The same four questions, answered eight different ways. Each row is what the first screen showed on a desktop window 1280 by 800 pixels.

• Open with the product, the buyer or the outcome. Resend and Browser Use name their category; Gusto and Vanta name what the buyer wants; Stripe does both in one line. Whichever you open with, the next sentence supplies the other half.
• Keep the next step obvious. Every site put its main action in the first screen. Seven of the nine added a second button, usually for a different kind of visitor or a faster route: a demo (Supabase), the documentation (Resend), a walkthrough (Gusto) or sign-up with Google (Stripe). Vanta, which sells through demos, offered one.
• Choose proof your buyer trusts. Customer logos for business buyers, GitHub stars for developers, an investor badge for a young company, ratings for a marketplace.
• Show the product early. Supabase's feature cards, Mem0's setup tabs and Airbnb's listings all start in the first screen.
• Lower the risk beside the button. A free account, free credits or a short list of reasons it is safe to try all sit right next to the action.
• Give second audiences a path, not the headline. Gusto sends accountants to their own section of the navigation, and Stripe puts Contact sales in the header, so each headline stays on its main buyer.
• Watch what else claims the first screen. Announcement banners (Supabase, Vanta, Mem0), chat windows (Vanta) and cookie notices (PostHog, Mem0) all appeared above the fold. Each one competes with the headline, so each should earn its place.
• Check the phone. On a phone screen 390 by 844 pixels, Stripe kept its headline, both buttons and the start of its logo strip, but not the longer sentence below the headline. Gusto pinned its main button to the header. Your phone view is a separate first screen, and it holds less.

Everything above is what nine public pages showed on one day. We have no access to these companies' analytics, so nothing here says which layout converts best, and the pages will change. Large companies can also do things a new startup cannot: Airbnb can skip the explanation because most of its visitors already know what it does. A startup nobody has heard of has to explain itself in the first screen.

Use the patterns as hypotheses, then test them on your own page. Our guide to what makes a landing page convert covers how to run that test.

• Write the four answers first: who it is for, what it does, why to believe it and what to do next. The worksheet's website review tab is built for this.
• Draft the first screen in words before any design: a headline, one supporting sentence, one or two actions and one piece of proof you have permission to show.
• Start with the pages buyers need: a homepage, a page for each product or service, pricing or how to buy, about and contact. Add more when there is a reason.
• Choose how to build it. A website builder is often enough at the start. A custom build makes sense when the site needs features a builder cannot handle or is part of the product itself.
• Make it readable to search engines from the first day. Our guide to SEO-friendly web design covers the build choices that help or hurt.
• Give each page one goal, such as sign-ups or demo requests, measure it, and change one thing at a time.

If you would rather build it with a team, our website design page explains how we work.