Lede

Queenie ran Weymouth’s premier Chinese restaurant, Ming Wah, for twenty-six years before moving her chefs into the Mayflower takeaway down the road. The food carried over. The website did not. We rebuilt it for the shop that exists today.

Context

Weymouth is a Dorset seaside town of around 53,000 people, with a Friday-night takeaway economy that punches above its weight — generations of locals, a steady tourist population in season, and a small ring of independent restaurants that have shaped the town’s idea of itself. Ming Wah was one of them. From its opening in the late 1990s through to its transition in 2024–25, it was the family-occasion Chinese — the place a town of this size has exactly one of.

The Mayflower is the next chapter. Same family, same chefs, narrower format. Takeaway over sit-down. Same wok, same pace, same Saturday queue out the door. The food survived the transition almost without edit. The website did not. Heritage businesses lose their voice on the web more often than they lose their customers — they keep cooking, the digital surface around them dates by a decade per year, and the next generation of customers never sees what the older generation knows by heart.

The wider category is also under pressure. Independent takeaways pay aggregator commissions of 25–35% per order. The direct ordering channel — the shop’s own website — is the only margin the family can defend. Building that channel right is the difference between a Friday night that pays for itself and one that pays Deliveroo.

The problem

The previous Mayflower site was hosted on Yola — a drag-and-drop builder that was state of the art in 2012. Slow on mobile. Indifferent to photography. A homepage that could not tell the story of a kitchen that has fed three generations of the same town. The Pronto Food Online ordering system the shop already used worked fine, but it was buried behind a homepage that did not match the food coming out of the wok.

The narrower problem was framing. The kitchen at the Mayflower is not the same as the kitchen at Ming Wah, but it is the same chefs. The customer base is mostly continuous — the people who used to book a table at Ming Wah are the people who now collect from the Mayflower. The site needed to acknowledge the heritage without pretending nothing had changed; it needed to read as the current shop, not as nostalgia.

There was also a delivery problem. Heritage businesses that lean too hard on the past photograph badly. Stock food photography reads as franchise. The site needed real, recent, considered imagery of the actual kitchen the food was coming out of, or it would not work.

What we built

A single-page, mobile-first site in the editorial register of wagamama.com, dressed down for a hometown takeaway. Dark canvas at #0A0A0A. Burnt-orange CTAs at #D4722C. Deep maroon footer at #4A0E0E. A single red apostrophe in the wordmark. Seven custom monochrome photographs of the chefs at work, shot specifically for the project — chef at the wok, prep station, hands on the cleaver, ticket on the rail, the front of house.

The site is one page, seven sections — sticky nav, photo hero, info bar, about + stats, heritage story, photo gallery, menu and ordering, delivery info, footer. The hero is a full-bleed photograph of the chef at the wok with a gradient overlay; the heritage story sits below it as plain editorial prose, not a marketing block. The Pronto ordering system embeds inline as an iframe, so the route from front page to confirmed order is one scroll and a tap. No carousels. No pop-ups. No newsletter modal.

Typography pairs Sora at 800 weight for headings and the wordmark with DM Sans at 400 for body. Sora again at 700 for buttons. Tabular figures where prices appear. The whole site is delivered without a framework or a build step — static HTML, hand-rolled CSS, vanilla JavaScript — to keep the time-to-first-paint under control on the kind of phone connection that exists in a Dorset car park on a Friday night.

Behind the scenes, every order placed through the Pronto embed feeds into BentoPOS, the point-of-sale system that runs the shop’s kitchen. The customer sees one site. The kitchen sees one printer. The website and the chef are on the same page.

The same heritage story Queenie tells customers in person, told once more on a screen.

Architecture

The deliberate choice is no framework. The site is index.html, css/style.css, js/main.js and an images/ directory of seven original photographs. No React, no Next.js, no build pipeline. The justification is straightforward: a single-page marketing site for a takeaway should not be paying the JavaScript-bundle tax of a frontend framework, and the maintenance surface should be readable by anyone who can edit HTML.

