The principles behind a website that works

Start with the visitor's question, not your own

Every visitor arrives with a question in their head. "Do they cover my area?" "Roughly how much?" "Can I trust them?" "How do I get hold of someone today?" A site works when it answers those questions faster than the next search result does.

Picture someone searching "boiler repair Worthing" at 7am with a cold shower behind them. They want a phone number, a clear statement that you cover their postcode, and some sign that you are a real, qualified business. Many sites open with "Welcome to our website" and a stock photo of a handshake instead. The visitor goes back to Google and taps the next result.

A simple check is the five second test. Show your homepage to someone who has never seen it, take it away after five seconds, and ask what the business does, where, and what they would do next. If they cannot say, a stranger on a phone will not manage it either. Every page should answer four things:

What is this? A plain headline that names the service and the place.
Is it for me? Evidence you deal with people like them, such as homeowners, landlords or small offices.
Can I trust you? Reviews, accreditations, real photos, a real address.
What do I do next? One obvious button or phone number.

Navigation: make the obvious thing obvious

Good navigation is boring, and that is the point. Keep the main menu to five to seven items and use the words customers use: "Services", "Prices", "Areas we cover", "Contact". Labels like "Solutions" or "Discover" make people stop and think, and every pause costs you a few visitors.

A few practical rules:

The logo always links back to the homepage.
Your phone number sits in the header on every page, not just on the contact page.
On mobile, a menu icon is fine, but keep the call button outside the menu so it is always visible.
A search box only earns its place on larger sites, such as a shop with dozens of products or a site with 50 or more pages.
The footer carries the boring essentials: address, phone, opening hours, privacy policy, and company details.

You may hear that everything must be "within three clicks". That is a myth. People will happily click five times if each click is obviously the right one. What frustrates them is guessing.

Visual hierarchy, spacing and readable text

Visitors do not read pages, they scan them. Their eye goes first to whatever is biggest, boldest or highest in contrast, so your design should decide what that is. Usually it should be the headline, then the main button, then the proof. If a decorative banner or a rotating slider shouts louder than your call to action, the design is working against you.

Whitespace is not wasted space. Generous gaps between sections let each point land, and crowded pages feel cheap and stressful. Some numbers worth putting in your brief:

Body text of at least 16px, and 17 or 18px reads better on a phone.
Lines of roughly 50 to 75 characters. Text stretched across a wide desktop screen is tiring to read.
Line spacing of around 1.5 times the text size.
No more than two typefaces, used consistently.
One style for buttons, so people learn what is clickable.
One H1 per page, followed by headings in logical order.

Conversion focus: designing for the action you want

A conversion is simply a visitor doing what you want: ringing, filling in the form, booking, buying. Your conversion rate is the percentage of visitors who do it, and small changes to it are worth more than most people expect.

Take a plumber with 1,200 visits a month. At a 1% enquiry rate that is 12 enquiries. Suppose a third turn into jobs worth £180 on average, so about four jobs and £720. Improve the page so 2.5% enquire and you get 30 enquiries, ten jobs, and £1,800, without a single extra visitor and without spending more on advertising. If you pay for clicks, the same improvement lowers your cost per enquiry by more than half.

How do designers get there?

One primary action per page. Secondary options (a phone number for people who prefer talking) are fine, but they should not compete visually with the main button.
Specific button wording. "Get my free quote" outperforms "Submit" because it tells people what happens next.
Repeat the action. Put it near the top, after the proof, and at the end of the page, so nobody has to scroll back up.
One page per intent. A separate page for "boiler servicing" and another for "emergency repairs" converts better, and ranks better, than one long "Services" page.
Remove distractions. Auto-rotating carousels, pop-ups on arrival and social media icons that lead people away all dilute the action.

If you run Google Ads, send each campaign to a page written for that search, not to the homepage. Someone who typed "emergency electrician Worthing" should land on a page that says exactly that.

Trust signals that actually build trust

Strangers need a reason to hand over their phone number or card details. The signals that work are specific and checkable:

Reviews with a first name, a town and a date, ideally pulled from Google so visitors can verify them.
Accreditations such as Gas Safe, NICEIC, FMB or TrustMark, with your registration number so people can look you up.
Photos of your real team, vehicles and finished work. Stock images of smiling people in hard hats are easy to spot.
Case studies with a before and after, the problem, and the outcome.
"From" prices or a sample price range, which filter out the wrong enquiries and reassure the right ones.
A named person and a physical address.

