Website cheat sheet

This is everything I went through on the CSS Signs site, written as a checklist so you can run it yourself on any site you build. It takes about 20 minutes with a phone in your hand, and honestly, if you get the first two sections right, you're already ahead of most small business websites out there.

1. Before you design anything

Most weak sites are weak before the first line of code, because the facts and the message weren't sorted first.

• Write one sentence: what they do, for whom, and where."Signs, vehicle wraps and print for businesses around Statesville, NC." If you can't write it, the homepage can't say it.
• Pick the one thing you want a visitor to do.For a local trade it's nearly always "call" or "ask for a quote". Everything on the page should push towards that.
• Collect the real material first.Phone, email, address, hours, real project photos, real reviews with names, the full list of services. Build with real content, never placeholder text.
• Check the facts match everywhere.Compare their own site, Google Business Profile and directory listings. On CSS Signs the phone number and opening hours didn't match, and that costs calls.

2. The first-screen test

Most of the time people spend on a page is on the first screen, so cover everything below it and check this.

• A stranger can say what the business does and where.No slogans that could belong to anyone, like "Be seen. Be remembered."
• There's one main button, and it says what happens."Get a free quote", not "Learn more" or "Get started". Two buttons at most, and the second one quieter.
• The phone number is visible and tappable.Use a tel: link so it rings straight from a phone.
• There's proof near the claim.A real review or a real photo of their work, right there, not three screens down.

3. Clarity

• Every service they actually sell is on the page.CSS Signs does printing, apparel and logo design too, and none of it was there.
• Rank the services.Give the two things most customers come for the space, and list the rest underneath. Eight equal boxes tell the visitor nothing about what matters.
• Headings make sense read on their own.Read just the headings top to bottom. If that tells the story, people who skim will get it too.
• Plain words.Write the way the customer talks. "Vehicle wraps", not "mobile brand activation".

4. Trust

• Real photos of real work, with the client's name.For a sign company these are the most valuable thing on the site. Retouching the light is fine, changing the sign is not.
• Real reviews, word for word, with a name.Don't tidy the grammar and don't add star ratings the review didn't have.
• No made-up numbers."500+ happy customers" with nothing behind it hurts more than it helps. Use a number only if you can back it up.
• Be honest about AI images.If you use them to show a type of service, say so once in the footer, and never use one to show the business itself.
• Who they are.The owner's name, how long they've been going and a photo of the team or the shop are strong proof for a local trade.

5. Action

• Phone number in the header, the hero and the contact section.On phones, a bar that stays at the bottom with Call and Quote works really well.
• The form actually sends.The simplest options for a static site are Formspree, Web3Forms or Netlify Forms, and set up an automatic reply so the customer knows it arrived.
• Only ask for what you need.Name, phone, what they're after and a line about the job. Email can be optional.
• Labels sit above the fields.Never use the placeholder as the label, because it disappears the moment someone starts typing.
• Errors say how to fix it."Please add a phone number so we can call you back", not "Invalid input".

6. Experience

• Test it on your actual phone.Then in Chrome, right-click, Inspect and the phone icon, and drag the width slowly from wide to 320px. Nothing should scroll sideways and the header should never wrap onto two lines.
• Body text at least 16px, and lines not too long.Roughly 45 to 75 characters a line is comfortable to read. On wide screens, cap paragraph width.
• Contrast passes.Body text needs 4.5:1 against its background, and big headings 3:1. Check with the WebAIM contrast checker. Light grey on cream is the most common failure.
• Tap targets are big enough.Buttons and links at least 44px tall on a phone, with space between them.
• Every image has alt text that describes it."Red Vesuvio's lettering above a restaurant entrance", not "image1".
• No broken or local links.Anything pointing at 127.0.0.1 or localhost only works on your computer. Click every link on the live site.
• Each photo used once.Repeats make it look like there's not much work to show.
• It loads fast.Convert photos to WebP (Squoosh does it free), then run Google PageSpeed Insights and aim for the main image loading in under 2.5 seconds on mobile.

7. Things that make a site look AI-made

None of these is wrong on its own, but together they make a site look generated rather than made for this business, so take them out unless there's a reason.

• Small capital labels above every heading."WHAT WE MAKE" over "Every sign your business needs". One heading is enough.
• Glow effects, gradients behind text and neon accents.Use one colour to point at the next step, and keep the rest calm.
• Everything fading in as you scroll.It adds nothing and slows people down. Movement should only show something has changed.
• Rows of identical cards with icons.Rank the content instead, and let the important thing be bigger.
• Pill-shaped buttons, heavy shadows and rounded corners on everything.Pick one corner style that suits the business and use it everywhere.
• Everything centred.Left-align anything longer than one line.
• Stock or AI pictures that show nothing specific.A real photo of the real thing, or no photo.

8. Local business extras

• Page title with what and where."CSS Signs | Signs, vehicle wraps and print in Statesville, NC", under about 65 characters.
• A meta description that reads like a sentence to a customer.It's what Google shows under the title.
• Name, address and phone identical everywhere.Site, Google Business Profile, Facebook and directories.
• A share image and a favicon.1200 by 630 pixels for the share image, so links look right when sent by text or posted.
• Service areas named in plain text."We work across Statesville, Mooresville, Hickory…" helps both people and search.

9. Free tools I'd use

• Google PageSpeed Insights for speed and the main accessibility checks.
• WebAIM contrast checker for text colours.
• WAVE for missing alt text, labels and heading order.
• Squoosh to shrink photos to WebP.
• Chrome's device toolbar (right-click, Inspect, phone icon) for testing every width.

10. Get an AI to review it with you

If you're building with Claude, ChatGPT or Cursor, paste this in with your site's link or code, and then go through its answers yourself rather than applying everything blindly.

Review this small business website as a strict website clinic reviewer.
Business: [name], [what they do], [town]. Main action I want: [call / quote].

1. First screen only: can a stranger tell what they do, where, and what to press?
2. Clarity, Trust, Action, Experience: for each, say what already works,
   then give ONE concrete change, quoting the exact text or element.
3. List any facts (phone, hours, address, claims) that can't be backed up.
4. Flag any of these: small caps labels over headings, glow or gradient
   effects, fade-in on scroll, rows of identical cards, pill buttons,
   centred paragraphs, generic stock or AI images, "Learn more" buttons.
5. Check: contrast 4.5:1 for body text, body text 16px or more, tap targets
   44px on mobile, no sideways scroll at 320px, alt text on every image.
Don't rewrite the whole site. Keep it to changes I can make today.

11. Using the code from this repo

The whole rebuild is one HTML file with the CSS inside it and no build step, so you can open index.html in a browser and edit it directly. Swap in the client's facts, connect the form, replace the service photos with their own work as they send it, and deploy the folder to Vercel or Netlify. The README in the repo walks through it step by step.

Made by Daniel Wright for the NavAIgate website clinic. Checks are based on WCAG 2.2 and common craft practice.