Yakitori

01Über den Kunden

Yakitori · Asian Food ist ein asiatisches Restaurant: Sushi und Rollen, Suppen, Nudeln, gebratener Reis, Udon, Tempura, Salate, Waffeln, Eis und Getränke, dazu ein Lieferdienst in der Stadt. Gäste kommen auf so eine Website aus einem einzigen Grund: um die Karte mit Preisen zu sehen und anzurufen. Die Seite muss also auf dem Smartphone sofort laden und ein Gericht als Foto zeigen, nicht als Zeile in einer Liste.

02Was wir getan haben

• Die Website in reinem HTML, CSS und JavaScript gebaut: kein CMS, kein Bundler, keine einzige externe Abhängigkeit. Die Seiten werden als fertige Dateien ausgeliefert, ein Update ist eine Ordnerkopie, und es gibt keine Plugins, die beim nächsten Release kaputtgehen.
• Daten und Darstellung getrennt. Die gesamte Karte liegt in einer Datendatei, aus der ein Skript sowohl das Kartenraster als auch die Rubriknavigation erzeugt. Preise oder Zutaten ändern sich, ohne das Markup anzufassen.
• Die beiden Sprachversionen als eigene Seiten statt als Umschalter im Browser umgesetzt: Russisch unter yakitori.az, Aserbaidschanisch unter yakitori.az/az. Jede hat ihr eigenes Canonical und einen vollständigen hreflang-Cluster (ru, az und x-default): Suchmaschinen sehen zwei eigenständige Dokumente statt eines, das seinen Text austauscht.
• Die Karte in 15 Rubriken gegliedert — von Sets und Kombos bis zu Limonaden — mit fünf Gruppen innerhalb von Sushi und Rollen: Hosomaki, Uramaki, warme Rollen, überbackene Rollen sowie Sushi-Burger und Reisbällchen. Die letzten drei Rubriken sind als Preisliste gesetzt und brechen automatisch in Spalten um.
• Eine Sticky-Navigation für die Rubriken gebaut: Der aktive Punkt wird per IntersectionObserver hervorgehoben, die Leiste lässt sich mit dem Mausrad scrollen und mit der Maus ziehen, und ein Klick direkt nach dem Ziehen wird unterdrückt — sonst würde das Ziehen versehentlich zu einer anderen Rubrik springen.
• Eine Lightbox ergänzt: Ein Klick auf ein Foto öffnet es im Vollbild, ein beliebiger Klick oder die Escape-Taste schließt es.
• Die Gerichtfotos ausschließlich per CSS zugeschnitten, ohne die Dateien anzufassen. Bei den Suppen sind Maßstab und Bildausschnitt so gewählt, dass die Schalen in einer Reihe gleich groß wirken; die Lightbox zeigt trotzdem das unveränderte Original.
• Vollständiges Such-Markup geschrieben: Title, Description, Canonical, hreflang, Geo-Metadaten, Open Graph und Twitter Card sowie JSON-LD Restaurant mit Telefon, Adresse, Öffnungszeiten, Koordinaten und Preisklasse.
• Alle Rastergrafiken in WebP umgewandelt und auf Cloudflare Pages veröffentlicht; die www-Adresse leitet auf die Hauptadresse um, damit der QR-Code auf dem gedruckten Flyer funktioniert — gedruckt wurde die www-Variante.

03Design und Struktur

Die Website stützt sich auf zwei Markenthemes. Das dunkle trägt Header, ersten Bildschirm und Footer: dunkelbrauner Grund, cremefarbener Text, goldene Schriftzüge und eine rote Linie unter dem Header. Das helle trägt die Karte selbst: Cremepapier mit Seigaiha-Muster, weiße Gerichtkarten, rote Preise. So wirkt die Seite wie eine gedruckte Speisekarte auf einem dunklen Umschlag — genau das, was das Restaurant ist.

Der erste Bildschirm ist keine Werbung: eine Überschrift, ein Satz, ein Bestell-Button und zwei Zeilen Fakten — Öffnungszeiten und Adresse. Die Telefonnummer steht im Header und noch einmal im Footer, denn bestellt wird hier per Anruf, nicht über einen Warenkorb.

04Typografie und die aserbaidschanische Version

Drei Schriften, keine vierte: Montserrat für Überschriften, Gerichtnamen und Preise, Manrope für Zutaten und Beschreibungen, Noto Sans JP für die japanischen Rubrikbeschriftungen. Die Aufteilung ist nicht dekorativ: Manrope fehlen das Zeichen der Landeswährung und der aserbaidschanische Buchstabe Ə, deshalb sind alle Preise in Montserrat gesetzt, und Manrope fällt auf dieselbe Montserrat zurück — sie zeichnet das Ə in den aserbaidschanischen Beschreibungen.

Ohne das würde der Browser stillschweigend eine Systemschrift einsetzen: Im CSS sieht man es nicht, die Schrift ist zugewiesen und alles „funktioniert“, aber der Buchstabe fällt aus der Zeile. Geprüft haben wir das nicht nach Augenmaß, sondern per Skript: Es fragt den Browser, mit welcher tatsächlichen Schrift jeder Textknoten auf beiden Seiten gerendert wurde.

Die zweite aserbaidschanische Falle ist die Groß- und Kleinschreibung. Ein normales uppercase macht aus i ein I, im Aserbaidschanischen braucht es aber İ. Deshalb liegen alle Zeichenketten, die in Versalien erscheinen, bereits großgeschrieben in den Daten, und die Umwandlung läuft ins Leere.

05Wie sich die Website auf dem Smartphone verhält

Die meisten Bestellungen kommen vom Smartphone, deshalb wurde das Kartenraster in vierzehn Breiten geprüft, vom breiten Monitor bis zum schmalen Handy. Dahinter steht eine einzige Regel: Ein Gerichtname darf nirgends auf zwei Zeilen umbrechen und mit dem Preis kollidieren.

• Auf dem Tablet wird das Raster fest auf zwei Spalten gesetzt.
• Auf dem Smartphone rutscht der Preis unter den Namen, statt sich die Zeile mit ihm zu teilen.
• Auf den schmalsten Bildschirmen wird der gesamte Text eine Stufe kleiner.

Die Größen sind auf Montserrat abgestimmt: Bei gleichem Schriftgrad läuft sie etwa ein Fünftel breiter als Manrope, Augenmaß hilft hier also nicht.

06Zeitrahmen und Ablauf

Rund eine Woche Arbeit. Die Website ging am 17. August 2026 unter yakitori.az live, das Projekt wurde am 18. August zusammen mit dem Flyer abgeschlossen: Auf dem Flyer ist ein QR-Code zur Website gedruckt, also konnten beide nur gemeinsam abgenommen werden.