There is a legal side too. A limited company must show its registered name, company number and registered office address on its website. And UK law now explicitly bans fake reviews, so do not invent testimonials or pay for glowing ones. Besides the legal risk, one exposed fake review does more damage than a dozen real four-star ones do good.

Forms: every field costs you enquiries

Forms are where interest turns into business, and where most sites quietly leak it. Ask only for what you need to reply: name, phone number and a short message is enough for most trades and services. Each extra field reduces the number of people who finish, so a nine-field "tell us everything" form that becomes a four-field one will often bring noticeably more enquiries.

Put labels above the fields and keep them visible. Placeholder text that vanishes as people type confuses many users.
Write error messages in plain words, such as "Please enter a phone number we can reach you on", and keep the person's other answers in place.
Use invisible spam protection where possible instead of distorted-letter CAPTCHAs that put off real customers.
Send people to a thank-you page after submitting. It reassures them and gives Google Analytics a clean page to count as a conversion.
Link to your privacy notice, and never pre-tick marketing consent boxes. UK GDPR requires you to be clear about what you do with people's data.

Then test it properly: submit your own form from your phone and check that the email actually arrives in your inbox, not your spam folder. Contact forms that silently fail are more common than anyone likes to admit, and the cost is invisible because the lost customers never tell you.

Mobile responsiveness is the main design, not the variant

"Responsive" means the layout adapts to the screen it is on. For most local service businesses, the majority of visits come from phones. Check your own Analytics, but 60 to 80% is common. Google also uses the mobile version of your pages when deciding how to rank them, so a poor mobile experience hurts you twice.

That is why the brief should say "mobile-first": the designer starts with the small screen, where space is tight and priorities are forced, then scales up to desktop. Retrofitting a desktop design onto a phone usually produces tiny text, squashed menus and sideways scrolling. Things to specify:

Tap targets: buttons and links at least 44 by 44 pixels with space between them. WCAG 2.2 sets a bare minimum of 24 by 24 pixels, but fingers are bigger than mouse pointers.
Click-to-call: phone numbers coded as a proper telephone link, so one tap starts the call.
No horizontal scrolling and no text that needs pinching to read.
Sensible keyboards: form fields that bring up the number pad for phone numbers and an email keyboard for email addresses.
No full-screen pop-ups on arrival. Google can demote pages with intrusive interstitials, and visitors simply leave.
A sticky call or quote bar at the bottom of the screen on service pages, if it suits your audience.

Test on real devices. Your designer's newest iPhone on office wi-fi tells you little. Try an older Android phone on 4G in a car park, because that is closer to how a customer in a hurry sees your site. Browser tools such as Chrome's device mode are a useful first pass, not a substitute.

Speed is part of the design

A page that takes five seconds to appear has failed before anyone reads a word. Google measures this through Core Web Vitals, using data from real visitors:

Largest Contentful Paint (LCP): the main content should appear within 2.5 seconds.
Interaction to Next Paint (INP): the page should respond to taps and clicks within 200 milliseconds.
Cumulative Layout Shift (CLS): content should not jump around as the page loads, with a score of 0.1 or lower.

The usual culprits are not mysterious. An uncompressed photo straight from a camera can be 4MB, when 100 to 200KB in WebP or AVIF format looks identical on screen. Other offenders are autoplay background videos, sliders, five font files where two would do, chat widgets, a pile of tracking scripts, heavy page builders and cheap overcrowded hosting. Layout shift is often caused by images without set dimensions or a cookie banner that pushes the page down after it has loaded.

When you test, note the difference between lab data (a one-off simulated test) and field data (what real visitors experienced). Field data is what counts. Do not chase a perfect 100 score. Aim to pass the Core Web Vitals assessment and have the site feel quick on a mid-range phone.

Accessibility: good design for everyone

Roughly one in five people in the UK has a disability, and many more have temporary or situational limits: a broken wrist, tired eyes, a phone in bright sunshine, or simply being over 65 and finding small grey text hard going. Under the Equality Act 2010, businesses providing services to the public must make reasonable adjustments, and that includes their websites. The law does not name a technical standard, but WCAG 2.2 level AA is the benchmark everyone uses, and it is the one to put in your brief.

The good news is that most of it is plain good practice:

