DEV Community: LeadReef Dev

Build a mobile-first homepage for a local business in one afternoon

LeadReef Dev — Tue, 03 Nov 2026 13:29:31 +0000

Most local business homepages we look at were designed on a 27-inch monitor and then squeezed onto a phone. The hero slider shrinks to a strip, the phone number sits in a footer nobody scrolls to, and the "Book now" button is a 30-pixel link in a hamburger menu.

That is backwards for this kind of site. People find a plumber, a dentist or a nail salon on their phone, usually with a specific job in mind: call, book, or check whether the place is any good. Google also treats the phone version as the real one. Its documentation says plainly that it "uses the mobile version of a site's content, crawled with the smartphone agent, for indexing and ranking."

So here is the template we keep coming back to when we sketch a homepage for a local service business. It is plain HTML and CSS, no framework, and you can get a solid first version done in an afternoon. The examples use a fictional plumbing company so the code has something concrete to hold onto.

The afternoon, roughly

You won't hit these times exactly, but this is the order that keeps you from polishing a footer while the hero is still empty.

Block	Time	What "done" looks like
Content gathering	45 min	Phone, hours, service area, 3 to 5 services, real reviews with permission
Header + hero	45 min	Name, one-line promise, call and book buttons visible without scrolling
Trust + reviews	40 min	Licence/insurance line, 2 or 3 real reviews, link to the full review profile
Services + area	40 min	Short cards, each with a price hint or "from" price if the owner agrees
Footer + sticky bar	30 min	Address, hours, map link, tap-to-call bar on small screens
Performance pass	30 min	Hero image sized, fonts trimmed, Lighthouse run on mobile

The first row is the one people skip. If you start coding before you have the real phone number, the real hours and at least two reviews you are allowed to quote, you end up with lorem ipsum in production. Ask the owner for those first, by text if that is how they like to talk.

Above the fold: four things, nothing else

On a typical phone screen you have room for about four things before the visitor has to scroll. For a local service business we use them like this:

The business name and a call button in the header.
One sentence that says what they do and where. "Emergency plumbing in North Austin, same-day visits" beats "Quality You Can Trust."
A primary action: book online, request a quote, or call. Pick the one the owner actually answers.
A trust signal you can verify: years in business, licence number, or a review count that links to the source.

What we leave out: sliders, autoplay video, a newsletter popup, and a mission statement. None of them help someone with a leaking water heater.

Here is the skeleton:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Harbor Lane Plumbing | Same-day plumbing in North Austin</title>
  <meta name="description" content="Licensed plumbers in North Austin. Same-day visits, upfront pricing. Call 512-555-0142.">
  <link rel="stylesheet" href="/css/site.css">
</head>
<body>
  <header class="top">
    <a class="brand" href="/">Harbor Lane Plumbing</a>
    <a class="btn btn-call" href="tel:+15125550142">Call</a>
  </header>

  <main>
    <section class="hero">
      <h1>Same-day plumbing in North Austin</h1>
      <p>Leaks, water heaters, drains. Licensed, insured, upfront prices.</p>
      <div class="actions">
        <a class="btn btn-primary" href="/book">Book a visit</a>
        <a class="btn btn-ghost" href="tel:+15125550142">512-555-0142</a>
      </div>
      <p class="trust">Licence #M-00000 (example) · Open Mon to Sat, 7am to 7pm</p>
    </section>
    <!-- reviews, services, area, footer -->
  </main>
</body>
</html>

(Harbor Lane Plumbing is a fictional example. The number uses the 555-01xx range reserved for fiction.)

Two details matter more than they look. The viewport meta tag is what stops a phone from rendering the page at desktop width and zooming out. And the tel: link should use the full international format, so it dials correctly no matter how the visible text is formatted.

Tap targets that thumbs can hit

Buttons on these sites are often styled links with 14px text and no padding. web.dev's guidance on tap targets suggests a minimum of "around 48 device independent pixels", spaced about 8 pixels apart. WCAG 2.2 sets a lower floor of 24 by 24 CSS pixels at Level AA. We aim for 48 and treat 24 as the line you never cross.

