Ember & Oak Ein Magazin, das Abendessen serviert

01 · Überblick

Ein Magazin, das Abendessen serviert

Für dieses Konzept habe ich mir Ember & Oak als Restaurant vorgestellt, das seit 2016 in Portland über Eichenholz kocht — die Art Raum, die bereits eine Stimme hat und über die die meisten Restaurant-Websites hinwegreden. Also hört die Seite auf zu performen. Sie setzt das Restaurant so, wie es ein Food-Magazin täte: ein Titelkopf, ein Vorspann, linierte Spalten, Platten, die bis an den Papierrand laufen, und eine Karte, die man liest statt an ihr vorbeizuscrollen.

Alles darauf ist typografisch. Kein Hero-Video, kein Parallax-Showreel, kein Scroll-Jacking. Die einzige Bewegung im ganzen Build ist ein Anheben um acht Pixel beim Eintritt eines Abschnitts und ein langsames Driften der Titelfotografie — und beides steht sofort still, wenn die Besucherin reduzierte Bewegung wünscht.

02 · Die Idee

Saisonal, ohne Eile, auf Papier

Das Konzept stand mit einem Satz fest, den ich für das Restaurant geschrieben habe: saisonale Karten, geschrieben vom Willamette Valley, über Eiche gegart, ohne Eile serviert. Ohne Eile wurde zur Gestaltungsvorgabe — nichts auf der Seite darf die Leserin hetzen, weder die Übergänge noch die Schrift noch die Handlungsaufforderungen.

Daraus folgen drei Regeln, und der ganze Build hält sich daran.

• Die Schrift führt, die Bilder stützen

  Fraunces mit variabler optischer Größe für die Display-Ebene, Libre Franklin für den Text. Die zwölf Fotografien sitzen in den Spalten wie Platten in einem Magazin, statt als Hintergründe zu dienen.

• Langsamer als erwartet

  Eine einzige Easing-Kurve für den ganzen Build — cubic-bezier(0.33, 1, 0.68, 1) — und Reveals, die fast eine Sekunde zum Landen brauchen.

• Kein Druck

  Ein Reservierungsformular, am Fuß der Seite, nachdem Karte, Küchenchef, Raum und Presse ihre Sache vorgetragen haben. Keine mitlaufende Buchungsleiste, die einem hinterherfährt.

03 · Ziele

Was die Seite leisten musste

1. Die Karte lesbar machen

   Vorspeisen, Hauptgänge und Desserts als drei echte Abschnitte mit Punktlinien und Preisen — die gedruckte Karte, auf dem Bildschirm, in jeder Breite.

2. Den Raum ohne Diashow verkaufen

   Zwölf Fotografien im Raster genau dort platziert, wo der Text sie verdient hat, statt eines Karussells, das niemand weiterklickt.

3. Eine Buchung in einem Bildschirm annehmen

   Sechs Felder, eine höfliche Live-Region für die Bestätigung und der Fokus auf die Meldung gesetzt, damit eine Screenreader-Nutzerin das Ergebnis hört statt es nur zu sehen.

4. Unter einem harten Gewichtsbudget bleiben

   Kein Framework, keine Karussell-Bibliothek, kein Icon-Font. Die ganze Interaktionsschicht musste in ein paar Kilobyte von Hand geschriebenem JavaScript passen.

04 · Baureihenfolge

Wie es gebaut wurde, der Reihe nach

Die Seite wurde so geschrieben, wie sie sich liest: erst die Struktur, dann das Schriftsystem, dann die Farbe, dann die zwei Bewegungen. Nichts wurde gestaltet, bevor es ausgezeichnet war, und nichts bewegte sich, bevor es im Stillstand lesbar war.

1. Das semantische Skelett

   Sieben Abschnitte, jeder mit einem aria-labelledby auf die eigene Überschrift: Geschichte, Karte, Küchenchef, Galerie, Private Dining, Presse und Reservierungen. Die Dokumentgliederung stimmte, bevor eine einzige Regel geschrieben war.

2. Der Token-Block

   Sechzehn Custom Properties auf :root — sieben Farben, vier Tintenalphas, ein eigenes Token für Feldränder, zwei Schriftfamilien, eine Easing-Kurve und die Höhe des Titelkopfs. Kontrastwerte stehen als Kommentare neben den Werten, die geprüft werden mussten.

3. Das Spaltenraster

   CSS Grid mit einer benannten Maßspalte, damit Langtext auf eine bequeme Zeilenlänge begrenzt bleibt, während Platten und Karte breitere Spuren überspannen.

