The concept
A homeowner with a driveway and no gate has exactly one question — what does an automatic gate cost — and every gate company in Perth answers it with “we’d have to come and look”. That is not a lie; it is just an answer that costs the buyer three phone calls and a fortnight before they find out whether it is a job they can afford at all.
This page answers it in the hero with a three-control estimate, and then names the practice it is breaking in the first hero point: we still come and look — here is the number first. The measure is still the conversion; the price is what earns the measure.
The buyer is a homeowner on a detached block, plus strata managers and small industrial yards around Malaga. On a phone the call button leads and the sticky bar is call-first; on a desktop the estimate sits beside the headline and the form leads.
Why this converts
The call button is the first thing under the headline because a homeowner reading this at nine at night wants a number and a person, in that order, and a form is a worse experience for both — so the form is the fallback and the phone is the funnel. The estimate sits beside the headline rather than three screens down, which means the answer to “what does this cost” is visible before the visitor has decided whether to keep reading, and it is a real installed figure rather than a range with an asterisk. The form asks for seven things and no more — name, phone, suburb, what the job is, the clear opening, whether the piers are built, and whether there is power at the gate — because those are exactly the fields that decide whether the measure is twenty minutes or a re-quote, and the opening is marked optional so somebody who has not got a tape out can still book. The trust strip is three sentences a competitor cannot copy without changing how they operate: we publish the price, our own auto-electrician is on the job, and we do not build the piers — that last one is a refusal, and a page that tells you what it will not do is the one you believe about what it will. And the estimate argues against its own dearer product: a sliding gate costs more than a double swing at every width and every package, the page says so in the result card with the exact gap, and a buyer who reads a quoting tool talking them out of the expensive option stops treating it as a sales page and starts treating it as a price list.
The proof element — the gate estimate
Three controls, one card: the drive (double swing or sliding), the clear opening (3.0, 3.6, 4.5 or 6.0 metres), and the entry package (remote only, remote plus keypad, or remote plus keypad plus video intercom). It answers with one figure — supplied, installed, wired and commissioned — and the three line items behind it.
Why three controls and not seven
A gate quote really has about a dozen variables: leaf material, infill, powdercoat colour, operator brand, underground versus ram, loop detectors, intercom handset count, and so on. Nearly all of them are decisions the customer has not made yet and cannot make from a web page, and every one you add is another thing to get wrong before the measure. Three controls were chosen because they are the only three a homeowner can answer from their own driveway with a tape measure, and between them they move the price by more than $7,000 — from $6,700 to $13,830. Anything finer is precision the page has not earned, and a seven-control configurator that lands on the same number reads as a form, not an answer.
Why the retrofit line is deliberately outside the estimate
Automating a gate that already hangs is the cheapest thing this business does — from $1,450 — and it is the single most tempting figure to fold into the calculator, because it makes the cheapest cell look dramatically cheaper. It is kept out on purpose. A retrofit is priced by what is already on the site: whether the gate hangs true, whether it drags at the latch, whether the posts will take an operator. There is no honest arithmetic from clear opening to retrofit price, so the page states it as a separate anchor with the condition attached (“the test is whether it swings or rolls freely by hand right now”) rather than pretending the estimate can price it. The estimate’s floor therefore equals the services-grid floor exactly: $6,700, a 3.0 m double swing on remote only.
The arithmetic
A per-metre leaf rate plus a fixed install base that differs by drive, plus the entry package. Rates are held in dollars per tenth of a metre as integers, so 1250 × 3.6 is computed as 125 × 36 and no cell can drift by a floating-point cent. Twenty-four cells, checked by a node script before a line of the page was written.
| Clear opening | Double swing | Sliding | Sliding costs |
|---|---|---|---|
| 3.0 m | $6,700 | $8,000 | +$1,300 |
| 3.6 m | $7,450 | $8,870 | +$1,420 |
| 4.5 m | $8,575 | $10,175 | +$1,600 |
| 6.0 m | $10,450 | $12,350 | +$1,900 |
Those are remote-only figures; add $520 for the keypad or $1,480 for the video intercom and every row moves by the same amount. The rest state — the state the page loads in and the state the preview thumbnail captures — is a double swing on a 3.6 m opening with remote and keypad: $4,500 + $2,950 + $520 = $7,970. The cheapest cell on the domain is $6,700 and the dearest is $13,830, both found by sweeping the twenty-four cells rather than by asserting a hand-picked vector.
Three things the page states because they were swept, not asserted
A sliding gate costs more at every width and every package. All twenty-four cells were compared drive-for-drive: the gap runs from $1,300 at 3 m to $1,900 at 6 m and never once falls to zero or reverses. The result card prints the other drive’s figure and the exact gap at whatever you have selected, and the sentence underneath tells the reader to take the swing if two leaves have room to open inward. That sentence costs the seller money on every job where the customer had already decided on a slider.
The entry package is price-neutral to the gate. Adding the keypad costs $520 and the intercom $1,480 whether it goes on a 3 m swing or a 6 m slider — proven on all twenty-four vectors, zero movement. So the page says plainly: decide the gate and the entry separately, neither one drags the other up. That is a different fact from “the package is a flat fee”: it means the customer can pick the intercom without being upsold a bigger gate to carry it.
The price only ever rises with the opening. Monotonic across both drives and all three packages. A quote that falls as the job gets bigger does not read as rounding to a customer; it reads as a made-up number.
The drawn subject
An elevation of the driveway opening, drawn in SVG and redrawn on every change: the boundary fence, two brick piers with their capping course, the gate leaves in vertical slats with a capping rail and a meeting stile, an amber warning lamp on the leaf, and a photoelectric safety beam across the driveway with a head at the base of each pier. The opening scales off one number — 75 units to the metre — so at 6.0 m the drawing uses 510 of the 560-unit frame and at 3.0 m it uses 285. There is no view-fit rule anywhere in the range, which means the dimension above the gate is honest at every width: the 6.0 m opening really is drawn twice the 3.0 m one.
Switching to sliding removes the second leaf, removes the hinge knuckles from both piers, draws one leaf across the whole opening, and lays a ground track that runs on past the right-hand pier and off the frame — because that is the constraint. The dimension sits above the elevation the way a set-out sheet reads, which leaves the driveway band carrying only the beam and the swept ground.
Second read. Under a double swing, two dashed arcs are drawn on the driveway showing the ground each leaf sweeps as it opens inward. Their radius is the leaf length exactly; only the vertical foreshortening is a drawing convention, and it is capped so the sweep never runs into the note. Below the drawing, a two-line strip states the two things the estimate cannot price — the room the drive needs and who builds the piers. For a swing it prints the exact half-width (“about 1.8 m of clear ground behind each pier”); for a slider it prints no figure at all, because the honest answer is “a clear fence line a bit longer than the opening” and inventing a multiplier for that would be publishing a number the model does not hold.
What this page declined to publish
Everything below was considered and left off both pages. In each case the page states the mechanism instead — what happens, who does it, and what we set on the day — and stops before the figure.
- Any clause, figure or requirement from a gate or automation safety standard. Not a force limit, not a closing speed, not a gap dimension, not a clause number, not a standard number. The FAQ on safety says what we actually do — fit a photoelectric beam, set the operator’s force and travel limits at commissioning so the leaf stops and reverses, walk the owner through the manual release — and then says plainly that we will not call a gate child-safe. A page that named a standard it could not verify would be worse than one that named none.
- Any local-government crossover, verge or driveway rule, and any setback or permit requirement for a gate or a pier. These vary by council and we could not verify a single one, so the page says the piers are the customer’s bricklayer’s work and that we supply the set-out, and leaves the approvals question where it belongs.
- Any electrical regulation, licence-class or wiring-rule figure. The footer carries an electrical contractor number in a visibly patterned placeholder form and nothing else. The page says our own auto-electrician runs the power, in conduit, quoted before we start — a description of practice, not a claim about a scheme.
- Any figure for the power run itself. The distance from the board to the gate is the entire cost of it and the page does not know it, so it is named as a separate quoted line rather than given a from-price that would be wrong on most jobs.
- Any brand, model or warranty term for the operators or the controller. Naming a real manufacturer’s product on a fictional business’s page would be borrowing somebody’s reputation.
- Any battery runtime in hours. The battery backup is $340 and the page says “roughly a day of normal opening and closing”, which is a description a customer can hold us to, rather than a figure that depends on the gate, the leaf weight and how many times a day it cycles.
What is published is the fictional operator’s own commercial rates and nothing else: the twenty-four-cell installed price, the two entry packages, the $1,450 retrofit, the $260 service call, the $95 spare remote, the $340 battery backup and the $0 measure. That is the whole of it.
Palette
Limestone driveway, charcoal powdercoat and amber safety signal — the three things actually on a Perth gate site, and deliberately not the black-and-silver every security-products site defaults to. Every hex and every ratio below is quoted from the same row of the same contrast run, taken after the last palette change. 192 declared pairs across the wave, zero failures. No colour was minted during this build, which is the point of a sweep that already carries the scene fills.
Amber is two tokens and they do not swap. No single amber clears 3:1 on both a light and a dark ground here, so the palette carries a dark one for type and marks on paper and panel, and a bright one for marks on the band and on the gate slat. Getting them the wrong way round is invisible to every state assertion and obvious in a screenshot, so the rule is written at the top of the stylesheet rather than kept in the builder’s head.
Type
Archivo 600/700 carries the headings, the price figures and the chip labels — plated, slightly condensed, and it holds its shape at the 62px the installed price runs at. IBM Plex Sans 400/500 does the body at 17px on a phone. Plex was drawn for engineering documentation and this is an access-control page: the body copy is full of dimensions, part names and conditions, and Plex sets that kind of sentence without the friendliness that would undercut it.
The one typographic move is the pairing the concept asked for: the installed price set larger than anything else on the page, with “supplied, installed and commissioned” sitting directly under it at body size. The figure alone is a number; the figure with that line under it is a scope of works, and the whole argument of the page is that the two arrive together. The control vector then sits under both at 14px in muted, so the reading order is price, what it includes, what it is for.
Technique
One file, all CSS and JS inline, no libraries, no raster images, about 86 KB. Every visual is drawn: the driveway elevation, the service-area map, the phone icon, the favicon.
The layout
DOM order is the mandated mobile stack — masthead, hero, services grid, estimate. At 960px and up a single CSS grid with named areas moves the estimate into the hero’s second column and drops the services grid underneath, without moving one element in the markup. That keeps the reading order honest for a screen reader and puts the drawn gate and the installed price, rather than a menu of tiles, inside the preview thumbnail.
The animation
The drawing rises into place once on load, driven by performance.now() wall-clock deltas rather than a per-frame accumulator, and pauses if the tab is hidden. That distinction matters more than it sounds: a per-frame delta in a headless renderer advances only as fast as frames are requested, so a preview captured seven seconds in can catch a page that thinks it is half a second old. Under prefers-reduced-motion the entrance is skipped entirely and the drawing is placed in its final position on the first paint. After the entrance the page is completely at rest — no loops, no timers, no mutations — and every field on the state probe is byte-identical at 7 seconds and at 15.
The drawing
The gate is about thirty SVG elements whose geometry is recomputed from one number, the clear opening in tenths of a metre. Leaves, capping rails, meeting stiles, slats on an 11-unit pitch, hinge knuckles, pier bodies, capping courses, mortar lines, fence pickets, beam heads and the dimension line are all derived from it, and CSS transitions on the SVG geometry properties do the interpolation, so changing the opening animates without a single frame of JavaScript. The whole scene is assembled synchronously at load and the entrance is driven from the animation loop that owns it — never by post-hoc DOM insertion, which in headless Chrome can leave groups unpainted while every state assertion stays green.
The map
Coast plain to the west, the Swan drawn as a line rather than a fill so no label ever sits on water, the Darling Scarp as a dotted edge, and the service boundary as a dashed blob enclosing twelve suburbs. On a phone the map keeps five named suburbs and hides the other seven, because the full list sits directly beside it in real selectable text. Every label’s rendered box is checked against every other label’s at both label sizes, in the harness — scene-label collision is a defect no state probe can see, so it was made an assertion instead of an eyeball.
The three passes
Every render after the first one threw, and nothing but the drive-flag markup could see it
Driven first, and it failed immediately: the estimate at rest read $7,970 / $4,500 / $2,950 / $520 correctly, but driving all twenty-four cells produced a total that never moved off the rest figure while the displayed price string, the line items and the drawing all updated perfectly. The cause was one line. The drive-comparison flag rewrote its own <b> element’s innerHTML on every render, and the replacement markup did not carry the two ids that were inside it, so the second render threw at getElementById(...).textContent — after the price text was written and before the ladder and the state probe were. A page that half-updates is worse than one that does not update at all, and no assertion that reads the displayed string alone would have caught it. Rebuilt as five stable spans set by textContent: no markup is generated at runtime anywhere in the estimate now.
Then the rendered page was looked at rather than asserted, and the drawing was the weak part of the thumbnail. It occupied about half its own frame with the gate reading as one continuous dark panel — two leaves at a 3.6 m opening met in the middle with no seam, so the whole argument of the double-swing control was invisible. Rebuilt: a boundary fence either side to fill the frame and give the sliding gate something to run back to, a 3-unit gap between the leaves with a meeting stile on each inner edge, hinge knuckles on the piers that disappear when the drive changes, a wider pier with a proper capping course, and the frame re-cut from 640×218 to 560×200 so the gate uses 61% of the width at rest instead of 55%.
Third: the dimension line, the swing arcs and the safety beam were all fighting for the same 60 units of driveway, and the arcs ran through the dimension text at every opening above 3.0 m. The dimension moved above the elevation, where a set-out sheet puts it, drawn in the field mark on paper at 4.38:1 with the figure in body ink at 14.52:1. The driveway band now carries the beam, the arcs and one note.
Copy and chrome: the wordmark wrapped to two lines at 375 and read as a broken header, so it was re-cut as LATCHWAY over a tracked second line carrying the trade and the suburb — one line each, at every width. The trust strip was a flex row with separator dots, which orphaned a dot at the end of the first line when it wrapped; it is now two block items with the marker as an ::before, because running prose should never be a flex container.
Publish the constraint the estimate cannot price, and take two invented figures back out of the FAQ
Driven again, this time across the entire twenty-four-cell domain in the browser against an independently reimplemented oracle: every cell’s total, its displayed string, all three line items, the other-drive figure, the four-cell width ladder, the dimension text, the caption and the scene state. Then a rapid-fire drive — five chip clicks dispatched in one evaluate with no settle between — landing on double swing / 3.0 m / intercom = $8,180, to prove no in-flight redraw closes over a stale state. 507 assertions, all green.
The depth addition is the two-line constraint strip under the drawing. The estimate prices the gate; it cannot price the block, and the two things that actually decide the job are the room the drive needs and who builds the piers. For a double swing the strip prints the exact half-width of clear ground each leaf needs behind its pier — a figure derived from the opening the customer just selected, so it changes with the control. For a sliding gate it prints no figure, because the honest statement is “a clear fence line a bit longer than the opening itself” and the multiplier that would turn that into metres is not in the model. The harness asserts that: the sliding room note must contain no digit at all.
Which then caught two figures in the FAQ that had been invented in exactly that way — “a 3.6 m gate wants about 4 m of clear run” and “a 4.5 m opening wants about 2.3 m of clear ground each side”. Both were plausible and neither was licensed by anything. Rewritten to state the relationship instead of a number, and to point at the estimate for the figure it does hold.
Micro-interactions: the chips are a proper radiogroup with roving tabindex and arrow-key navigation, and the gate’s geometry animates rather than jumping — the leaves grow, the slats redistribute, the piers slide apart, all on CSS transitions over the SVG geometry properties.
The map had three collisions the assertions could not see until the assertion was written
The service-area map was the one part of the page that had only ever been eyeballed, and it was wrong in three places at once: the “SERVICE AREA” tag sat on top of the dashed boundary, the vertical “THE HILLS” tag ran through the Mundaring label, and Kalamunda was drawn on the wrong side of the scarp it is supposed to sit east of. Rather than nudge them by eye, the harness gained a label-collision check: every visible label’s rendered box against every other, at the desktop label size and at the phone size, plus a frame-bounds check. It found two more the eye had passed over — Malaga against Mundaring, and Mundaring against Midland, both only at the phone label size, because that size is larger and the same layout that clears at 14px does not clear at 21px. The map was re-laid to twelve dots with per-label anchors, the phone label size came down from 23px to 21px, and the whole thing now passes at both sizes.
The first version of that check was itself wrong, which is worth recording: it used getBBox(), which ignores the element’s own rotate() transform, so the vertical tag reported a wide horizontal box and the check reported a collision that was not there and missed one that was. Rewritten against getBoundingClientRect() scaled back into viewBox units.
Breakpoint selectors were then asserted by match count rather than by effect, because a compound selector that matches nothing is syntactically perfect, semantically dead and invisible to every state probe: .map .lbl text.opt matches 7, .mast-cta matches 1, and at 375 all seven optional labels compute to display:none while the header CTA has no rendered box at all.
The form was driven three ways rather than two. Empty: six errors, six fields marked, confirmation stays hidden. Junk in the phone field — the literal string “ring me maybe” — and the assertions are that checkValidity() does not throw, that the browser’s own pattern rejects it, and that the confirmation stays hidden. That middle one matters: browsers compile the pattern attribute with the v flag, where (, ) and - are reserved inside a character class, so a pattern that new RegExp() accepts in Node can throw on every keystroke in Chrome and leave the one field that has to be right silently unvalidated. The shipped pattern is compiled with the v flag in the check script, not read. Good data: confirmation visible, form hidden, six summary rows.
Chanel rule: the amber was doing too many jobs. It was carrying the eyebrow, the headline emphasis, the tile prices, the flag rules, the FAQ markers, the constraint-strip labels and the service-area tags. The last two came off — the constraint strip and the crew tags are supporting information, not figures — and the amber now marks prices, emphasis and warnings only. The service-area list also lost a column that said “next week” three times; it names the crew instead, which is a fact the page had already claimed and never evidenced.
Final state: no console errors or failed requests on either page at 375, 768, 1200 or 1440; no horizontal overflow and no element past the viewport box at any of them; the masthead wordmark clear of the call chip at 375 with the header CTA correctly absent; the value proposition, both CTAs and the trust line all inside 667px without scrolling; exactly one h1 per page; no curly quote in any attribute on either page; [hidden] guarded with display:none!important; reduced motion settling on the first paint with no transform left on the drawing; and the drawn gate and the installed price both inside the top 750px at 1200 wide with the probe unchanged between 7 seconds and 15.
Local SEO we would implement for the real business
This demonstration page deliberately emits only WebPage, CreativeWork, WebSite and BreadcrumbList structured data, and it names itself a demonstration. Putting a fictional business into a real search index with LocalBusiness markup and invented reviews would be dishonest, so the markup we would ship for a real operator is shown here as a sample only — it is not live on either page.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HomeAndConstructionBusiness",
"name": "<real trading name>",
"image": "https://<domain>/installs/ellenbrook-swing.jpg",
"telephone": "+61 8 <real number>",
"priceRange": "$$",
"address": {
"@type": "PostalAddress",
"streetAddress": "<real street address>",
"addressLocality": "Malaga",
"addressRegion": "WA",
"postalCode": "6090",
"addressCountry": "AU"
},
"geo": { "@type": "GeoCoordinates", "latitude": "<lat>", "longitude": "<lng>" },
"areaServed": [
{ "@type": "City", "name": "Malaga" },
{ "@type": "City", "name": "Ellenbrook" },
{ "@type": "City", "name": "Mundaring" },
{ "@type": "City", "name": "Kalamunda" }
],
"openingHoursSpecification": [{
"@type": "OpeningHoursSpecification",
"dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
"opens": "07:00", "closes": "16:00"
}],
"hasOfferCatalog": {
"@type": "OfferCatalog",
"name": "Gate automation",
"itemListElement": [
{ "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Automated double swing gate" } },
{ "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Automated sliding gate" } },
{ "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Motor retrofit to an existing gate" } },
{ "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Gate service and safety-beam alignment" } }
]
},
"review": [{
"@type": "Review",
"author": { "@type": "Person", "name": "<from the live reviews feed>" },
"reviewRating": { "@type": "Rating", "ratingValue": "<from the feed>" },
"reviewBody": "<from the feed>"
}],
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "<from the live reviews feed>",
"reviewCount": "<from the live reviews feed>"
}
}
</script>
Alongside it: a Google Business Profile carrying the yard’s real address and photographs of finished installs at named suburbs, the three service-area groups turned into three indexable suburb pages rather than one, and the FAQ marked up as FAQPage — the eight questions on this page are the ones the trade is actually asked at the measure, so they are worth the markup. The review and aggregateRating blocks are filled from the live reviews feed and never typed by hand: hand-typed review markup is the fastest way to lose rich results altogether.
What would change for the real client
- Their installs, not our drawing. Photographs of finished gates at real Perth addresses replace the illustration on the services tiles — but the drawn estimate stays, because it changes with the controls and a photograph cannot.
- ServiceM8 or simPRO behind the form. The enquiry lands as a job card with the suburb, the clear opening, the pier status and the power answer already on it, so the measure is booked from the diary rather than from a phone tag, and the estimate the customer built travels with the job to the quote.
- The set-out sheet as a real deliverable. The page promises the bricklayer a document; on a live build that is a generated PDF with the plate positions, the conduit entry and the finished pier dimensions filled from the measure, emailed to the customer and their bricklayer at the same time. It is the single most valuable thing this business gives away and it should be automated.
- Their reviews, pulled live. The three quotes on the page are demonstration copy and are deliberately not marked up. On a real build they come from the Google Business Profile feed and the rating block above fills itself.
- The rate card behind a login for the strata and builder accounts, so the public page keeps the honest from-prices and contract customers see their own.
- The estimate wired to the price list, not to the page. Rates move; a hard-coded table in a landing page is a maintenance trap. On a real build the twenty-four cells come from one small config the office can edit, and the services-grid floor is derived from it so the two can never drift apart — which is the failure that turns an honest quoting page into a dishonest one.