Contrast: normal text needs a contrast ratio of at least 4.5 to 1 against its background, and large text and button outlines 3 to 1. Pale grey on white and white on a light brand colour often fail. The free WebAIM contrast checker will tell you in seconds.
Alt text: describe what an image shows and why it is there, such as "Gas Safe engineer servicing a boiler in a Worthing kitchen", not "IMG_4032.jpg". Purely decorative images should have empty alt text so screen readers skip them.
Real headings: use proper heading tags in order, because screen reader users navigate by them. Making text big and bold is not the same thing.
Keyboard use: you should be able to move through the whole site with the Tab key, see where you are with a visible focus outline, and open menus without a mouse.
Form labels and errors: every field labelled, and errors explained in words rather than only by turning the box red.
Descriptive links: "Read our boiler servicing guide" rather than "Click here".
Video and audio: captions on anything with speech, and nothing that autoplays with sound.
Text resizing: the page should still work when text is enlarged to 200%.
No important information locked in PDFs or images. Price lists and menus should be on the page as text.

Be wary of accessibility "overlay" widgets that promise instant compliance with one line of code. They rarely fix the underlying problems, and many disabled users find them obstructive. Automated checkers such as Lighthouse, WAVE and axe DevTools are worth running, but they only catch a portion of issues, so pair them with a quick manual test: put the mouse aside and try to get to the contact form using only the keyboard.

Content, images and the words on the page

Design and copy are not separate jobs. A beautiful layout filled with "Quality solutions tailored to your needs" still converts badly. Compare that with "Boiler repairs in Worthing, same-day appointments", which tells the right person, in six words, that they are in the right place.

Write in the words your customers use, not industry terms.
Use short paragraphs, clear subheadings and bullet points. Most visitors skim.
Answer real questions on the page: price ranges, timescales, what happens on the day, what you do not cover.
Invest in a half-day photo shoot of your team and work. It is one of the best-value spends in a web project, and real images lift every page they appear on.
Give each service and location page its own useful text. Copying one page and swapping the town name does little for search and looks lazy to visitors.

Settle content before the design is signed off. If a designer lays out pages using placeholder text, the finished layout often breaks when your real words, which are longer or shorter, arrive. Ask for a content plan with deadlines, and agree who is writing what.

Design choices that touch search and the law

Some decisions made during design have lasting effects on how findable and compliant your site is. Your brief should make sure each page has a unique title and description, one clear H1, readable web addresses (/boiler-repair-worthing rather than /page?id=47), HTTPS across the whole site, and structured data for your local business. Your name, address and phone number should match your Google Business Profile exactly.

On the compliance side:

A privacy policy that reflects what the site really collects.
Cookie consent that follows the ICO's guidance under PECR. Analytics and advertising cookies generally need consent before they fire, and rejecting must be as easy as accepting.
For online shops, the total price including VAT and delivery shown before payment, and clear returns information in line with the Consumer Contracts Regulations (including the 14-day cancellation right for most distance sales).

Turning principles into a brief your designer can use

A good brief does not need to be long. One or two pages that answer the right questions will get you better quotes, fewer surprises and a site that reflects how your business actually makes money. Here is a template you can copy into a document today.

A simple brief template

Business goals: what the site must achieve in the next 12 months, with a number if possible (for example, 20 enquiries a month instead of 6).
Audience: who visits, what they want, and what device they are probably holding.
The one main action: call, request a quote, or book. Pick one.
Key pages: usually Home, Services, About, Contact, plus any location or service pages you want to rank.
Competitors you admire: two or three sites, and what you like about each (not just the colours).
Brand assets: logo files, fonts, colours, photography, testimonials and any existing copy.

Here is how a filled-in version might look for a small electrical firm:

Goal: rise from 6 to 20 enquiries a month within 12 months. Audience: homeowners and landlords in Worthing, Littlehampton and Shoreham, mostly on phones, often searching in the evening. Main action: request a quote by phone or form. Pages: Home, Rewiring, Fuse board upgrades, EICR reports for landlords, About, Reviews, Contact. Competitors: two local firms whose price guides and photos we like, and one national brand whose booking form is easy. Assets: logo, NICEIC certificate, 40 job photos, 25 Google reviews, no written copy yet.

That is under 100 words, yet a designer can quote against it, and it already tells them what the site is for. If you cannot fill a line in, that is useful to know before you spend any money.

Add three more lines if you can: a rough budget range (agencies can then propose something realistic instead of guessing), a target launch date and the reason for it, and who in your business will sign off decisions. Projects stall most often because feedback arrives from four people in four directions.

Make the requirements measurable

"Make it look modern" cannot be checked. These can:

Designed mobile-first, tested on real phones.
Passing Core Web Vitals in Google's reports.
Meeting WCAG 2.2 AA for contrast, keyboard use and form labels.
Click-to-call number on every page on mobile.
Google Analytics 4 installed, with form submissions and calls set up as conversions.

