SynectosBorkum
Projektplätze frei

Referenz / Website

Brottasche, Bar und Bühne.Eine Website, die den Abend mitscrollt.

Café und Bar an der Luxemburger Straße: Die Website erzählt den Tag in Schichten, vom Flat White bis zum Drink am Abend, mit einer Brottasche, die sich beim Scrollen füllt, Falstaff 91 mit Beleg und drei Klicks bis zur Tischanfrage.

Case lesen
Kunde
Kleine Freiheit
Ort
Köln-Sülz
Zeitraum
seit September 2026
Leistung
Website: Übernahme, Anfragewege, SEO
Status
In Arbeit, vor Go-live
03 / 03
KLEINE FREIHEIT · REFERENZ · SYNECTOS · KLEINE FREIHEIT · REFERENZ · SYNECTOS · KLEINE FREIHEIT · REFERENZ · SYNECTOS

Die Seite in Bewegung

Scroll weiter, die Seite scrollt mit.

  1. 01

    Ankommen

  2. 02

    Ausgezeichnet, nicht abgehoben

  3. 03

    Die Idee in einem Satz

  4. 04

    Schicht für Schicht

  5. 05

    Vom Tag in die Nacht

  6. 06

    Ein Grund wiederzukommen

  7. 07

    Tisch anfragen

Anfrage

Der Name in großen Buchstaben, daneben die Brottasche. Zwei Knöpfe reichen: Karte entdecken und Tisch anfragen.

Kleine Freiheit · Startseite01 / 07

Echte Aufnahme der Startseite, Stand September 2026 vor Go-live. Die Brottasche-Sequenz der Seite ist KI-generiert (Veo 3.1), die Herkunft der übrigen Bilder wird vor dem Go-live geprüft und gekennzeichnet.

Ausgangslage

Schöne Fassade, wackliges Fundament.

Der Prototyp der Kleinen Freiheit sah fertig aus und war es nicht: Der Build brach ab, Rechtstexte fehlten, Medien und Login hingen wie beim Schwesterprojekt an der Plattform.

Für ein Café mit Programm ist die Veranstaltungsseite der Grund, wiederzukommen. Frei erfundene Termine sind dort ein Vertrauensbruch, sobald jemand vor verschlossener Tür steht. Auf der Startseite stehen sie deshalb als Beispieltermine, bis echte vorliegen.

Der Weg zur Anfrage

Tisch, Platz oder eigenes Event. Jeder Anlass hat seinen Weg.

Drei Klicks von der Startseite bis zur abgeschickten Tischanfrage. Wer mehr vorhat, findet auf der Veranstaltungsseite zwei weitere Wege.

Reservierungsseite der Kleinen Freiheit mit den Fragen Wer kommt, Wann und Wie erreichen wir dich
Tisch anfragen: eine Seite, drei Fragen
  1. 01
    Vertrauen

    Eckdaten statt Fußnote

    Öffnungstage, Uhrzeit und bis zu zwölf Personen online stehen direkt neben dem Formular, nicht versteckt darunter.

  2. 02
    Anfrage

    Wer kommt?

    Name und Personenzahl, mehr braucht der erste Schritt nicht. Für größere Runden gibt es die Eventanfrage.

  3. 03
    Anfrage

    Wann?

    Vergangene Tage und die Ruhetage Sonntag und Montag nimmt das System gar nicht erst an. Keine Anfrage für einen Abend, an dem niemand da ist.

  4. 04
    Vertrauen

    Eine Anfrage, keine Buchung

    Der Tisch ist nach persönlicher Rückmeldung verbindlich reserviert. So steht es auch direkt links daneben.

Veranstaltungsseite der Kleinen Freiheit mit den Knöpfen Event anfragen und Zum Event anmelden
Veranstaltungen: selbst feiern oder einen Platz sichern
  1. 05
    Anfrage

    Event veranstalten

    Geburtstag, Workshop oder Teamabend: Ein Assistent fragt Anlass, Rahmen und Kontakt ab, für vier bis 120 Gäste, mit Übersicht vor dem Absenden.

  2. 06
    Anfrage

    Platz bei einem Termin

    Für einzelne Veranstaltungen reicht ein Klick auf den Termin und eine kurze Anfrage für bis zu acht Personen.

Gefunden werden

Was Google sieht, steht schon im Kopf der Seite.

Der Server setzt für jede Seite Titel, Beschreibung und strukturierte Daten, bevor der Browser etwas baut. Suchmaschinen lesen das Lokal als Café, Restaurant und Bar in einem.

  1. 01

    Drei Typen in einem Eintrag

    Café, Restaurant und Bar mit Adresse, Küche, Instagram und dem Link zur Falstaff-Bewertung.

  2. 02

    Jede Seite mit eigenem Kopf

    Titel, Beschreibung und Vorschau kommen fertig vom Server, für Karte, Veranstaltungen und Reservierung einzeln.

  3. 03

    Sitemap und robots.txt

    Sechs Adressen in der Sitemap, echte 404 für alles, was es nicht gibt.

