Miss Et & Balık ist ein Fleisch- und Fischrestaurant in Kaman in der türkischen Provinz Kırşehir. Das Projekt vereint die Website des Restaurants und eine QR-Speisekarte, die Gäste am Tisch mit dem Smartphone öffnen, in einer schlanken Lösung. Ziel war ein digitales Schaufenster, das Gäste in Sekunden nutzen können, ohne dem kleinen Betrieb Wartungsaufwand oder monatliche Softwarekosten aufzubürden.

Ausgangslage und Anforderungen

Das Restaurant hatte drei konkrete Anforderungen. Erstens eine Präsentationsseite mit Fotos der Gerichte und des Lokals, die auf dem Smartphone einwandfrei funktioniert. Zweitens eine digitale Speisekarte, die am Tisch gescannt werden kann, ohne dass eine App installiert werden muss. Drittens sollten Reservierungsanfragen dort ankommen, wo das Team ohnehin täglich kommuniziert: bei WhatsApp. Ein separates Admin-Panel zu erlernen oder Anfragen auf einem weiteren Bildschirm zu verfolgen, war für den Betrieb nicht realistisch.

Lösung und Umfang

Onepager-Website

Die Startseite ist eine durchgehend scrollbare Einzelseite. Nach einer kurzen Ladeanimation folgt ein Begrüßungsbereich mit Parallax-Hintergrund. Der Bereich Über uns stellt das Lokal vor, der Menübereich zeigt 14 Gerichte mit Fotos und kurzen Beschreibungen in vier Kategorien: Fleischgerichte, Fisch und Meeresfrüchte, Vorspeisen sowie Desserts. Navigationspunkte am rechten Rand zeigen die aktuelle Position und springen per Klick zum jeweiligen Abschnitt.

Bildergalerie und vollständige Speisekarte

Die Fotos der Gerichte sind in einer Galerie zusammengefasst; ein Klick öffnet eine Lightbox. Diese lässt sich auch per Tastatur bedienen: Mit den Pfeiltasten wechseln Sie zwischen den Bildern, Escape oder ein Klick außerhalb schließt sie. Wer die gesamte Karte auf einen Blick sehen möchte, öffnet ein eigenes Fenster mit der vollständigen Speisekarte.

Formulare mit WhatsApp-Anbindung

Das Reservierungsformular erfasst Name, Telefonnummer, Datum, Uhrzeit, Personenzahl und eine optionale Notiz. Beim Absenden werden die Angaben zu einer übersichtlichen Nachricht zusammengesetzt und als vorbereitete WhatsApp-Nachricht an das Restaurant geöffnet. Kontaktformular und Newsletter-Anmeldung funktionieren genauso. Auf dem Server werden keine personenbezogenen Daten gespeichert, es braucht weder Datenbank noch E-Mail-Infrastruktur, und die Anfragen landen in der App, die das Team ohnehin den ganzen Tag nutzt.

Mobile-first QR-Speisekarte

Die QR-Speisekarte ist eine eigene, reduzierte Seite für Gäste, die den Code am Tisch scannen. Oben befinden sich Reiter für Fleisch, Fisch, Vorspeisen und Desserts; beim Wechsel öffnet sich die Kategorie und die Seite scrollt sanft nach oben. Jedes Gericht hat eine kurze Beschreibung der Zubereitung. Am Seitenende stehen ein WhatsApp-Kontakt und ein Link zurück zur Hauptseite.

Druckfertige QR-Code-Seite

Für die QR-Karten auf Tischen und an der Wand gibt es eine eigene Seite. Der QR-Code wird im Browser erzeugt und mit Logo und kurzer Scan-Anleitung auf einer druckfertigen Karte angeordnet. Die Schaltfläche Drucken / Herunterladen öffnet eine Druckansicht, die nur die Karte enthält; neue Karten lassen sich so ohne Designer ausdrucken.

Verwaltungsmodell

Auf ein Admin-Panel wurde bewusst verzichtet. Die Speisekarte ist überschaubar und ändert sich selten; Panel, Datenbank und Benutzerkonten hätten Angriffsfläche und Wartungskosten unnötig erhöht. Inhaltliche Änderungen erfolgen direkt in den statischen Dateien und sind innerhalb weniger Minuten online. Im Tagesgeschäft hat das Restaurant nur mit den Anfragen in WhatsApp zu tun.

Technische Architektur

Die Website ist ohne Framework in HTML5, CSS3 und reinem JavaScript umgesetzt. Die Styles sind auf 13 Dateien verteilt, darunter globale Variablen, Header, Menü, Formulare, Galerie, vollständige Speisekarte, QR-Speisekarte und responsive Regeln; Farben und Typografie werden zentral über CSS Custom Properties gesteuert. Das Verhalten steckt in sechs kleinen JavaScript-Dateien für Ladeanimation, Navigation, Punktanzeige, Lightbox, Speisekarte und Formulare. Der gesamte Code ohne Bilder umfasst rund 105 KB, ein Build-Schritt entfällt.

Menü- und Galeriebilder werden per Lazy Loading erst geladen, wenn sie in den sichtbaren Bereich kommen. Die Typografie kombiniert eine handschriftliche Display-Schrift mit gut lesbaren Fließtextschriften. Für Desktop, Tablet und Smartphone gibt es eigene Breakpoints, die dunkle Restaurant-Ästhetik bleibt überall erhalten. Description- und Viewport-Meta-Tags sind für Suchmaschinen und mobile Darstellung gesetzt.

Integrationen und Betrieb

• WhatsApp: Reservierung, Kontakt und Newsletter über vorbefüllte Nachrichtenlinks.
• QR-Code-Erzeugung: eine schlanke Bibliothek im Browser, ganz ohne Server.
• Nginx und Let's Encrypt: statische Dateien werden direkt über HTTPS ausgeliefert.

Ergebnis

Das Projekt wurde im März 2026 abgeschlossen und ist unter menu.guezelwebdesign.com online; die QR-Speisekarte läuft als eigene Seite unter derselben Domain. Das Restaurant verfügt nun über eine Speisekarte, die auf dem Smartphone der Gäste schnell lädt, und eine Website, die Reservierungen direkt zu WhatsApp bringt. Da serverseitig keine Anwendung läuft, beschränkt sich die Wartung auf Inhaltsänderungen.