Sandline Back to the page

Build guide · site 460

How the Sandline Dust Management page was built

Sandline is a fictional Baldivis business writing dust management plans and running site inspections across Perth’s southern and eastern growth corridors. The page is for a project manager, civil contractor or builder with a start date and a council condition, or a neighbour’s complaint already on file. Its single job: price the plan and the inspections honestly, show the date the plan should be lodged, and book a site look.

Why this converts

One booking action, “Book a site look”, repeats in the masthead, under the headline, inside the council card, at the form and on a sticky phone bar beside a call button, so a site office on a phone is never more than a thumb away from it.

The estimate answers the two questions a project manager actually has — what will this cost for my stage, and when does the plan have to be in — and it prints the answer beside a drawing of their own site, not a generic illustration.

Right next to the package price it prints the plan-only price and says plainly why that isn’t a substitute, which makes the dearer number read as a model rather than a pitch.

A full-size card then tells the reader to ask their council first and read the free guideline, quoting the City of Armadale word for word, because a business that sends you to the regulator before it takes your money is one you believe.

The form asks only for what prices a plan (lots or hectares, start date, council) plus a name and a number, so the call back is a booking rather than a discovery call.

Palette

Argued from the Swan Coastal Plain sand the service exists to keep on site, and the water that does it. Every text pairing comes from the wave’s contrast sweep; the four builder-minted grounds were measured by the page’s own check script.

#F3F2EE bgDry-sand paper. Ink on it 15.52:1.

#FFFFFF surfaceCards, the form, the map land.

#1C1A15 inkBody and headings, 17.38:1 on surface.

#544F45 mutedSecondary copy, 7.26:1 on bg.

#7C4A03 primaryCoastal-plain sand, deepened until white text on it reaches 7.40:1. The CTA and the fence line.

#1D5F8A accentWater-cart blue: the cart loop, the monitors, the council card rule.

#2B2418 bandFooter and this panel, with #F4EFE6 at 13.40:1.

#EADFC8 block sandMinted for the site plan. Ink 13.15:1; fence 5.60:1; cart loop 5.20:1.

#DDE8EF oceanMinted for the map. The accent label on it 5.52:1.

Type

$9,760 · Lodge by

Barlow Semi Condensed 600/700. Site-signage condensed: big figures and long headlines stay on one line in a narrow card, and it reads like the lettering on a hoarding.

Plan, 16 weekly inspections

Public Sans 400/500. A plain, government-document workhorse with tabular figures, so line items to the cent align in the ledger.

Techniques

The proof element is one pure function — plan $1,200 + $100 a hectare, inspections at $190 weekly in the dry months and every second week otherwise, a monitor at $320 a week when homes are within 100 m, total rounded once to $10 — plus a UTC date subtraction for the lodge-by date. A Node script lifts that function straight out of the page and checks the three worked examples ($9,760, $2,110, $15,660), the $1,250 plan-only floor that matches the services grid, the $1,630–$29,720 range, and monotonicity across all 7,840 reachable settings.

The site plan is an inline SVG rebuilt from the inputs on every change. The block is schematic, not to scale: its width grows with the square root of the area, a lot grid either side of a road spine gets denser as it grows, the shade-cloth fence is a dashed path offset outside the boundary, and the water-cart loop is a rounded rectangle inside it. The homes’ edge carries a hatched 100 m band; switching neighbours off swaps the houses for scrub and removes the two monitor pins. A timeline underneath runs from the lodge-by flag to the start and plots one dot per inspection, so weekly against fortnightly is visible rather than described.

Motion is one wall-clock lap of the water cart along the loop, measured with performance.now(), paused while the tab is hidden, skipped under reduced motion, and parked at the same point every time, so the thumbnail is at rest well before seven seconds. The service-area map is hand-projected from real coordinates (longitude scaled by the latitude’s cosine) with the coast, the Swan, the Peel Inlet and the Darling Scarp drawn as simple paths.

State probe: window.__dustcontrol exposes the inputs, every derived figure, planOnly, isSubstitute:false with its reason, the lodge-by date and its source, the drawing counts and the form state.

Conversion decisions

What the page quotes, and what it declined to publish

The City of Armadale’s sentences on dust management plans are quoted word for word from its building, development and construction site management page, attributed by name and linked. The 14-day lead time is always presented as Armadale’s, never as a rule for other councils. The DWER guideline is linked, and its four site classifications and the dry-period rule are named without the page computing a class for anyone.

Not published, because they could not be verified for this page: whether any other council requires a plan or sets a lead time, any council application fee or penalty, air-quality limits or monitoring standards, water-cart or hydromulch market rates, and lot-approval statistics. Every price on the page is the fictional business’s own.

