01 · Überblick
Ein Magazin, das Abendessen serviert
Für dieses Konzept habe ich mir Ember & Oak als Restaurant vorgestellt, das in Portland seit 2016 über Eichenholz kocht — die Art von Ort, an dem der Raum längst eine eigene Stimme hat, während die meisten Websites unentwegt darüber hinwegreden würden. Also hört die Seite auf, eine Vorstellung zu geben. Sie setzt das Restaurant so, wie es ein Food-Magazin täte — mit Titelkopf, Vorspann, linierten Spalten, Tellern, die bis an den Papierrand laufen, und einer Speisekarte, die man liest, statt an ihr vorbeizuscrollen.
Alles auf der Seite ist Typografie. Es gibt kein Hero-Video, kein Parallax-Showreel, kein Scroll-Jacking. Die einzige Bewegung im gesamten Build ist ein Anheben um acht Pixel beim Eintritt jeder Sektion und ein langsames Driften des Titelfotos — und beides steht sofort still, wenn der Besucher reduzierte Bewegung wünscht.
02 · Die Idee
Saisonal, ohne Eile, auf Papier
Festgelegt wurde das Konzept durch eine einzige Zeile aus dem Restaurant selbst: saisonale Karten, geschrieben vom Willamette Valley, gegart über Eiche, serviert ohne Eile. Ohne Eile wurde zur Designvorgabe. Nichts auf der Seite darf den Leser hetzen — nicht die Übergänge, nicht die Schrift, nicht die Handlungsaufforderungen.
Daraus entstanden drei Regeln, denen der gesamte Build folgt. Die Typografie führt, die Bilder unterstützen — nie umgekehrt. Jede Animation ist langsamer, als der Besucher erwartet. Und das Reservierungsformular steht am Ende der Geschichte, nicht in einer Sticky-Leiste, die Ihnen die Seite hinunter folgt.
Die Schrift führt
Fraunces mit variabler optischer Größe für Display, Libre Franklin für den Text. Die Fotografie sitzt in den Spalten wie Teller in einem Magazin.
Langsamer als erwartet
Eine einzige Easing-Kurve — cubic-bezier(0.33, 1, 0.68, 1) — und Reveals, die fast eine Sekunde brauchen, um zu landen.
Kein Druck
Ein einziges Reservierungsformular, am Fuß der Seite — nachdem Speisekarte, Küchenchef, Raum und Kritiken ihre Argumente vorgebracht haben.
03 · Ziele
Was die Seite leisten musste
Die Speisekarte lesbar machen
Vorspeisen, Hauptgänge und Desserts als drei echte Abschnitte mit Punktlinien und Preisen — die gedruckte Karte, auf dem Bildschirm, in jeder Breite.
Den Raum verkaufen, ohne Slideshow
Zwölf Fotografien, ins Raster gesetzt genau dort, wo der Text sie verdient — statt eines Karussells, das niemand weiterklickt.
Eine Reservierung auf einem Bildschirm
Sechs Felder, eine Live-Region für die Bestätigung und ein Fokuswechsel auf die Meldung, damit Screenreader-Nutzer sie hören.
Unter einem harten Gewichtsbudget bleiben
Kein Framework, keine Karussell-Bibliothek, keine Icon-Schrift. Die gesamte Interaktionsebene musste in wenige Kilobyte handgeschriebenes JavaScript passen.
04 · Bauablauf
Wie es gebaut wurde, der Reihe nach
Die Seite wurde so geschrieben, wie sie sich liest: erst die Struktur, dann das Typosystem, dann die Farbe, zuletzt die zwei Bewegungen. Nichts wurde gestaltet, bevor es ausgezeichnet war, und nichts bewegte sich, bevor es im Stillstand lesbar war.
Semantisches Skelett
Jeder Takt ist eine
<section>mit einemaria-labelledby, das auf die eigene Überschrift zeigt —#story,#menu,#chef,#gallery,#private,#press,#reservations. Die Dokumentstruktur stimmte, bevor eine einzige CSS-Regel geschrieben war.Der Token-Block
Fünfundzwanzig Custom Properties auf
:root: sieben Farben, fünf Tinten-Alphas, zwei Schriftfamilien, eine Easing-Kurve, eine Masthead-Höhe. Kontrastverhältnisse stehen direkt neben den Werten, die geprüft werden mussten.Das Spaltenraster
CSS Grid mit einer benannten Satzspalte, sodass Fließtext auf eine angenehme Zeilenlänge begrenzt bleibt, während Teller und Speisekarte breitere Spuren überspannen.
Fünfzehn Breakpoints als Beweis
Fünfzehn Media Queries, jede gegen ein echtes Umbruchproblem geschrieben statt gegen einen Gerätenamen.
Unter sechs Kilobyte
Mobile Navigation, Scroll-Reveals, Masthead-Schatten, Hero-Drift und das Reservierungsformular — 164 Zeilen, eine IIFE, ein
matchMedia-Guard am Anfang.
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; der Browser ist die einzige Laufzeitumgebung, die sie je gebraucht hat.
├── index.html 32.6 KB — 7 Sektionen, 12 Fotografien, 0 Inline-SVG
├── styles.css 30.2 KB — 25 Custom Properties, 15 Media Queries, 2 Reduced-Motion-Blöcke
└── script.js 5.8 KB — 164 Zeilen: Nav · Reveals · Masthead · Parallax · Formular
Der Stack
- Semantisches HTML
- CSS Grid
- Custom properties
- IntersectionObserver
- matchMedia
- Fraunces
- Libre Franklin
- Vanilla JS
Barrierefreiheit
- aria-expanded
- aria-controls
- aria-labelledby
- aria-live
- aria-hidden
- Escape zum Schließen
- Fokus beim Absenden
06 · Was sich gewehrt hat
Probleme — und was sie geschlagen hat
Eine gedruckte Speisekarte führt das Auge mit Punktlinien vom Gericht zum Preis. Im Web wird das meist mit einer Reihe von Punkten gefälscht, die Screenreader dann laut vorlesen, einen nach dem anderen.
Die Punktlinie wird mit einem wiederholten Hintergrundverlauf auf einem Flex-Abstandhalter gezeichnet. Sie ist Dekoration, nicht Inhalt — assistive Technologie begegnet ihr nie, und sie dehnt sich in jeder Breite perfekt.
Creme auf Creme ist die ganze Palette, und kontrastarme Paletten sind der Ort, an dem Barrierefreiheit leise scheitert — besonders bei Formularrändern, die als Nicht-Text trotzdem 3:1 erfüllen müssen.
Zwei Akzente statt einem. #C4552D zeichnet Linien und Flächen; ein abgedunkeltes #A8431F ist Akzenttext vorbehalten, mit 5.54:1 auf Creme. Formularränder bekamen einen eigenen Token mit 3.6:1, und das Verhältnis steht im Stylesheet direkt daneben.
Reveal-on-Scroll-Animationen verstecken Inhalte standardmäßig. Fällt das Skript aus — oder läuft es nie —, ist die Seite leeres Papier.
Der versteckte Zustand liegt hinter einer Klasse, die das Skript selbst hinzufügt. Kein Skript, keine Klasse, keine versteckten Inhalte: Die Seite rendert in ihrem ruhigen Endzustand und liest sich einwandfrei.
Ein Parallax-Masthead ist der schnellste Weg, eine Restaurantseite billig wirken zu lassen — und der schnellste Weg, sie auf einem Mittelklasse-Smartphone stottern zu lassen.
Ein einziges Transform, gesteuert über scrollY, mit einem Koeffizienten, der niedrig genug ist, um als Tiefe statt als Bewegung wahrgenommen zu werden — und unter prefers-reduced-motion komplett übersprungen wird.
07 · Was bleibt
Die Teile, die bleiben dürfen
Die Herbstkarte
Drei Gänge, gesetzt wie eine gedruckte Karte, Punktlinien inklusive — auf dem Smartphone fließt sie in eine einzelne, lesbare Spalte um, ohne die Preisausrichtung zu verlieren.
Aus dem Speisesaal
Ein Fotoraster, das seinen eigenen Rhythmus bricht — unterschiedliche Spannweiten, unterschiedliche Höhen —, sodass es sich wie eine Doppelseite liest, nicht wie ein Galerie-Widget.
Stimmen & Kritiken
Pressezitate als Pull-Quotes mit der Publikation in Kapitälchen — geliehen ist damit das eine typografische Mittel, das Restaurants sich wirklich verdienen.
Eine Reservierung, kein Funnel
Sechs Felder, Inline-Validierung, eine höfliche Live-Region für die Bestätigung, und der Fokus wandert dorthin — kein Modal, kein Upselling, kein Countdown.
08 · Live starten
Hier ausprobieren
Der echte Build, eingebettet und lauffähig. Er lädt erst auf Abruf — nichts wird geholt, bevor Sie es anfordern.
Live-Vorschau überspringen
Der echte Build, direkt in der Seite. Die Live-Vorschau ist eine eingebettete Seite; mit Escape verlassen Sie sie.
Im Vollbild öffnen ↗
