Osteria del Lago
A Northern Italian osteria in Toronto's Distillery District, trading on handmade pasta and a room people remember — given a video-led, custom-coded website where the reservation is never more than one glance away.
/01 — The brief
A room this good deserved better than a PDF menu
Osteria del Lago runs on things that don't photograph as data: pasta rolled and cut every morning, a Lake Como family recipe book, and a dining room in a converted Distillery District warehouse. Its web presence was a single page with a phone number and a menu attached as a PDF.
The brief was to build the evening before the guest arrives: show the room and the plates as they are, make the menu readable on a phone in the back of a cab, and turn "we should book that place" into a confirmed table without a phone call.
/02 — The menu
Readable in the back of a cab
The menu is the most-read page of any restaurant site, so it's built as a page rather than a download: dish names in a serif with real italics, prices in crimson, and a sticky category nav that follows the reader — a scrollspy highlights antipasti, primi, or dolci as they scroll past.
The type system borrows from the room rather than a trend — DM Serif Display for the dishes, a quiet sans for descriptions, and a mono face for prices and hours — over a warm off-white canvas with the greens and crimsons of the flag used as seasoning, never as paint.
/03 — Reservations
From craving to confirmed table
The reservation form asks what the host stand would: name, contact, date, a time from the evening's actual seatings, party size, the occasion, and a notes field for allergies and requests. Client-side validation catches slips before they're sent, and the promise on submission is one the kitchen keeps — confirmation by email within two hours.
Behind the form sits a small hand-written PHP endpoint. It re-validates and sanitizes everything server-side, drops bots with a honeypot field and a submit throttle, then emails the request to the host stand with date, party, occasion, and allergies already structured — and sends the guest an SMTP confirmation with reply-to set to the restaurant. The private dining inquiry runs through the same pipeline, and the newsletter signup is forwarded to the house list.
If mail delivery ever fails, the form falls back to the phone number — a guest mid-craving is never left with a spinner.
/04 — The build
A few hundred lines of JavaScript, no dependencies
The home page opens on a pinned, scroll-driven video hero: the film of the pasta bench holds while the centred introduction shrinks and slides aside, and the navigation performs the same choreography — logo and reserve button sit centred over the film, then dock into the bar as the page begins. Further down, the two story photographs tilt gently against the scroll, testimonials advance on a quiet timer with keyboard support, and a marquee of press lines loops without a seam.
All of it runs on hand-written, dependency-free JavaScript — IntersectionObserver reveals, one rAF-driven scroll state, and a video-resume guard that keeps the hero playing when mobile browsers pause it in the background. Every effect degrades to a readable static page under prefers-reduced-motion, and the whole site ships as static files with one PHP endpoint behind the forms — nothing to update, nothing to break between services.
/05 — Result
The evening starts before the guest arrives
The site now does what the room does: it slows people down. The film sets the pace, the menu reads like the kitchen talks, and a reservation arrives at the host stand with the date, party size, occasion, and allergies already in order — so the first words exchanged at the door are a welcome, not a clarification.
For the restaurant, the whole thing stays light: menu changes are one edit to one page, and there is no plugin stack between a guest and a table.
/06 — Stack
Stack & integrations
Everything on this project, end to end:
Got a room worth filling?
Send your current site — we'll start with the reservation flow