HTML. Semantic, 275 lines, structured for screen readers with skip-link, ARIA labels, and a logical heading hierarchy. The Pronto Food Online iframe is the single embedded third party.

CSS. 950+ lines of hand-rolled CSS, no preprocessor. Custom properties for the colour and type system at the top of the file so palette changes are one find-and-replace. prefers-reduced-motion respected throughout. The orbital parallax on the photo sections — a subtle 3D tilt as images move through the viewport — is composited on the GPU using transform and will-change, never top or left.

JavaScript. 140 lines. A small IntersectionObserver-based scroll-reveal that fades sections in as they enter the viewport. A requestAnimationFrame loop driving the photo-block parallax. A hamburger nav for mobile. That is the entire JavaScript surface. No analytics noise, no third-party tracking, no marketing pixels.

Hosting. Netlify on the free tier. CDN by default. HTTPS by default. A netlify.toml config sets security headers — strict CSP, X-Frame-Options, Referrer-Policy: no-referrer-when-downgrade. A netlify/functions/chat.js placeholder sits in the repo for the Phase 2 Anthropic Claude support chatbot.

Performance. No JS frameworks, no external dependencies other than Google Fonts. GPU-composited animations only. Lighthouse Performance scores in the high nineties on mobile.

How it works (the short version)

• Static HTML, hand-rolled CSS, vanilla JavaScript — no framework, no build step
• Seven custom black-and-white photographs paired with Sora and DM Sans
• IntersectionObserver scroll-reveals; requestAnimationFrame parallax on photo blocks
• Pronto Food Online ordering embedded as an iframe; BentoPOS receives every order behind the scenes
• Netlify hosting (free tier, CDN, SSL, security headers in netlify.toml)
• prefers-reduced-motion respected throughout

Live behaviour today

Live at queenies.food. The Pronto embed processes orders that route into the shop’s kitchen via BentoPOS. The photography commissioned for the launch sits across the gallery, the hero, and the heritage section. The site renders at full quality on a mid-range phone in seconds. Lighthouse scores hold in the high nineties on mobile.

The custom domain queenies.food is live, replacing the original queenies-mayflower.netlify.app staging URL the site launched against in March 2026.

What’s next

• Claude-powered support chatbot (Q3 2026). A Netlify Function backed by the Anthropic Claude API. Tiered resolution model — freebies for minor issues (a missing prawn cracker), discount codes for medium (a late delivery), manager escalation for serious. Reference-code system using QM-XXXX-YYMM format for every interaction.
• Analytics integration (Q3 2026). A privacy-first analytics layer — likely Plausible — for the shop to understand peak times and channel performance, without resurrecting the cookie-banner debt.
• Loyalty surface (Q4 2026). Light integration with the BentoPOS customer record, so repeat orderers see their previous favourites and the shop has a route to defend direct-channel margin against aggregator pricing.

Tech stack

• Frontend — static HTML, vanilla JavaScript, hand-rolled CSS (no framework, no build step)
• Typography — Sora (800), DM Sans (400), Sora (700) for buttons
• Hosting — Netlify (free tier, CDN, SSL, security headers via netlify.toml)
• Ordering — Pronto Food Online embedded as an iframe
• POS integration — every order routes into BentoPOS at the kitchen
• Animation — IntersectionObserver scroll-reveals, requestAnimationFrame parallax (GPU-composited, prefers-reduced-motion respected)
• Phase 2 — Netlify Functions + Anthropic Claude API for the support chatbot

Status

Live at queenies.food. Phase 2 will add a Claude-powered support chatbot with tiered resolution, reference-code lookup and a custom domain.

Why this matters for Bento Labs

Queenie’s is the heritage compartment of the bento — and the studio’s most direct dogfooding loop. The shop is part of the family of restaurants that anchors Bento Labs’ own commercial spine, and the website was built end-to-end inside the studio with the chefs in the room. Every assumption baked into BentoPOS, every test of how a UK takeaway actually behaves at full service, comes back through this kitchen. The bento philosophy is that the studio’s portfolio and the studio’s commercial life are the same project; Queenie’s is the section where that is most obviously true.