Chez Charlene

What was there before

The previous site was a React single-page application. Every one of its eight routes returned the same 1.4 KB HTML shell with an empty div, and then loaded roughly 500 KB of JavaScript to draw the page in the visitor's browser.

For a venue that lives or dies on being found, that had consequences nobody at Chez Charlene had been told about. There was no server-rendered content for Google to read. There was no sitemap and no robots file. And all eight routes shared a single page title and description, so the accommodation page, the corporate events page and the homepage were indistinguishable to a search engine.

The hero images were pre-stitched collages - three photographs flattened into one JPEG - with a heavy white overlay washing them out so the text on top stayed legible. On an estate with this much to photograph, that is the most expensive kind of compromise.

What we built

A static site. Each route is now real HTML served as a file, with its own title, description and Open Graph data, plus EventVenue structured data, a sitemap and a robots file. No framework JavaScript ships at all - the nav, sliders, gallery lightbox and scroll reveal are small inline pieces rather than a bundle.

The photography drives the design rather than being worked around. 151 source photographs run through an image pipeline that produces responsive WebP at the sizes each layout actually uses, so full-bleed imagery does not cost the visitor a slow page. No collages, no overlay washing the colour out.

The four venue pages - main venue, boutique venue, corporate events and accommodation - are generated from a single data file. Copy and photographs for all four live in one place, which means updating a venue does not mean editing a template.

Typography carries the register: Cormorant Garamond for display, Allura to match the script in the logo, Jost for interface text. The bronze and muted tones were sampled off the venue's own photography and then darkened until small text cleared WCAG AA contrast against both ivory and cream backgrounds.

Why it works

A wedding venue is chosen on feel first and logistics second, so the site has to carry the estate before it explains the capacities. Leading with uninterrupted photography and keeping the detail a scroll away matches how people actually shortlist a venue.

Separating the four venues into their own pages also gives each one a surface to rank on. Someone searching for a Pretoria East conference venue and someone searching for a wedding chapel are not the same visitor, and they no longer land on the same undifferentiated page.