A one-page website is the quickest way to put a person, a small business or a project online. It is also easy to get wrong, because the page seems small enough to build without thinking. Most weak pages fail at the planning stage, not the design stage. Work through these steps on paper first, and the building becomes almost mechanical.
Step 1: Decide what the page is for
Write one sentence that finishes “After reading this page, the visitor should…”. Good answers are specific: call me for a quote, book a table, download the app, send an email, buy a ticket. If your sentence has three different goals, you have three different pages. Pick one main action and make everything else support it.
Step 2: Know who it is for
Describe your visitor in a few lines: what they already know, what they are worried about, what device they are probably using. A local plumber’s page is read by someone with a leak, on a phone, in a hurry. A portfolio is read by a client with a few minutes and a shortlist. The answer changes what you put first.
Step 3: Outline the sections
Most one-page sites work well with five or six blocks, in this order:
- Hero. A clear headline, a single supporting line and the main button.
- What you offer. Two to four items, each with a short, plain description.
- Proof. Examples of your work, short testimonials from real customers, logos of real clients, or simple numbers you can stand behind.
- About. Who you are and why you can be trusted. A real name and a real photo help.
- Contact or action. The main button again, plus an email, phone number or form.
- Footer. Address if relevant, links and a privacy note if you collect any information.
Step 4: Write the words first
Write the headline and the text in a document before you touch a design tool. Say what you do, for whom, and why it matters, in plain language. Replace vague phrases such as “innovative solutions” with a concrete description of the service. Keep sentences short. Put the most important sentence first in each block. If the page can be understood by reading only the headings, you are on the right track.
Step 5: Collect honest images
Real photos of your work or your place usually beat stock images. Whatever you use, make sure you have the right to use it, and write a short description for each image so people who use screen readers know what it shows. Keep files small: resize large photos and use a compressed format so the page loads quickly on mobile data.
Step 6: Plan for phones
Most visitors will arrive on a phone. Plan a single column that reads top to bottom, with large, easy-to-tap buttons and text that does not need zooming. Some page builders position elements at fixed sizes and scale them down on small screens rather than rearranging them, so keep text short and buttons big enough to stay usable when scaled. Always check your finished page on an actual phone.
Step 7: Accessibility basics
- Use strong contrast between text and background.
- Make text at least a comfortable reading size, about 16 px or larger for body text.
- Do not rely on colour alone to show meaning.
- Use real headings in order, from one main heading down.
- Make sure every button and link says what it does. “Get a quote” is better than “Click here”.
Step 8: Search basics
Give the page a clear title that names what you do and where, and a short description of up to about 150 characters. Use one main heading that matches what people search for. Write original text, because copied content is unlikely to rank. If you serve a local area, say so in the text.
Step 9: Trust and legal basics
Show a way to contact you. If you collect names or email addresses, say what you do with them. If you use ads or analytics, a privacy page is expected. Do not claim awards, customers or numbers you cannot prove.
Step 10: Test before you publish
- Read the whole page aloud and fix anything awkward.
- Click every button and link.
- Open it on a phone and a computer.
- Ask someone who has never seen it what the page is for, after five seconds. If they cannot say, simplify.
Building it
With your plan ready, a drag-and-drop tool is much quicker to use. SiteBuilder lets you start from a template, drag blocks onto a canvas, build several pages and save the project as a file. It is an early version, and exporting a finished site is switched off for now, so check its current limits on the SiteBuilder page before you rely on it for a live site.