<title>Karte | Kleine Freiheit Köln-Sülz</title><meta name="description" content="Entdecke die Karte der Kleinen Freiheit in Köln-Sülz: vegane Pockets, Kaffee und Drinks in entspannter Bar-Atmosphäre."><meta name="robots" content="index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1"><script type="application/ld+json">  "@type": ["CafeOrCoffeeShop", "Restaurant", "BarOrPub"],  "servesCuisine": ["Vegan", "Plant-based", "Street food"],  "address": { "streetAddress": "Luxemburger Straße 156", "postalCode": "50937", "addressLocality": "Köln" },  "sameAs": ["https://www.instagram.com/kleinefreiheitkoeln/", "https://www.falstaff.com/de/streetfood/kleine-freiheit"]</script>// Titel, Beschreibung und Daten setzt der Server für jede Seite einzeln
Server-HTML der Karte, ohne JavaScript abgerufen (Auszug)

Die Seite

Desktop und Handy, so wie Gäste sie sehen.

Echte Screenshots der Seite im aktuellen Stand, keine Mockups. Was hier zu sehen ist, läuft so im Browser.

Karte der Kleinen Freiheit am Desktop
01Karte am Desktop
Startseite der Kleinen Freiheit auf dem Handy
02Startseite auf dem Handy
Karte der Kleinen Freiheit auf dem Handy
03Karte auf dem Handy

Im Detail

Sektion für Sektion. Die Momente, die die Seite ausmachen.

Wischen oder scrollen
Falstaff-Band mit 91 von 100 Punkten über der Sektion mit der Idee des Cafés
01Falstaff 2026: 91 Punkte, gleich unter dem Einstieg
Sektion Unsere kleine große Idee mit Einleitungstext
02Die Idee: Kaffee, Brottaschen, Drinks ohne Aufpreis-Attitüde
Beginn der Scroll-Geschichte: leere Brottasche in einer Hand
03Brottasche, Schicht eins: leer. Szene aus der KI-generierten Sequenz der Seite
Mittlerer Zustand der Scroll-Geschichte: veganes Steak in der Brottasche
04Brottasche, Schicht drei: veganes Steak. KI-generierte Sequenz
Endzustand der Scroll-Geschichte: fertige Brottasche mit Kräutern und Sauce
05Brottasche, Schicht fünf: Kräuter und Sauce. KI-generierte Sequenz
Sektion From day to night im Tageszustand
06Vom Tag
Sektion From day to night in der blauen Stunde
07in die Nacht
Sektion Hier geht was mit drei Veranstaltungen und Platz-anfragen-Knöpfen
08Veranstaltungen, als Beispieltermine gekennzeichnet

Unsere Arbeit

Was Synectos gemacht hat. Und womit.

Kein Feature-Katalog, sondern die Arbeit hinter dem Ergebnis. Klapp auf, was dich interessiert.

React 19ViteExpress / tRPCSchema.orgPlaywright / Vitestn8n

Ergebnis

Was zählt, steht hier mit Quelle.

91Falstaff-Punkte, auf der Seite belegtStreetfood Guide 2026, mit Quelle verlinkt
5Schichten in der Scroll-Geschichtevon der leeren Brottasche bis zur Sauce
3Klicks bis zur Tischanfragevon der Startseite, plus Name, Datum und E-Mail
46automatische Tests, grünAblauf, Formulare, Rendering
Build repariert, kein Fremdserver mehr in der AuslieferungTisch, Veranstaltung, Event: drei Wege zur AnfrageBeispieltermine auf der Startseite gekennzeichnetFalstaff 91 mit Quelle belegtGo-live nach Freigabe von Fakten und Rechtstexten
GEBAUT · GEPRÜFT · ÜBERGEBEN · GEBAUT · GEPRÜFT · ÜBERGEBEN · GEBAUT · GEPRÜFT · ÜBERGEBEN
01

Was vor dem Go-live geprüft wird

Die Liste dahinter

Was muss an einer KI-generierten Website geprüft werden, bevor sie live geht?

Vier Dinge, in dieser Reihenfolge. Erstens Abhängigkeiten: Wo liegen Medien, Login und Daten, und was passiert, wenn der Anbieter abschaltet. Zweitens Sicherheit: offene Uploads, Schlüssel im Code, fehlende Grenzen für Anfragen. Drittens Fakten: Adresse, Zeiten, Preise, Auszeichnungen, Termine, jeder Wert vom Betreiber bestätigt, nichts aus Drittquellen. Viertens Recht: Impressum, Datenschutz, Einwilligungen für Karten und Schriften. Erst wenn alle vier stehen, bekommt die Seite eine Domain.

Nächste ReferenzEine Surfschule, die nach Wind und Tide plant.Ohne Telefonkette.
KI-generiert

Referenz / Website

Was soll bei dir als Nächstes laufen?

Erzähl uns von deinem Betrieb, deinem Produkt oder dem Ablauf, der endlich leichter werden soll.