Nature's Call Landscaping

Case Study

A premium, hand-built 20-page website for a 22-year hardscape and drainage specialist in Wilmington, Delaware. A cinematic hero video, a lead pipeline built to qualify the right projects, and a full migration off WordPress. No CMS, no page builder, no bloat. This was Phase 1: the digital foundation.

Visit NaturesCallLandscaping.com
Nature's Call Landscaping website homepage showing a cinematic aerial hero of a Wilmington, Delaware estate with hardscaping and landscaping

Results at a Glance

Google PageSpeed Insights

99
Performance
Mobile 80 / Desktop 99
100
Accessibility
Mobile 100 / Desktop 100
100
Best Practices
Mobile 100 / Desktop 100
100
SEO
Mobile 100 / Desktop 100

The previous WordPress site, weighed down by uncompressed video and full-size images, scored in the 30s on mobile PageSpeed. The rebuild lifted that to 99 on desktop and 80 on mobile, with perfect 100s for Accessibility, Best Practices, and SEO on both. Same content, dramatically better delivery.

About that mobile Performance score

Mobile Performance comes in at 80, and that number is a deliberate choice. The single largest element on the page is the full-width hero video from the client's drone cinematographer. For a premium hardscape brand, that cinematic first impression is the entire argument, so the video was kept full-width and uncropped rather than shrunk to chase a higher score.

Every other signal is effectively perfect: 100 for Accessibility, Best Practices, and SEO on both mobile and desktop, 99 on desktop Performance, 0 ms Total Blocking Time, and a Cumulative Layout Shift of essentially zero (0.001 desktop, 0 mobile). Everything that could be optimized without compromising the brand was optimized completely. The one number that didn't max out is the one we chose not to chase.

The Bottom Line

What all of this means for the business, in plain terms:

  • A website that loads fast and looks like the high-end work it sells.
  • Every page built with both site visitors and search and AI discovery in mind.
  • Leads that arrive pre-qualified, with budget and location up front.
  • A lead form built to refine where inquiries come from and to measure future advertising.
  • New photos get branded and sized automatically, with no need for a second watermarked set from the photographer.

Project Overview

Nature's Call Landscaping has been building high-end hardscapes in the Wilmington, Delaware area for 22 years, with 125+ Google reviews at 4.8 stars and a business that runs largely on repeat clients and referrals. The reputation was strong, and the site had been refreshed not long before. What held it back was technical. Large, uncompressed images and video made it slow to load, and many images were missing the alt text that search engines and screen readers rely on. The craftsmanship was there. The site just was not showing it off or getting found for it.

This was not a lead-volume problem. It was a lead-quality and positioning problem. The goal of the rebuild was to make the site look and perform like the premium specialist Nature's Call already is, lead with the work, and help the right inquiries stand out. One genuine differentiator drove much of the content: Nature's Call treats drainage and storm water as central, not an afterthought, which matters in a region of clay soil and freeze-thaw cycles where drainage problems are common.

Phase 1 delivered the digital foundation: a complete custom website design and rebuild, a migration off GoDaddy and WordPress onto Cloudflare, the qualified-lead pipeline, analytics, and the full technical SEO and AI-visibility groundwork. It is built to grow, with later phases scoped separately.

Site Architecture

20 pages, hand-built in Eleventy with Nunjucks templating, organized around how a high-end homeowner researches a contractor:

Homepage
Full-width cinematic hero video that leads with the work, with trust signals just beneath
About / Our Story
22 years, owner-on-every-project narrative, what sets the company apart
5 Service Pages
Hardscaping, Landscaping, Drainage, Outdoor Lighting, Property Maintenance
7 Project Showcases
Hockessin, Greenville, Garnet Valley, Chadds Ford, Wilmington, North Wilmington, each telling the story of a real job
Gallery
Curated portfolio grid with an auto-balancing layout and watermarked photography
Service Area
Greenville, Hockessin, Centreville, Garnet Valley PA, Chadds Ford PA and surrounding areas
Contact / Get a Quote
The qualified-lead form: location, budget, timeline, and source
Privacy, Pay Now, 404
Supporting pages, with payment and thank-you pages set to noindex