You can sharpen each of these further. For speed, ask for a mobile LCP under 2.5 seconds on the homepage and main service pages, with the PageSpeed Insights report supplied at handover. For accessibility, ask for an accessibility check using both automated tools and a keyboard test, and for any known issues to be listed in writing. For tracking, ask for a short test showing that a form submission and a click on the phone number each appear as conversions in GA4. And for images, ask that they are resized and compressed before upload, with alt text written for each.

Putting these in the quote means they are part of the price, not an argument later.

Questions to ask every agency

Ask who owns the site and the domain name once it is built. The answer should be you, in writing. Ask what hosting and support cost per month, what is included, and what a small change costs. Ask whether you can edit text and images yourself without calling anyone.

A few more are worth adding:

Who writes the content, and what happens if mine is late? Does the timeline pause?
How many rounds of design changes are included?
If I leave in three years, do I get a full copy of the site files and database, and is there a fee?
What is the contract length for hosting and support, and what is the notice period?
Are backups taken, how often, and who restores them? Who applies security updates?
If I already have a website, how will you handle the old web addresses so I do not lose my Google rankings?
Can you show me live sites you have built, with their mobile speed results, and put me in touch with a client?

The way they answer matters as much as the answers. A good agency explains things plainly and is happy to be asked. Getting three quotes is sensible, but compare them on what is included, not just the headline price. A cheaper quote that leaves out content, photography, tracking and redirects is often the more expensive project.

Red flags

Be wary of a template site sold as bespoke (ask to see the design process, not just a theme). Be wary of a proposal that never mentions mobile or speed. And walk away from vague promises of "page one of Google"; nobody honest can guarantee a ranking. Even Mailchimp's design principles frame a site as something that must tell your brand's story and reach the right audience, not just look good.

Watch also for:

A custom content system only that agency can work with, which makes leaving expensive.
Hosting or the domain registered in the agency's name rather than yours.
No access to your own analytics, or reports that arrive as a vague PDF with big numbers and no explanation.
A request for the full fee up front, with no staged payments tied to milestones.
No questions about your customers. An agency that does not ask who buys from you is designing for itself.
An accessibility "plugin" offered instead of accessible design.
A price far below everyone else's with no explanation. Something has been left out, usually the thinking.

Launch is the starting line

Agree up front how you will measure results. Google Analytics 4 shows what visitors do, and Search Console shows which searches bring them and flags technical problems. Check both monthly, look at where people drop off, then change one thing at a time: a headline, a button, a slow image.

Before launch day, confirm a few things that are easy to miss and expensive to get wrong:

Redirects: every old page address that had traffic should forward to its closest new equivalent with a permanent (301) redirect. Skip this and years of search visibility can vanish within weeks.
Search visibility: many sites are built on a hidden test copy with "discourage search engines" switched on. If that setting survives into the live site, Google is told to ignore you. Check it on launch day.
Sitemap: submit it in Search Console.
Forms and calls: test every form, and confirm the confirmation emails arrive.
Tracking: check conversions in GA4 with a real test enquiry.
Backups: confirm they are running, and see one restored if you can.
Google Business Profile: update the link to the new site and check that your details match.

After that, set aside 30 minutes a month. Look at which pages bring the most visitors, whether phones convert as well as desktops, and which Search Console queries show lots of impressions but few clicks. Those are pages whose titles and descriptions need work. Give each change a few weeks before you judge it, and be cautious about reading too much into small numbers: going from 3 enquiries to 5 in a week may just be luck.

Five things to check this week

Open your site on your phone and try to call or request a quote in under 10 seconds.
Run your homepage through Google PageSpeed Insights and note the mobile score.
Check you can log in and edit a page, and confirm the domain is registered in your name.
Look for text that is hard to read, buttons that are tiny, or images with no description.
Confirm Analytics and Search Console are installed and that an enquiry is actually being counted.

A few notes on reading the results. If the first check takes longer than 10 seconds, the call button is buried or the form is too long. A mobile PageSpeed result in the red usually points to oversized images or heavy scripts, both of which are fixable. If you cannot log in, or the domain is registered to your old developer, sort that first, because it affects everything else. For the fourth check, squint at the page or view it in bright light, and try pressing Tab repeatedly to see whether you can follow where you are. For the fifth, submit a test enquiry and look for it in GA4's conversion reports the next day.

If more than two of those fail, you already have the start of your brief.

Web Design Principles Every UK Business Owner Should Understand