Web design and landing pages

Business Landing Page Concept

A business with one main offer and no page that explains it. Traffic arrives on a home page built to describe the company rather than to answer the question the visitor came with.

What it looks like in practice

Someone taps an ad for gutter cleaning while standing in a queue, on a phone, with about eight seconds of patience. They land on a page that opens with twenty years of family history and a photograph of the office. The page is not bad. It is answering a question nobody asked.

How I build it

1. Decide the single action the page exists to produce, usually an enquiry or a booking.
2. Write the hero first: who it is for, what they get, and what to do next, in that order.
3. Lay out proof close to each claim rather than in one block at the bottom.
4. Build the sections mobile first, then widen, because most traffic arrives on a phone.
5. Check the form end to end and confirm the thank-you state actually appears.

What is included

• A hero that states the offer plainly
• Benefits written as outcomes, not features
• A services grid a visitor can scan in seconds
• One clear call to action, repeated at the points where people decide

The five blocks I use, in order

1. Hero. Offer, audience, action.
2. Proof. A review, a client name or a number, immediately under the claim.
3. What you get. Three to five outcomes, not a feature list.
4. How it works. Three steps, so the buyer can picture starting.
5. Ask. A form short enough to finish on a phone.

Where it usually goes wrong

• The hero describes the company rather than the offer
• Proof is collected at the bottom, past the point where people stop scrolling
• The form asks for more than the offer is worth
• The page is signed off by the owner, who is not the buyer

What it is like once it works

The offer is the first thing on the page, the proof sits beside the claim it supports, and the form is short enough to finish one handed. It is not clever. It answers the questions in the order a buyer actually asks them.

You probably need this if: Your home page tries to speak to everyone at once; Ads run to a page nobody designed for those ads.

Website Redesign Structure

A site that looks dated or reads as a list of pages rather than an argument. Usually the content is fine and the order is wrong.

What it looks like in practice

The brief usually arrives as a feeling: the site looks tired. Read it properly and the writing is fine and the photographs are fine. What is wrong is the order. The company history sits where the offer should be, and the one thing that would convince a buyer is four scrolls down under a heading called Our Values.

How I build it

1. Map what is on the page now and what each section is supposed to achieve.
2. Cut anything that does not help a visitor decide, then reorder what is left.
3. Set one visual hierarchy: one heading scale, one accent, consistent spacing.
4. Put the call to action where the decision is made, not only at the bottom.
5. Rebuild section by section so the site stays usable while the work happens.

What is included

• A homepage section plan, in order
• Hierarchy fixes for type, spacing and colour
• Call to action placement
• Places to put proof that are currently empty

A structure change I would usually make

The company story is not removed, it moves. A buyer needs to know what you do and whether it worked for someone like them before they care where you started.

Where it usually goes wrong

• The rebuild starts with a new theme instead of a new order
• Everything is kept, because somebody once asked for all of it
• The call to action appears once, right at the bottom
• Three different heading sizes are doing the same job

What it is like once it works

Same words, same photographs, different sequence, and the page reads like an argument instead of a list. It is also far cheaper than a rebuild, and it tells you honestly whether a rebuild was ever the problem.

You probably need this if: Visitors land and leave without scrolling; You describe the site as tired rather than broken.

GHL Funnel Page Layout

A campaign needs somewhere to send traffic that captures the lead and hands it to follow-up automatically, rather than a contact page that emails an inbox.

What it looks like in practice

A campaign is ready and the only place to send it is the contact page. Enquiries will land in one person's inbox, get answered when that person is free, and sit untouched the week they are on leave. The ad spend does not pause for annual leave.

How I build it

1. Pick the one thing being offered: a guide, a consultation, a webinar seat or a booking.
2. Build the opt-in above the fold, with the shortest form the offer can justify.
3. Add the reason to believe: what happens next, and how quickly.
4. Wire the form to the CRM with tags for source and offer so reporting works later.
5. Set the thank-you state and the first automated message before the page goes live.

What is included

• Lead magnet hero and opt-in
• A benefits section written for one audience
• Thank-you state and first follow-up message
• CRM tagging so the lead is attributable

What the form should and should not ask

Ask: name, email, and one qualifying question you will actually use.

Do not ask: company size, budget, how they heard about you, or anything you can find later. Every extra field costs completions, and you can ask on the call.

Where it usually goes wrong

• Traffic is pointed at the home page because the home page already exists
• The form captures a name and nothing that identifies the campaign
• The thank-you state is built last and skipped first
• The first follow-up message is written after launch, once leads are already waiting

What it is like once it works

A lead fills the form, the CRM already knows which ad and which offer sent them, the first message goes out inside a minute, and whoever picks it up can see the whole story without asking anybody.

You probably need this if: Ads point at a home page; Leads arrive by email and get worked by memory.

Service Page Section Build

One service buried in a list, so nobody can tell whether it is the right fit or what it costs in time and effort.

What it looks like in practice

You can hear this one on sales calls. The same fifteen minutes of explanation, every time, because the page says the service exists but not what it involves, who it suits, or what happens if it goes wrong.

How I build it

1. Name the problem in the buyer's words at the top of the page.
2. Show the shape of the solution before the detail.
3. Set out the process, so the buyer knows what working together looks like.
4. Answer the two or three objections that always come up, in an FAQ.
5. Close with one action and a plain statement of what happens after it.