The drainage page is a standout. The old site had no dedicated drainage page yet still drew real search demand for it. The new one turns a genuine differentiator into a page that can rank and convert.

Migration off WordPress

Moving a 22-year-old site means protecting two decades of accumulated search equity. The old site had a real problem hiding in plain sight, and the migration was the chance to fix it.

Zero-Downtime Cutover

The entire new site was built and approved on a private test environment before a single DNS record changed. Hosting moved off GoDaddy onto Cloudflare Pages: faster, more secure, automatic SSL, and no more monthly hosting fees. The client's email was left exactly as it was, so nothing on the business side broke during the switch.

Consolidating a Split Canonical

A Google Search Console audit of the old site revealed the homepage was indexed twice, once on http://www and once on https:// non-www, splitting its ranking signals across two hosts. The new site forces a single canonical and redirects every variant to it, so 22 years of authority finally points at one URL instead of being divided.

301 Redirect Map

The old WordPress URLs (city landing pages, project posts, service pages) were mapped one by one to their new homes through a 40-rule redirect file, with the highest-impression pages prioritized. Old links from across the web, and the rankings attached to them, carry straight through to the new structure instead of dead-ending in 404s.

Cinematic Hero Video Pipeline

The client works with a professional drone cinematographer. Most contractors waste that footage by uploading a heavy, compressed clip that loads slowly and looks grainy. The hero here is engineered to deliver the cinematic feel without the weight.

Adaptive Multi-Codec Delivery: The hero is encoded into four variants: H.264 and HEVC, at both 1080p and 720p. The browser picks the smallest file it can play, so a modern iPhone pulls a 3.3 MB HEVC clip while older browsers fall back gracefully to H.264.
Fast-Start Encoding: Every variant is encoded with the metadata moved to the front of the file (faststart), so playback begins while the video is still downloading instead of waiting for the whole file.
Poster Frame: A still frame paints instantly as the poster image, so there is never an empty black box while the video loads. That same frame doubles as the default social-share image.
Reduced-Motion Aware: Visitors who set "reduce motion" in their OS get the poster image instead of autoplay. The site respects the accessibility preference automatically.

The hero is kept full-width and uncropped on purpose. Cinematic, full-bleed video is a luxury convention. Cropping it to force everything above the fold is a lower-tier instinct that a premium audience reads instantly.

Build-Time Photo Watermarking

The client's photographer delivers clean, unwatermarked originals. The brand wants its wordmark on every public photo. Doing that by hand across hundreds of images, at every responsive size, would be untenable. So it runs automatically at build time.

Composited Before Resizing

A Sharp image pipeline composites the Nature's Call wordmark onto each full-resolution photo before it is resized, so the mark scales proportionally and stays crisp across every responsive variant. A skip list excludes photos that already carry a baked-in logo, so nothing gets double-branded.

Content-Hash Caching

Watermarking and resizing hundreds of images is expensive. Each image is keyed by a hash of its bytes plus the watermark settings, so a build only regenerates the photos that actually changed. A cold build takes minutes; a typical content update finishes in seconds.

Why It Matters to the Client

The owner can drop a new unwatermarked photo into the project folder and the site handles the branding, the sizing, and the modern formats on its own. No design tool, no two sets of files, no waiting on the developer for routine photo swaps.

Qualified-Lead Pipeline

The goal was qualified leads, not just more of them. The contact form is built to surface the details that matter on a high-end project up front, so the right conversations are easy to spot.