4. Fünfzehn Breakpoints als Beleg

   Fünfzehn Media Queries, jede gegen ein echtes Umbruchproblem geschrieben statt gegen einen Gerätenamen. Es sind die meisten der Sammlung, und die Karte ist der Grund für die meisten davon.

5. Unter sechs Kilobyte

   Mobile Navigation, Scroll-Reveals, der Schatten des Titelkopfs, das Driften des Heros und das Reservierungsformular: 165 Zeilen in einer IIFE, mit einem matchMedia-Wächter ganz oben.

05 · Architektur

Drei Dateien, sonst nichts

Es gibt keinen Bundler, keinen Transpiler und kein node_modules. Die Site besteht aus drei Dateien, ausgeliefert wie geschrieben, und der Browser ist die einzige Laufzeitumgebung, die sie je gebraucht hat.

06 · Was sich gewehrt hat

Probleme, und was sie gelöst hat

1. Problem

   Eine gedruckte Karte führt das Auge mit Punktlinien vom Gericht zum Preis. Im Web wird das meist mit einer Reihe echter Punkte gefälscht, die ein Screenreader dann einzeln vorliest.

   Lösung

   Die Punktlinie ist ein sich wiederholender Hintergrundverlauf auf einem Flex-Abstandshalter. Sie ist Dekoration und kein Inhalt, also begegnet sie assistiver Technik nie — und sie dehnt sich in jeder Breite korrekt.

2. Problem

   Creme auf Creme ist die ganze Palette, und bei kontrastarmen Paletten scheitert Barrierefreiheit still — besonders an Feldrändern, die als Nicht-Text-Inhalt trotzdem 3:1 erfüllen müssen.

   Lösung

   Zwei Akzente statt einem. #C4552D färbt Linien und Flächen; ein abgedunkeltes #A8431F ist Akzenttext vorbehalten und liegt bei 5,54:1 auf Creme. Feldränder bekamen ein eigenes Token mit 3,6:1, und der Wert steht im Stylesheet daneben.

3. Problem

   Reveal-Animationen beim Scrollen verstecken Inhalt standardmäßig. Wenn das Skript scheitert oder schlicht nie läuft, ist die Seite leeres Papier.

   Lösung

   Der versteckte Zustand hängt an einer Klasse, die das Skript selbst setzt. Kein Skript, keine Klasse, kein versteckter Inhalt: Die Seite rendert in ihrem gesetzten Endzustand und liest sich einwandfrei.

4. Problem

   Ein Parallax-Titelkopf ist der schnellste Weg, eine Restaurantseite billig wirken zu lassen — und der schnellste Weg, sie auf einem Mittelklasse-Telefon stottern zu lassen.

   Lösung

   Eine einzige Transformation, angetrieben von scrollY mit einem Koeffizienten, der niedrig genug ist, um als Tiefe statt als Bewegung wahrgenommen zu werden — und unter prefers-reduced-motion vollständig übersprungen.

07 · Behaltenswert

Die Teile, die es wert sind zu bleiben

• Die Herbstkarte

  Drei Gänge, gesetzt wie eine gedruckte Karte, mitsamt Punktlinien, die auf dem Telefon in eine einzige lesbare Spalte umbricht, ohne die Preisausrichtung zu verlieren.

• Aus dem Gastraum

  Ein Fotoraster, das seinen eigenen Rhythmus bricht — andere Spannweiten, andere Höhen —, damit es sich wie eine Magazin-Doppelseite liest und nicht wie ein Galerie-Widget.

• Stimmen & Kritiken

  Pressezitate als Auszeichnungszitate gesetzt, das Medium in Kapitälchen — das eine typografische Mittel, das sich ein Restaurant wirklich verdient.

• Eine Buchung, kein Trichter

  Sechs Felder, Validierung direkt im Formular, eine höfliche Live-Region für die Bestätigung und der Fokus darauf gesetzt. Kein Modal, kein Upsell, kein Countdown.

08 · Live starten

Hier starten

Der echte Build, eingebettet und laufend. Es wird nichts davon geladen, bevor du es verlangst — die Seite, die du gerade liest, bleibt also so leicht, wie sie aussieht.

emberandoak.com

Hier starten

Der echte Build, laufend in der Seite. Die Live-Vorschau ist eine eingebettete Seite. Drücke Escape, um sie zu verlassen.

Im Vollbild öffnen