:root {
  --brand: #0f5c8c;
  --ink: #14212b;
  --bg: #ffffff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body { margin: 0; color: var(--ink); background: var(--bg); line-height: 1.5; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-ghost   { border: 2px solid var(--brand); color: var(--brand); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.actions .btn { flex: 1 1 160px; }

The system font stack is deliberate. Body text in the phone's own font loads instantly and looks native. If the owner insists on a brand font, use it for headings only and load one weight.

The sticky call bar

For trades and emergency services, a bar pinned to the bottom of the screen with "Call" and "Book" gets used. Show it only on narrow screens, and add bottom padding to the page so it never covers the footer.

.callbar { display: none; }

@media (max-width: 640px) {
  .callbar {
    position: fixed;
    inset: auto 0 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: #fff;
    box-shadow: 0 -2px 12px rgb(0 0 0 / .12);
  }
  body { padding-bottom: 80px; }
}

The env(safe-area-inset-bottom) part keeps the buttons above the home indicator on iPhones. For it to return a value, add viewport-fit=cover to the viewport meta tag.

The booking button: link to what they already use

Don't build a booking system. Most local businesses already have something: a scheduling tool, a form that emails the front desk, or a phone. Ask which one actually gets answered, and link the button to that.

If you embed a third-party booking widget, put it on its own /book page rather than the homepage. Those widgets often pull in a lot of JavaScript, and you want the homepage to stay fast.

A plain fallback form is fine too. Keep it short:

<form action="/quote" method="post" class="quote">
  <label>Name <input name="name" autocomplete="name" required></label>
  <label>Phone <input name="phone" type="tel" autocomplete="tel" required></label>
  <label>What's going on?
    <textarea name="issue" rows="3"></textarea>
  </label>
  <button class="btn btn-primary" type="submit">Request a callback</button>
</form>

type="tel" brings up the number pad. autocomplete lets the phone fill in name and number in one tap. Three fields is plenty. Every extra field is one more reason to give up and call a competitor.

Reviews: real, attributed, linked

The reviews block is where homepages get sloppy. A grid of five-star quotes from "John D." with no source reads as invented, even when it isn't.

What we do instead:

Quote 2 or 3 real reviews, with the owner's okay, and show the reviewer's first name and the platform.
Link to the full review profile so visitors can check.
Show the date or at least the year. A glowing review from 2016 is a warning sign, not a selling point.
Skip the star widget scripts. Plain HTML is enough.

<section class="reviews" aria-labelledby="reviews-h">
  <h2 id="reviews-h">What customers say</h2>
  <figure class="review">
    <blockquote>Came out the same afternoon and fixed the leak under our sink. Clear price before starting.</blockquote>
    <figcaption>Maria, March 2026 (example review)</figcaption>
  </figure>
  <a href="#" class="more">Read all reviews</a>
</section>

A side note if you are thinking about adding review markup for search: Google's guidelines say that when a business controls the reviews about itself on its own site, pages using LocalBusiness or Organization structured data are not eligible for star review snippets. Put the reviews on the page for humans and leave the star markup out.

Performance basics that take ten minutes

You don't need a build pipeline for this. Four things cover most of the gain on a page this simple.

Size the hero image properly. Export it at the size it is shown, serve WebP or AVIF with a JPEG fallback, and give it width and height so the browser reserves the space. The hero image is often the Largest Contentful Paint element, and Google's "good" threshold for LCP is 2.5 seconds at the 75th percentile.

<picture>
  <source type="image/avif" srcset="/img/hero-800.avif 800w, /img/hero-1400.avif 1400w">
  <source type="image/webp" srcset="/img/hero-800.webp 800w, /img/hero-1400.webp 1400w">
  <img src="/img/hero-800.jpg" alt="Plumber fixing a pipe under a kitchen sink"
       width="800" height="533" fetchpriority="high">
</picture>

Don't lazy-load the hero. web.dev's advice is direct: "Don't lazy-load images that are likely to be in-viewport when the page loads, especially LCP images." Use loading="lazy" for gallery photos further down, and fetchpriority="high" on the hero, which is supported in current Chrome, Edge, Firefox and Safari.

Load almost no JavaScript. This page does not need any. If you add a cookie banner or analytics, load them with defer and check what they cost in the Network tab.

Test on a real phone. Lighthouse in DevTools is a good start. Then open the page on a mid-range phone over cellular and try to call the business from it. You'd be surprised how often the number turns out not to be tappable.

The handoff checklist

Before sending the link to the owner, we go through this list on an actual phone, not a resized desktop window.

When you send it, keep the message about what the owner cares about, not the tech. Something like:

Here's the new homepage on your phone: [link]. The call button works from anywhere on the page, and "Book a visit" goes straight to your scheduling page. Can you try both and tell me if anything looks off?

That last question matters. Owners often spot a wrong price or an old service area that you'd never catch.

Finding the businesses that need this

The template is the easy part. The harder part is finding owners whose current homepage fails these checks, and the manual way works: search a trade plus a town on Google Maps, open each site on your phone, and note which ones have no tap-to-call, no visible booking option or a page that doesn't fit the screen.

If you'd rather not open forty tabs, LeadReef finds local businesses whose sites are outdated, broken on mobile or missing, shows what's wrong with each one, and helps you draft a first mockup and outreach message. You choose who to contact and send everything yourself. The first 10 leads are free. Full disclosure: we build LeadReef. Everything above works fine without it.

Sources: Google Search Central, Mobile-first indexing best practices; web.dev, Accessible tap targets; W3C, Understanding SC 2.5.8 Target Size (Minimum); web.dev, Defining the Core Web Vitals metrics thresholds; web.dev, Browser-level image lazy loading; web.dev, Optimize resource loading with the Fetch Priority API; Google Search Central, Review snippet guidelines.

How to find local businesses with bad websites (a field guide for freelance web designers)

LeadReef Dev — Mon, 02 Nov 2026 12:55:18 +0000

If you build websites for small businesses, you already know the hardest part of the job isn't the design. It's finding the next client.

Most of us start the same way. Open Google Maps, type "dentist" and the name of a city, click through every listing, open each website, and keep a spreadsheet of the ones that look rough. It works. It's also slow, and after the fortieth tab you stop being able to tell a bad site from an okay one.

We've spent the last year working on exactly this problem, and we've looked at a lot of local business websites along the way. This post is everything we learned about finding the businesses that actually need a new site, figuring out which ones are worth your time, and reaching out without sounding like spam. You can do all of it by hand with a browser and a spreadsheet.

Why "bad website" businesses are the best prospects

There are two kinds of local businesses you can pitch: ones with no website at all, and ones with a website that's hurting them.

Both can work, but the second group is usually easier to sell to. They've already paid for a website once. They already believe a website matters. You don't need to convince them of the idea, only that theirs is costing them customers.

A business with no site at all is a different conversation. Some of them are doing fine on word of mouth and a Facebook page and genuinely don't want one. Others are a great fit, but you'll spend the first call explaining why they need a website before you can talk about yours.

	No website	Bad website
Believes a website matters	Not always	Yes, they paid for one
What you have to prove	Why they need one at all	Why theirs is losing them money
Easy to show the problem	Hard, nothing to point at	Easy, open it on a phone
Typical objection	"We get work from referrals"	"We already have a site"
Best opening	A quick mockup of what they'd get	A side by side of their site and a better version

So most of this guide is about the second group.

What actually counts as a "bad" website

"Bad" is vague, and vague doesn't help you in a cold message. If you tell a plumber his site is ugly, he'll shrug. If you tell him it doesn't load properly on a phone and most of his customers are searching on one, he'll go check.

Here's what we look for. These are the problems a business owner can verify in ten seconds, which is why they make good conversation starters.

It breaks on a phone. This is the big one. Open the site on your phone, not in a resized desktop browser. Do you have to pinch and zoom to read anything? Is the menu a row of tiny links? Do buttons overlap? Local searches happen on phones far more than desktops, so a site that's unusable there is losing calls every day.

It looks like it was built a long time ago. Clip art, tiny fonts, a background texture, a visitor counter, an animated "under construction" banner. You know it when you see it. This one is subjective, so on its own it's a weaker pitch than "it doesn't work on mobile."

There's no way to act. No click-to-call phone number, no booking button, no form, or a contact page that only lists an email. For a service business, the whole point of the site is to turn a visitor into a call. If that path is missing, it's an easy problem to point at.

It shows signs of being abandoned. A copyright year from many years ago, a "latest news" section with one post from 2016, no HTTPS warning in the browser, broken images, links to a Facebook page that no longer exists.

Search engines can't make sense of it. Every page has the same title, or the title is just "Home". The business name and city don't appear anywhere in the text. These don't look dramatic, but they're part of why the site sits on page three.

The domain isn't really a website. A parked page, an expired hosting notice, a builder's "site not published" placeholder, or a domain that just doesn't load. These businesses think they have a website. They don't.

When you write down a lead, write down the specific problem, not just "bad site". You'll need it later for the message, and it's the difference between a pitch that sounds personal and one that sounds copy-pasted.

Where to find them

Google Maps is where everyone starts, which is a good reason not to stop there. Here are the places we've found useful, roughly from most to least obvious.

Where to look	What you find there	Why it's good	Watch out for
Google Maps	Almost every local business, with a website link	Huge volume, reviews tell you how busy they are	Everyone else is looking here too
Google search, pages 2 to 4	Businesses that are online but not ranking	Page 1 is mostly directories and businesses that already invested	Slower to work through
Businesses running ads	Owners currently paying for leads	They already spend on marketing, so a bad landing page hurts them directly	Some send ads to Facebook, not a site
Yelp and industry directories	Trade-specific lists (contractors, salons, clinics)	Good for niching down by trade	Many listings are stale
Instagram and Facebook-only businesses	Active businesses with no real site	Often busy and growing	Some are happy without a site
New business registrations	Companies that just started	Need everything, including a website	Small budgets, slow decisions

Skip page one

This one surprised us. When you search for "roofer" plus a city on Google, the first page is mostly directories, review sites and a handful of businesses that already have decent websites and probably an agency. They are the worst prospects on the page.

The businesses you want are further down, on pages two, three and four. They're real, they're operating, and they're invisible online. That's a problem you can fix for them, and it's a much easier story to tell.

Look at who's running ads

The most underrated signal we've found is simple: is the business currently paying for advertising?

A business that runs ads already believes in marketing and already spends money on it every month. If those ads send people to a slow, broken or outdated page, every click they pay for is partly wasted. That's a concrete, money-shaped problem, and owners understand it immediately.

You can check this by hand. Facebook's Ad Library is public and searchable by business name, and Google shows "Sponsored" labels on local service businesses in many trades. If you see a contractor whose ads are everywhere but whose site looks like it hasn't been touched in a decade, put them at the top of your list.

Use reviews as a busyness meter

Reviews don't tell you whether a site is bad, but they tell you whether the business can afford you. A dentist with 400 reviews and a terrible website is a better lead than one with 6 reviews and the same website. The first one is busy and losing money to the bad site. The second one might just be struggling.

Deciding who to contact first

Once you've collected a list, you'll have more leads than time. You need some way to decide who gets a message today and who waits.

You don't need anything fancy. We'd suggest grading each lead on three things and only reaching out to the ones that score well on all three.

How bad is the site? A site that's broken on a phone or doesn't load at all is a stronger lead than one that just looks a bit dated. Be honest here. "I don't love the colours" isn't a problem the owner will pay to fix.

Can they afford it? Review count, number of locations, whether they run ads, and the type of business all give you a rough idea. A law firm or a roofing company spends more on marketing than a single-chair barbershop.

Can you reach a decision maker? A direct phone number or an owner's name is worth a lot. A generic contact form that goes nowhere is worth much less.

A lead that's high on all three is worth a personalised message today. Medium leads can go into a lighter outreach batch. Low leads are probably not worth your evening.

Reaching out without sounding like spam

This is where most people lose the deal. They do all the research, then send a message that could have been sent to anyone.

Show, don't tell

The single most effective thing you can do is show the owner what their site could look like. It doesn't have to be a finished website. A quick mockup of the homepage with their business name, their real photos and a couple of their actual reviews is enough.

Business owners are busy and they don't think in terms of design. Telling them "your site could be more modern" is abstract. Showing them their own business on a clean, fast page makes it real in about two seconds.

You don't need to spend hours on it. A homepage hero, a services section and a contact block is plenty. If they reply, then you build the rest.

Keep the message short and specific

Here's the shape of a message that tends to work:

Hi Maria, I was looking for a dentist near Oak Park and found your practice. Your reviews are great, but when I opened your site on my phone the menu and booking link were hard to use. I put together a quick idea of how the homepage could look on mobile, using your photos and reviews: [link]. Happy to walk you through it if it's useful. Either way, good luck with the new location.

It mentions something real about them, names one specific problem they can check themselves, shows the mockup, and doesn't push. Compare that with "We are a leading web design agency offering affordable solutions for your business." Nobody replies to that.

Do	Don't
Name one problem they can verify on their own phone	List ten problems in one message
Mention something real (their reviews, their area, their services)	Use "Dear Sir/Madam" or no name at all
Link to a mockup of their own business	Attach a PDF price list
Keep it under 100 words	Explain your whole process
Ask a low-pressure question	Ask for a call in the first message
Follow up once or twice, politely	Send the same message five times

Pick the right channel

Email is the default, and it's fine. But a lot of local business owners live on their phones, and a short text or a message through their Google Business profile can get read faster than an email to an info@ address nobody checks.

Whatever you use, send it yourself and keep the volume sensible. Blasting hundreds of identical emails from a fresh domain is the quickest way to land in spam folders and burn the domain, and it doesn't work anyway. Twenty thoughtful messages beat two hundred generic ones.

Follow up, once or twice

Most replies come after a follow up, not the first message. People see it, mean to answer, and forget. A short note a few days later ("Just bumping this in case it got buried, the mockup link is still live") is completely normal. After two follow ups with no answer, move on.

Doing this every week without burning out

The research part is what wears people down. A realistic weekly routine looks something like this:

Step	What you do	Rough time
Pick a niche and area	One trade, one city or region	5 minutes
Collect leads	Maps, search pages 2 to 4, ad libraries	1 to 2 hours
Check each site on a phone	Note the one main problem	1 to 2 hours
Prioritise	High, medium, low	20 minutes
Make mockups for the top leads	5 to 10 quick homepages	2 to 4 hours
Send messages	Short, personal, one problem each	1 hour
Follow up	From last week's batch	30 minutes

Picking one niche at a time helps more than it seems. After a few dentists you know what a dentist's site needs, your mockups get faster, and you start to sound like someone who understands their business. That's also how you end up with a portfolio that sells the next client for you.

The manual way vs. using a tool

Everything above works with a browser, a spreadsheet and a design tool. Plenty of designers do it that way and do well.

The part that doesn't scale is the checking: opening hundreds of sites, testing each on a phone, noting what's wrong, and then building a mockup for the good ones. That's the part we got tired of, so we built LeadReef to do it. It searches for local businesses, flags the ones with outdated, broken or missing sites, and helps with the mockup and the first message. You still decide who to contact and you send everything yourself. If you want to try it, there's a free plan at leadreef.ai. Full disclosure, it's our product.

But honestly, even if you never use a tool, the process is the same:

Look where other designers don't, like search pages two to four and businesses running ads.
Write down one specific problem per lead.
Prioritise by how bad the site is, whether they can pay, and whether you can reach the owner.
Show them a mockup of their own business.
Keep the message short and follow up once or twice.

If you've got your own tricks for finding clients, I'd really like to hear them in the comments. Especially the weird ones that shouldn't work but do.