How to choose and edit a website template for a small business (without breaking it)

Dowel Pages — Thu, 29 Oct 2026 12:09:59 GMT

Most small business websites fail in the same boring ways: the phone number is hard to find on a phone, the page doesn't say what area they cover, and the "template look" is obvious because the layout was made for a SaaS startup. If you're building a site for a local business (yours, a friend's, or a client's), here is the checklist we use to pick a template and then edit it without wrecking it.

1. Pick by the customer's first question, not by the hero image

Before looking at templates, write down the first question a customer has when they land on the page:

Plumber: Are you open right now, and do you come to my area?
Dentist: Do you take my insurance?
Café: What's on today, and when do you close?
Cleaner: Roughly how much will it cost?
Barber: How long is the wait?

A good template answers that question in the first screen on a phone. If the template's first screen is a giant photo and a vague tagline, you'll spend hours fighting it.

2. Check the mobile version first

Open the demo on your phone (or DevTools at 375px wide) and check:

Is there a tap-to-call link () that's visible without scrolling, or a sticky call/book bar?

Can you read body text without zooming (16px minimum)?

Do buttons have at least ~44px of tap area?

Does anything scroll sideways? (Usually a fixed-width image or table.)

Local business traffic is mostly mobile. A template that's only beautiful on a 27-inch monitor is the wrong template.

3. Prefer plain HTML/CSS for a one-page site

For a single page with services, prices, hours and a contact form, you don't need a framework or a build step. Plain HTML/CSS/JS means:

you can edit it in any text editor,
hosting is free on Cloudflare Pages, Netlify or GitHub Pages (drag and drop the folder),
nothing breaks in two years because a dependency changed.

Check the template's source: if editing the phone number means touching five files and running npm install, it's not a small business template.

4. Look for design tokens before you change colours

Well-built templates put colours and fonts in CSS custom properties at the top of the stylesheet:

:root {
  --ink: #1b1a17;
  --paper: #eee8dd;
  --accent: #a4442a;
  --font-display: "Fraunces", serif;
  --font-body: "Inter", sans-serif;
}

Change the brand there, not by hunting hex codes across the file. After changing the accent colour, check contrast for text on that colour (WebAIM's contrast checker is fine); 4.5:1 for normal text.

5. Edit in this order

Business facts: name, phone, email, address, service area, hours. Search the HTML for every placeholder so none survive (grep -n "555" index.html is a good start).
Services and prices: real ones. "From $X" is better than "Contact for pricing" if the business can live with it.
Photos: real photos of the work beat stock photos every time. Compress them (Squoosh, WebP, ~200 KB max) and always set width and height to avoid layout shift.
Meta tags: </code>, <code><meta name="description"></code>, Open Graph image. This is what shows in Google and in WhatsApp/Messages link previews.</li> <li><strong>Local SEO basics:</strong> a <code>LocalBusiness</code> JSON-LD block with name, address, phone and opening hours, and the same name/address/phone as the Google Business Profile.</li> <li><strong>The form:</strong> make sure it actually sends somewhere (Formspree, Netlify Forms, a mailto fallback). Test it from your phone.</li> </ol> <h2>6. Don't break the parts that make it feel finished</h2> <ul> <li>If the template animates sections on scroll, keep the <code>prefers-reduced-motion</code> check. Some visitors get motion sickness.</li> <li>Keep <code>alt</code> text on images and update it to describe the new photos.</li> <li>Don't delete the <code><label></code>s on the form fields to make it "cleaner"; screen readers need them.</li> <li>Run Lighthouse once at the end. Aim for green on Performance and Accessibility; it's usually images that drag it down.</li> </ul> <h2>7. Launch checklist</h2> <ul> <li><input disabled type="checkbox" /> Phone number tappable on mobile</li> <li><input disabled type="checkbox" /> Hours and service area visible on the first screen or one scroll down</li> <li><input disabled type="checkbox" /> Every placeholder replaced (search for "Lorem", "555", "example.com")</li> <li><input disabled type="checkbox" /> Form tested end to end</li> <li><input disabled type="checkbox" /> Title, description and share image set</li> <li><input disabled type="checkbox" /> Custom domain connected and HTTPS on</li> <li><input disabled type="checkbox" /> Google Business Profile links to the site</li> </ul> <p>That's it. A one-page site that answers the first question fast, loads quickly on a phone and has real details will do more for a local business than a ten-page site nobody updates.</p> <hr /> <p><em>We make one-page HTML templates built around single trades (plumbers, dentists, cafés, barbers and more). If you want to see the ideas above applied, the demos are here: <a href="https://dowelpages.pages.dev/?utm_source=hashnode&utm_medium=social&utm_campaign=article-choose-template">https://dowelpages.pages.dev/?utm_source=hashnode&utm_medium=social&utm_campaign=article-choose-template</a></em></p> </article> </main></body></html>