Fallstudie
Kafi Spindel: eine Website für ein Café
Eine Website für ein Quartiercafé, die die vier Fragen der Gäste beantwortet: Haben Sie offen, was steht auf der Karte, wo sind Sie, und bekomme ich einen Tisch?
Kafi Spindel ist ein fiktives Café. Betrieb, Karte, Preise, Öffnungszeiten und Anlässe habe ich erfunden, um zu zeigen, wie ich eine Website für ein lokales Café bauen würde. Die Fotos stammen von Unsplash, die Illustrationen sind im Code gezeichnet.
- Haben Sie offen?Live-Status, berechnet in Winterthurer Zeit
- Was steht auf der Karte?Speisekarte mit Ernährungsfiltern und Allergenen
- Wo sind Sie?Ein gezeichneter Lageplan und ein Link zur Route
- Bekomme ich einen Tisch?Ein Formular für Tischanfragen
- Kundschaft
- Fiktiv: Kafi Spindel, Winterthur
- Art
- Konzept-Website, Deutsch und Englisch
- Umfang
- Eine lange Seite: Status, Karte, diese Woche, über uns, Tischanfrage, Anfahrt, FAQ
- Technik
- Astro · TypeScript · reines CSS
Der Auftrag
Die meisten Café-Websites bestehen aus einem Foto, einer veralteten PDF-Karte und einer Telefonnummer. Gäste wollen aber schnelle Antworten auf dem Handy, oft unterwegs. Die Website musste sie in Sekunden liefern und für den Betrieb einfach aktuell zu halten sein.
Rahmenbedingungen
- Schnell auf günstigen Handys und bei langsamem Mobilfunk.
- Einfach zu aktualisieren, auch ohne Technikkenntnisse: Öffnungszeiten, Karte, Tagesangebote.
- Keine Cookies und keine eingebettete Google-Karte.
- Ehrlich: Nichts an der Demo darf wie ein echter Betrieb wirken.
Entscheide und Gründe
Rund um vier Fragen gebaut
Öffnungsstatus, Karte, Anfahrt und Tischanfragen stehen ganz oben. Auf dem Handy bietet eine Leiste unten Anrufen, Route und Tisch an, die drei Klicks, die für ein Café zählen.
Öffnungszeiten, die immer stimmen
Der Status («Jetzt geöffnet · bis 18:00») wird in Winterthurer Zeit berechnet, kennt die Feiertage im Kanton Zürich und berücksichtigt die Sommerzeit. Er stimmt auch für Besucher in New York.
Eine Karte, der Gäste mit Allergien vertrauen können
Filter für vegan, vegetarisch und glutenfrei, dazu Allergene in klaren Worten bei jedem Gericht. Der Build bricht ab, wenn ein Gericht als vegan markiert ist, aber Milch enthält.
Ein gezeichneter Plan statt Google Maps
Eine eingebettete Google-Karte lädt Skripte von Dritten und kontaktiert Google, bevor jemand klickt. Ein kleiner gezeichneter Plan mit einem Link «Route» ist schneller und privat.
Zwei Sprachen, Schweizer Gerichte erklärt
Deutsch und Englisch, wobei Namen wie Gipfeli bleiben und auf Englisch erklärt werden («Swiss butter croissant»). Ein echtes Café in Winterthur hat Gäste in beiden Sprachen.
Datendateien, die der Betrieb bearbeiten kann
Karte, Öffnungszeiten, Tagesangebote, Anlässe und Hinweise liegen in kurzen Dateien, die bei jedem Build geprüft werden.
Was die Demo kann
- Live-Öffnungsstatus in Winterthurer Zeit
- Eine Karte mit Ernährungsfiltern und Allergenen in klaren Worten
- Ein Wochenangebot, das mit der Saison wechselt
- Kommende Anlässe
- Ein Formular für Tischanfragen, das nichts sendet und das auch sagt
- Ein gezeichneter Lageplan mit Route
- Deutsch und Englisch
Demo
Die Demo ist absichtlich vor Suchmaschinen verborgen, damit nie ein echter Gast in einem fiktiven Café landet.
Fotos von Unsplash, mit Namen der Fotografinnen und Fotografen. Illustrationen im Code gezeichnet.
Barrierefreiheit und Tempo: Ziele, keine Ergebnisse
Diese Ziele habe ich vor dem Bauen gesetzt. Echte Zahlen veröffentliche ich, sobald sie auf der Live-Demo gemessen sind, mit Datum, Tool und Einstellungen.
Barrierefreiheit
- WCAG 2.2 AA als Minimum
- Alles funktioniert mit der Tastatur, in sinnvoller Reihenfolge
- Klickflächen mindestens 44 × 44 Pixel
- Ein H1, ein Titel pro Abschnitt, Öffnungszeiten als echte Tabelle
- Kein seitliches Scrollen bei 320 Pixel Breite oder 200 % Zoom
- Keine Animation, wenn «Bewegung reduzieren» aktiv ist
| Messgrösse | Ziel | Ergebnis |
|---|---|---|
| Performance-Score | 95 oder mehr | Noch nicht gemessen |
| Barrierefreiheits-Score | 100 | Noch nicht gemessen |
| Best-Practices-Score | 100 | Noch nicht gemessen |
| Largest Contentful Paint | 1,8 s oder weniger | Noch nicht gemessen |
| Cumulative Layout Shift | 0,02 oder weniger | Noch nicht gemessen |
| Total Blocking Time | 50 ms oder weniger | Noch nicht gemessen |
| JavaScript, komprimiert | 12 KB oder weniger | Noch nicht gemessen |
| Erste Ansicht, übertragen | 350 KB oder weniger | Noch nicht gemessen |
| Anfragen an Drittanbieter | 0 | Noch nicht gemessen |
| Cookies | 0 | Noch nicht gemessen |
Demo und echtes Projekt im Vergleich
| Teil | In der Demo | In einem echten Projekt |
|---|---|---|
| Tischanfragen | Das Formular sendet nichts. | Anfragen kommen per E-Mail beim Café an oder gehen an sein Reservationstool. |
| Links zur Route | Sie öffnen den Hauptbahnhof Winterthur. | Sie öffnen den Standort des Cafés. |
| Suchmaschinen | Vor Suchmaschinen verborgen. | Indexiert, mit strukturierten Daten für Öffnungszeiten und Adresse. |
| Anruf-Button | Er zeigt einen Hinweis. | Er startet einen Anruf. |
| Übergabe | Entfällt. | Eine kurze Anleitung, wie der Betrieb Öffnungszeiten, Karte und Tagesangebote aktualisiert. |
Was würde das kosten?
Eine einfachere Version mit der Karte als Liste, Öffnungszeiten, einem Link zur Route und Kontaktangaben passt ins Paket Business-Website, ab CHF 390. Die volle Demo mit Live-Status, Filtern, Anlässen, Anfrageformular und zwei Sprachen liegt näher bei der Kompletten Website, ab CHF 690, plus Zusatzleistung zweite Sprache (CHF 250). Ihre Offerte nennt den Preis jeder Spezialfunktion, bevor Sie etwas bezahlen.