La Raffinerie
Zwei Standorte, eine Marke: Die Website musste beiden dienen, ohne einen zu verwässern.
- Jahr
- 2026
- Umsetzung
- 4 Wochen
- Stack
- React · Vite · Tailwind · Framer Motion · Vercel
- Design
- Entwicklung
- Lokales SEO für mehrere Standorte
- Texte
Demoversion, von Kayzen Web unter einer Vercel-Adresse veröffentlicht; die endgültige Domain gehört dem Kunden.
- Standorte, eine einzige Domain
- 2
- Lighthouse-Performance
- 95/100
- Lighthouse-Barrierefreiheit
- 100/100
Was gelöst werden musste.
Der Kontext
La Raffinerie ist eine Bar für Craft-Biere, Tapas und Cocktails mit zwei Adressen in Lyon: Saxe (Lyon 3) und Vaise (Lyon 9).
Die Einschränkung
Zwei Standorte werfen ein klassisches Problem im lokalen SEO auf: Entweder man baut zwei Websites und teilt die Domain-Autorität, oder man baut nur eine und wird bei Suchanfragen nach dem Viertel unsichtbar. Hinzu kommen eine Bierkarte, die ständig wechselt, und ein Publikum, das nicht immer weiß, was es wählen soll.
Die Antwort
Eine einzige Domain, eine eigene Seite pro Standort, jede mit vollständigem Eintrag und eigenem Markup. Die Bierkarte wird zum Verkostungsführer: Jedes Bier trägt seinen Stil, seine Bitterkeit, seinen Alkoholgehalt und eine empfohlene Tapas-Kombination. Wir listen nicht auf, wir beraten.
Die Werte bei der Auslieferung.
Lighthouse-Werte der Live-Website. Wir veröffentlichen sie unverändert: Ist einer niedrig, stehen Ursache und Korrekturplan weiter unten, statt verschwiegen zu werden.
Jede gestalterische Entscheidung – und ihr Grund.
Ein Führer statt einer Liste
Filter nach Stil und Bitterkeit, empfohlene Tapas-Kombination für jedes Bier. Ein Gast, der zwischen vierzig Sorten schwankt, bestellt dasselbe wie immer – oder gar nichts.
Jede Adresse hat ihre Persönlichkeit
Eigene Fotos, eigene Atmosphäre und eigene Öffnungszeiten für Saxe und Vaise, auf einer gemeinsamen grafischen Basis. Zwei identische Zwillingsseiten wären von Besuchern wie von Google als Füllmaterial wahrgenommen worden.
Bewegung im Dienst des Materials
Die Einblend-Animationen betonen die Textur – Schaum, Kupfer, Schiefer. Sie verschwinden vollständig, wenn der Nutzer reduzierte Bewegung eingestellt hat.
Farbpalette des Projekts
Schiefer
#22262B
Haupthintergrund
Kupfer
#C0763C
Handlung, Akzente
Schaum
#EFE6D4
Text, helle Flächen
Hopfen
#6C7A3F
Stil-Etiketten
Typografisches System
Überschriften
Bebas Neue
Fließtext
Inter 400
Eine schmale Versalschrift für die Titel – im Register der Craft-Brauerei – ausgeglichen durch eine sehr gut lesbare Sans-Serif auf den Verkostungs-Steckbriefen.
Was unter der Haube steckt.
- React
- Vite
- Tailwind
- Framer Motion
- Vercel
Die Karte als Daten, nicht als HTML
Biere und Tapas liegen in einer typisierten Datendatei. Eine neue Sorte hinzuzufügen, erfordert weder Eingriffe ins Markup noch das Risiko, das Layout zu zerstören.
Maßvolle Animationen
Framer Motion wird nur von Seiten geladen, die tatsächlich animieren. Die Informationsseiten (Anfahrt, Öffnungszeiten) laden davon keine einzige Zeile.
Wie die Website gefunden wird.
Zwei getrennte LocalBusiness-Einträge
Jeder Standort trägt seinen eigenen Knoten mit Adresse, Geokoordinaten und Öffnungszeiten. Ein einziger Block für zwei Adressen hindert Google daran, beide Einträge korrekt zuzuordnen.
Suchanfragen nach Viertel
„Bierbar Saxe“, „Bar Vaise Lyon 9“ statt „Bar Lyon“. Die Viertelseite gewinnt bei Begriffen, auf die die Markenseite nicht zielen kann.
Indexierbare Verkostungsinhalte
Die Bier-Steckbriefe beantworten echte Suchanfragen („bitteres IPA Lyon“, „Tapas zu Amber-Bier“) und bringen Entdeckungs-Traffic, den die Adresse allein nicht einfängt.
Für alle nutzbar.
Seit Juni 2025 schreibt der European Accessibility Act (EU-Richtlinie 2019/882) für einen großen Teil der Online-Dienste digitale Barrierefreiheit vor. Wir berücksichtigen sie schon bei der Konzeption, nicht erst im Nachhinein.
100/100 mit interaktiven Filtern
Die Filter sind native Buttons mit angekündigtem Gedrückt-Status, und die Zahl der Ergebnisse wird nach jeder Änderung in einer Live-Region mitgeteilt.
Was ausgeliefert wurde.
- Startseite
- Saxe (Lyon 3) – vollständiger Eintrag
- Vaise (Lyon 9) – vollständiger Eintrag
- Bierführer
- Tapas und Cocktails
- Kontakt
Der Projektablauf.
Strategie für mehrere Standorte
Abwägung eine Domain / zwei Seiten, Markup pro Standort.
Verkostungsinhalte
Stile, Bitterkeit, Kombinationen: Die Karte wird zum Führer.
Design
Gemeinsame Basis, Persönlichkeit pro Adresse.
Entwicklung
Typisierte Daten, Animationen bei Bedarf geladen.
Was man uns oft fragt.
Weitere Referenzen
DSGVO-Compliance & SaaSKonsent by Kayzen
Ein Banner-Anbieter, der Banner prüft, ist Richter in eigener Sache: Unabhängigkeit war das Produkt.
Offensive Cybersicherheit & SaaSSentinel by Kayzen
Ein Sicherheitsprodukt an Ingenieure verkaufen: Jede Aussage musste nachweisbar sein.
Daten & WetterdienstMétéo Climat France
358 indexierbare Seiten, eine animierte Karte über 72 Zeitpunkte – und keine einzige Zeile Framework.
Derselbe Anspruch, für Ihre Website.
Kostenloses Audit Ihrer aktuellen Website, Angebot innerhalb von 24 Stunden und eine schriftliche Begründung – wie die, die Sie gerade gelesen haben. Zahlung in drei Raten ohne Aufpreis; lokale Förderungen werden vor der Unterschrift geprüft.