Case study
Kafi Spindel: a cafe website
A website for a neighbourhood cafe that answers the four questions guests actually have: are you open, what’s on the menu, where are you, and can I get a table?
Kafi Spindel is a fictional cafe. I invented the business, menu, prices, hours and events to show how I’d build a site for a local cafe. Photos are from Unsplash, illustrations are drawn in code.
- Are you open?Live status, calculated in Winterthur time
- What’s on the menu?Menu with diet filters and allergens
- Where are you?A drawn map and a directions link
- Can I get a table?A table request form
- Client
- Fictional: Kafi Spindel, Winterthur
- Type
- Concept website, English and German
- Scope
- One long page: status, menu, this week, about, table request, visit, FAQ
- Tools
- Astro · TypeScript · plain CSS
The brief
Most cafe sites are a photo, an outdated PDF menu and a phone number. Guests mostly want quick answers on a phone, often while walking. The site had to give them in seconds, and stay easy for an owner to keep current.
Constraints
- Fast on cheap phones and slow mobile connections.
- Easy for a non-technical owner to update: hours, menu, specials.
- No cookies and no embedded Google Maps.
- Honest: nothing on the demo may look like a real business.
Decisions, and why
Built around four questions
Open status, menu, directions and table requests sit at the top of the page. On phones, a bottom bar offers call, directions and table, the three taps that matter for a cafe.
Opening hours that are always right
The status (“Open now · until 18:00”) is calculated in Winterthur time, knows Canton Zurich public holidays and handles daylight saving. It’s correct even for a visitor in New York.
A menu guests with allergies can trust
Filters for vegan, vegetarian and gluten-free, plus allergens in plain words for every item. The build stops if an item is marked vegan but lists milk.
A drawn map instead of Google Maps
An embedded map loads third-party scripts and contacts Google before anyone clicks. A small drawn map plus a “Directions” link is faster and private.
Two languages, Swiss dish names explained
German and English, with names like Gipfeli kept and explained (“Swiss butter croissant”). A real cafe in Winterthur has guests in both languages.
Data files the owner can edit
Menu, hours, specials, events and notices live in short files that are checked on every build.
What the demo does
- Live open-now status in Winterthur time
- A menu with diet filters and allergens in plain words
- A weekly special that changes with the season
- Upcoming events
- A table request form that sends nothing and says so
- A drawn map with directions
- English and German
Demo
The demo is hidden from search engines on purpose, so a real guest never lands on a fictional cafe.
Photos from Unsplash, credited by name. Illustrations drawn in code.
Accessibility and speed: targets, not results
I set these targets before building. I’ll publish real numbers once they’re measured on the live demo, with date, tool and settings.
Accessibility
- WCAG 2.2 AA as the minimum
- Everything works with the keyboard, in a logical order
- Touch targets at least 44 × 44 pixels
- One H1, a heading per section, hours as a real table
- No sideways scrolling at 320 pixels wide or 200% zoom
- Motion switched off when reduced motion is set
| Measure | Target | Result |
|---|---|---|
| Performance score | 95 or more | Not measured yet |
| Accessibility score | 100 | Not measured yet |
| Best practices score | 100 | Not measured yet |
| Largest Contentful Paint | 1.8 s or less | Not measured yet |
| Cumulative Layout Shift | 0.02 or less | Not measured yet |
| Total Blocking Time | 50 ms or less | Not measured yet |
| JavaScript, compressed | 12 KB or less | Not measured yet |
| First view, transferred | 350 KB or less | Not measured yet |
| Third-party requests | 0 | Not measured yet |
| Cookies | 0 | Not measured yet |
Demo versus a real project
| Part | In the demo | In a real project |
|---|---|---|
| Table requests | The form sends nothing. | Requests arrive by email at the cafe, or go to its booking tool. |
| Map links | They open Winterthur main station. | They open the cafe’s own location. |
| Search engines | Hidden from search engines. | Indexed, with structured data for opening hours and address. |
| Call button | It shows a note. | It starts a phone call. |
| Handover | Not applicable. | A short guide for the owner on updating hours, menu and specials. |
What would this cost?
A simpler version, with the menu as a list, hours, a map link and contact details, fits the Business website package, from CHF 390. The full demo, with live status, filters, events, the request form and two languages, is closer to the Complete website package, from CHF 690, plus the second-language add-on (CHF 250). Your offer prices any special feature before you pay anything.