Local SEO we’d implement for the real business

The live page carries only a WebPage schema naming it a demonstration. For the real business we would ship structured data like this, filled from their verified details and their real review feed:

{
  "@context": "https://schema.org",
  "@type": "ProfessionalService",
  "name": "Sandline Dust Management",
  "areaServed": ["Baldivis", "Wellard", "Byford", "Armadale",
                 "Piara Waters", "Treeby", "Mandurah", "Yanchep"],
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Unit 0, 00 Example Street",
    "addressLocality": "Baldivis",
    "addressRegion": "WA",
    "postalCode": "6171",
    "addressCountry": "AU"
  },
  "telephone": "+61-8-9000-0000",
  "openingHours": "Mo-Fr 06:30-16:30",
  "makesOffer": [
    { "@type": "Offer", "name": "Dust management plan",
      "priceSpecification": { "@type": "PriceSpecification",
        "minPrice": 1250, "priceCurrency": "AUD" } },
    { "@type": "Offer", "name": "Site inspection",
      "price": 190, "priceCurrency": "AUD" }
  ],
  "aggregateRating": { "@type": "AggregateRating",
    "ratingValue": "0.0", "reviewCount": "0" }
}

Alongside it: a Google Business Profile in the Baldivis service-area format, one suburb page per corridor only where there is real work to show, and the council-lead-time FAQ marked up once each council’s wording has been checked.

What would change for the real client

Iteration log

Pass 1 · Craft

  • Caught before first render: the fence path used a CSS draw-on dash array, which would have replaced its own 7/4 shade-cloth dash with a solid line once the animation ended. Replaced with a fade.
  • At 375 the masthead’s “Book a site look” button and the brand’s sub-label each wrapped to two lines. Both set to no-wrap, with a tighter gap.
  • The left monitor pin sat on the edge of the “Homes” label box. Pins now sit in the gap after the first house and at the far corner of the homes’ edge, at every site size.
  • Map: the Darling Scarp label collided with Armadale and the corridor label ran through the Baldivis marker. Both moved, and map labels go to 17 units on phones.
  • Phone card: the header wrapped to three lines, the “Not a substitute” tag broke in two, and the lodge-by note was squeezed into a narrow column. The header now wraps under the title, the tag stays on one line and the lodge row stacks below 520 px.
  • The trust line broke inside the reference number; the services price line gained a separator.
  • Driven: 4 ha, 16 weeks, dry months, homes → $9,760 with $1,600 plan only; 1.5 ha, 8 weeks, winter, no homes → $2,110; 12 ha, 26 weeks → $15,660; extremes $1,630 and $29,720; start Mon 12 Oct 2026 → lodge by Mon 28 Sep 2026. Empty form → six field errors; filled → confirmation.

Pass 2 · Depth

  • Added three worked-example chips; the pressed chip follows the sliders and clears when you move off an example.
  • Picking a chip sends the water cart round one 1.8-second lap on the wall clock, parking at the same point, so the site visibly “runs” for the new job.
  • Second read: the sea-breeze arrow comes from the south-west, the homes sit on the north edge downwind of it, and the monitors are on that edge. The legend now says “Dust monitor, homes’ side”.
  • Plan labels raised to 17 units on phones, with the band label shortened to “Homes / 100 m” and the timeline to “16 weekly visits · 16 wk”, so nothing collides even at four weeks.
  • Found by driving it: during a chip lap the probe still said settled:true, because the estimate published its state before the lap cleared the flag. The lap now republishes.
  • Driven: each chip to its total, neighbours on at 1.5 ha, 8 weeks → $4,670 with two pins and four houses; dry months on → eight dots, $5,430.

Pass 3 · Hardening

  • Sliders announce “4 hectares” and “16 weeks” via aria-valuetext. The toggles keep a visible focus ring on the switch.
  • Turning reduced motion on mid-lap now settles the cart at once, not only at load. A hidden tab for 5.5 seconds mid-lap leaves the cart where it was, and the lap finishes after the tab returns.
  • A start date outside 2026–2030 is ignored by the estimate, which keeps the last valid date, and rejected by the form.
  • Every breakpoint rule was checked by computed style rather than by eye: plan labels 13 px at 1200 and 17 px at 375, the lodge row a single column on phones, the proof card in grid column 2 at 1200.
  • Removed one ornament: the six line icons on the service tiles. The price line already does the work, and the grid reads calmer without them.
  • Honesty scan across both pages: no street address in prose, no curly quotes in attributes, only WebPage JSON-LD, the reserved phone pattern, and every dollar figure on the page from the licensed set.