What is included

• Service introduction that names the problem
• A problem and solution section
• The process, in steps
• FAQ that handles real objections
• A single closing action

The three questions every service page has to answer

1. Is this for a business like mine?
2. What exactly do I get, and what do you need from me?
3. What happens if it does not work out?

If a page answers those three, the enquiry that follows is better qualified and the first call is shorter.

Where it usually goes wrong

• The page lists features and leaves the buyer to work out the benefit
• Objections are avoided rather than answered
• Two or three competing actions sit at the bottom of the page
• The process is described in language only the business uses

What it is like once it works

The call starts at question four instead of question one. People who were never a fit work that out on the page, which is a good outcome for everybody's afternoon.

You probably need this if: You explain the same service on every sales call; Enquiries arrive asking what you actually do.

Portfolio Website Section

Work sitting in a Drive folder or an album, where nobody browses it and nothing can be linked to.

What it looks like in practice

The work is good and it lives in a Drive folder. Every enquiry gets a slightly different selection, chosen from memory, and nothing can be linked to, filtered or found again a month later.

How I build it

1. Group the work the way a buyer thinks, by the job they want done, not by tool.
2. Give every piece the same set of fields so items can be compared.
3. Add filters so a visitor sees only the category they are hiring for.
4. Put the detail behind a click, so the grid stays scannable.
5. Keep images light and lazy loaded, since a gallery is the heaviest part of most sites.

What is included

• Category filters with counts
• A consistent card for every piece
• Detail in a popup rather than a new page
• A responsive grid that holds up on a phone

The fields every item needs

Title, category, one-line description, the tools used, what was delivered, and the scope. The discipline matters more than the design: once every item has the same fields, the grid can be filtered, sorted and compared, and writing the next one takes minutes.

Where it usually goes wrong

• Every item is written differently, so nothing can be compared
• The grid loads full size images and costs a phone half a minute
• Categories are named after tools rather than the job the buyer wants done
• The best piece is somewhere in the middle, with nothing marking it

What it is like once it works

A visitor filters to the one thing they are hiring for, opens two pieces, and closes the tab knowing whether you have done this before. Adding the next piece takes minutes, because the fields were decided once.

You probably need this if: Your work lives in a folder you send as a link; Every enquiry gets a different set of samples.

Mobile-First Section Optimization

A layout designed on a desktop that becomes unreadable on the device most visitors use.

What it looks like in practice

The site was signed off on a large monitor. On a phone the headline breaks across four lines, two buttons sit a thumb width apart, and the table that looked neat in the design scrolls off the side of the screen. Most of the traffic sees this version.

How I build it

1. Start at the narrowest width and make it work there first.
2. Set spacing and type on a scale, so sections do not each invent their own.
3. Make touch targets big enough to hit without zooming.
4. Decide what stacks, what hides and what scrolls sideways.
5. Test on a real phone, not only in a browser simulator.

What is included

• Responsive spacing rules
• Readable text sizes at every width
• Touch-friendly calls to action
• A stacking order that keeps meaning

What I check on every page

• No horizontal scrolling at 390px wide
• Body text no smaller than 16px, so phones do not zoom on form fields
• Tap targets at least 44px
• The main action visible without hunting
• Images sized and lazy loaded so the page does not jump while it loads

Where it usually goes wrong

• The layout is designed at desktop width and squeezed afterwards
• Tap targets sit close enough together to be hit by accident
• Text is set small so a section looks tidy in a mockup
• Nobody tests with one hand, which is how phones are actually held

What it is like once it works

The phone version is the version that was designed and the desktop one is the adaptation. Headings fit, buttons are far enough apart to hit, and nothing needs pinching.

You probably need this if: Your analytics show phone traffic and desktop conversions; You pinch to zoom on your own site.

Website Audit & Improvement Plan

A site that underperforms, where a rebuild is being considered before anyone has established what is actually wrong.

What it looks like in practice

Somebody has quoted for a redesign and nobody can say what is actually wrong. Traffic is steady. Enquiries are not. A rebuild might fix it, or it might move the same problems onto a nicer template at considerable expense.

How I build it

1. Walk the site as a buyer would, on a phone, and write down where it stalls.
2. Check the mechanics: speed, broken links, forms, tracking, titles and headings.
3. Separate what is costing enquiries now from what is cosmetic.
4. Put the findings in priority order with the effort each one takes.
5. Recommend the smallest set of changes that would make a measurable difference.

What is included

• Observations page by page
• Call to action recommendations
• Mobile-specific notes
• A priority list with effort against each item

How I order the findings

1. Broken. Forms that fail, links that 404, tracking that never fired.
2. Costing enquiries. Buried calls to action, no proof, unclear offer.
3. Worth doing. Structure, speed, content gaps.
4. Cosmetic. Everything people usually start with.

Most sites do not need a rebuild. They need the first two groups fixed.

Where it usually goes wrong

• The audit lists sixty small things and no order to do them in
• Speed gets measured and the message does not
• Findings are delivered as a score rather than a decision
• Nothing is written down, so the same issues return next year

What it is like once it works

A short list, ordered by what each fix costs against what it is likely to change, so the first three can be done this week and the case for a rebuild is either made on evidence or quietly dropped.

You probably need this if: Traffic is steady and enquiries are not; Someone has quoted you for a redesign and you are unsure why.