Qualifies at Intake: The form captures project location, investment range, and timeline alongside the message. The right-fit conversations surface immediately, and there is no "free quote" language anywhere, which would undercut the premium positioning.
Geographic Classification: Each submission is tagged using Cloudflare edge geolocation. Leads inside the Delaware and Pennsylvania service area are flagged green in the notification email; out-of-area leads are flagged so they can be triaged at a glance.
Attribution Capture: UTM parameters, Google and Facebook click IDs, referrer, and first-seen timestamp are captured silently with every lead, so future ad spend can be measured against real inquiries instead of guesses.
Serverless and Spam-Hardened: A Cloudflare Pages Function verifies a Cloudflare Turnstile token server-side, validates and HTML-escapes every field, then sends a clean, structured email via Resend with the customer set as reply-to.
Unit-Tested: Validation, geographic classification, attribution parsing, HTML escaping, and email rendering are all covered by an automated Node test suite. The pipeline is verified, not assumed.

The notification email is itself designed. It reads as a clean, color-coded brief (who, where, budget, timeline, source, message) rather than a wall of raw form fields, so the office can act on a lead in seconds. The whole pipeline runs serverless with no monthly platform fee.

Want a website that works this hard for your business?

SEO Strategy

The content was not guessed. A full Google Search Console audit of the old site mapped where real demand existed but no clicks were landing, and the new site was written to capture exactly those clusters without keyword stuffing.

Demand-Driven Content

The audit surfaced strong, near-zero-click demand around drainage, “outdoor living,” Hockessin and Greenville, and Pennsylvania paver patios. Each cluster was mapped to the one page that should own it: services own their head terms, and the real project pages carry the location long-tail naturally, because a genuine Hockessin or Garnet Valley project is the most honest way to rank for those towns.

The anti-stuffing rule was strict. Each town and service concept appears where it is actually true, on a real project or the real service page, with FAQ blocks as the natural home for the “near me” and “{town}” phrasings.

Technical SEO

Structured Data

JSON-LD across the site: LocalBusiness with full NAP, geo, hours, and price range; WebSite; per-page Service schema; and auto-generated BreadcrumbList on every inner page.

Per-Page Meta & OG

Every page enforces a title, description, and Open Graph tags through a frontmatter contract, with a generated default share card and per-page overrides.

Canonical & Sitemap

Self-referencing canonical on every page, an auto-generated XML sitemap with priority tiers, and a robots.txt that excludes only the payment and thank-you pages.

Clean URL Structure

Semantic, hyphenated paths under /services/ and /our-work/, replacing the old WordPress permalink sprawl.

NAP Consistency

Name, address, and phone are identical across the footer, the structured data, and the Google Business Profile, reconfigured to target the right service area.

Cache-Busted Assets

CSS and JS are fingerprinted on every build so visitors never get stale files after an update.

In plain terms: the site is built to show up when someone nearby searches for the work, and to be the result they click.

Performance Optimization

Every optimization decision was deliberate. Not just checking boxes, but understanding the tradeoffs behind each technique, including the one that intentionally costs a few mobile points.

Self-Hosted Fonts: Cormorant Garamond and Jost are served as subset WOFF2 files from the site itself, preloaded, with font-display: swap. No Google Fonts CDN round-trip, no render-blocking, no layout shift when the fonts arrive.
Responsive Image Pipeline: Every image runs through an eleventy-img and Sharp pipeline that generates WebP with a JPEG fallback at four widths, lazy-loaded and explicitly dimensioned, so the browser downloads only what each screen needs.
No Framework Payload: A static Eleventy build means there is no client-side framework to hydrate. Total Blocking Time measures 0 ms on both mobile and desktop, and Cumulative Layout Shift is effectively zero.
Deferred and Minimal JS: The only JavaScript is a small amount of hand-written interaction code (navigation, mobile menu, scroll reveal) plus a deferred privacy-friendly analytics tag. Nothing blocks the first paint.
Build Caching on Cloudflare: Image variants persist in a content-hashed cache between deploys, so routine updates deploy in seconds rather than rebuilding hundreds of images every time.

Accessibility

A perfect 100 Accessibility score on both mobile and desktop, built on real semantic fundamentals rather than an overlay widget:

Skip Link & Landmarks: A skip-to-content link is the first focusable element, and the page uses proper header, main, and footer landmarks so keyboard and screen-reader users can navigate efficiently.
ARIA & Keyboard Support: The mobile menu exposes aria-expanded state and closes on Escape; the hidden sticky CTA bar uses inert so it is never tabbable while off-screen. Every interactive element is reachable by keyboard with clear focus states.
WCAG AA Contrast: Color tokens were tuned to meet AA contrast, with separate accessible gold variants for text on light versus dark backgrounds.
Reduced-Motion Support: Users who request reduced motion get no autoplay video and no scroll animations. The preference is honored in both CSS and JavaScript.
Described Images: Alt text is required on every image through the build shortcodes, and explicit dimensions prevent the layout shift that hurts users on slow connections.

Security

A full set of security response headers ships on every route, with the content security policy rolled out carefully:

HSTS

Strict-Transport-Security enforces HTTPS on repeat visits, closing the door on protocol-downgrade attacks.

X-Frame-Options: DENY

Blocks the site from being embedded in an iframe, defending against clickjacking.

X-Content-Type-Options

nosniff prevents MIME-type sniffing attacks.

Referrer & Permissions Policy

Referrer is limited to strict-origin-when-cross-origin, and camera, microphone, geolocation, and topics APIs are disabled.

Staged CSP

The content security policy launched in report-only mode so a mistuned rule could never break the form or analytics during cutover, with a clear path to enforcing once verified.

Server-Verified Turnstile

The contact form validates its Cloudflare Turnstile token server-side, so spam protection cannot be bypassed by a forged client request.

In plain terms: the site is locked down so it cannot be hijacked, framed inside a scam page, or used to push spam through the contact form.

AI Discoverability

Built to be understood and cited by AI search tools as readily as by Google:

llms.txt Endpoint: The site publishes a structured llms.txt file: a clean, Markdown summary of the company, services, projects, and service area that ChatGPT and other assistants can read directly.
Machine-Readable Schema: LocalBusiness, Service, and BreadcrumbList JSON-LD give AI systems an unambiguous description of what the business does and where it works.
Semantic HTML: A single H1 per page with a logical heading hierarchy and proper sectioning makes the content easy for language models to parse and summarize accurately.
Consistent Identity: The same name, address, phone, and service area appear in the visible content, the structured data, and the Google Business Profile, so AI tools get one consistent answer about the business.

In plain terms: when someone asks ChatGPT or Google's AI for a contractor like this, the site gives a clear, accurate answer to point to.

Analytics & Conversion Tracking

The site uses Umami, a privacy-friendly analytics tool that needs no cookie banner. Phone and email clicks are tagged as custom events, so the owner can see not just how many people visit, but how many actually reach out and how. Combined with the lead form's attribution capture, it lays the groundwork to measure future ad spend against real inquiries.

Technology Stack

ComponentTechnology
Site GeneratorEleventy (11ty) with Nunjucks templating
HostingCloudflare Pages (migrated off GoDaddy)
Imageseleventy-img + Sharp, WebP/JPEG, build-time watermarking
Hero VideoAdaptive H.264 / HEVC, 1080p / 720p, fast-start encoded
FontsSelf-hosted WOFF2 (Cormorant Garamond, Jost)
FormsCloudflare Pages Function + Resend
Spam ProtectionCloudflare Turnstile (server-verified)
AnalyticsUmami (privacy-friendly)
Structured DataJSON-LD (LocalBusiness, Service, BreadcrumbList) + llms.txt
TestingNode test suite (forms, email, headers)

A Reputation Worth Showing Off

22
Years in business
125+
Google reviews
4.8★
Average rating

The reputation was already there. The job of the new site was to finally communicate it, and to make sure the next homeowner researching a premium contractor in Wilmington sees it clearly.

Want Results Like This?

I'm a Wilmington, Delaware web developer who builds fast, custom websites for local businesses. Whether you need a brand-new custom website design or a website redesign like this one, every project is designed around your goals and built to attract the right customers.