Ben's Catering – Konzept-Website für Streetfood, Buffet und Foodtruck
Ben's Catering macht American Streetfood in Bremen – als Buffet, Catering, Lieferservice und mit dem Foodtruck. Mein Konzept bringt das auf eine Seite: laute Typografie, echte Fotos, vier klare Angebote und ein Anfrageformular, das direkt aufs Handy geht. Unbeauftragt, als Vorschlag.
- Zeitraum
- Sommer 2026
- Status
- Online als Konzept – kein Auftrag
- Art
- Konzept für einen realen Betrieb, kein Auftrag
- Branche
- Catering / Streetfood
- Umfang
- 1 Seite (One-Pager) mit Anfrageformular
- Technik
- HTML/CSS/JS, Anton + Archivo + Spline Sans Mono self-hosted
Konzept: unbeauftragter Entwurf für einen echten Betrieb – nicht der offizielle Auftritt.
Ausgangslage
Ein Caterer mit Foodtruck lebt von Sichtbarkeit: Wo steht der Wagen, was gibt es, und wie buche ich das für meine Feier? Ben's Catering ist auf Instagram aktiv, aber eine Website, die Buffet, Catering, Lieferservice und Foodtruck in einem Rutsch erklärt und Anfragen einsammelt, fehlte aus meiner Sicht.
Ich habe das Konzept ohne Auftrag gebaut. Die Marke ist laut, direkt und jung – die Website sollte das nicht glattbügeln, sondern verstärken. Deshalb keine Pastellfarben, keine Schnörkel: Schwarz, Weiß, riesige Buchstaben und Fotos, die nach Fett und Feuer aussehen.
Wie bei allen meinen Gastronomie-Websites steht am Ende ein klares Ziel: die Anfrage. Alles auf der Seite führt dorthin. Wer statt Anfragen direkt Bestellungen annehmen will, findet im Pizza-Blitz-Prototyp den nächsten Schritt.
Ziele
6 Ziele, an denen sich das Projekt messen lässt
- Vier Angebote (Buffet, Catering, Lieferservice, Foodtruck) auf einen Blick unterscheidbar machen
- Die Marke laut und eigenständig zeigen – kein Vorlagen-Look
- Standorte und Öffnungszeiten für Foodtruck-Gäste prominent
- Catering-Anfrage direkt aufs Handy des Betriebs
- Instagram sichtbar einbinden, ohne Fremdskripte zu laden
- Schnell und mobil zuerst
Lösung
Was gebaut wurde – Baustein für Baustein
Hero mit Riesen-Typografie
Der Name füllt den Bildschirm, darunter ein Satz und zwei Aktionen. Kein Slider, kein Video – ein Statement.
Story-Abschnitt
„Aus Leidenschaft“: wer dahintersteckt, mit echtem Teamfoto statt Stock.
Karte mit Fotos
Burger, Chicken und Co. mit echten Produktfotos als WebP – die Karte ist eine Galerie, keine Tabelle.
Vier Angebote als Karten
Buffet, Catering, Lieferservice, Foodtruck – jede Karte sagt in zwei Sätzen, für welchen Anlass sie passt, und führt zur Anfrage.
Standorte und Festivals
„Findet uns“: Wo der Wagen steht, dazu Öffnungszeiten und Adresse mit Zwei-Klick-Karte.
Instagram-Grid und Bewertungen
Statisches Bild-Grid, das auf die echten Posts verlinkt, plus Bewertungs-Abschnitt – ohne Live-Embeds, ohne Layout-Shift.
Catering-Anfrage → Telegram
Anlass, Personenzahl, Datum, Kontakt – das Formular geht über meinen Worker sofort als Nachricht raus.
Design
Die Farbwelt ist radikal reduziert: Schwarz auf Weiß, Weiß auf Schwarz, dazu feine graue Linien. Die Farbe kommt ausschließlich aus den Fotos – Burger, Flammen, der Wagen. Dadurch wirken die Bilder doppelt so stark.
Typografisch trägt die Anton die Seite: schmal, schwer, plakativ – wie Schilder am Foodtruck. Der Lauftext läuft in der Archivo, technische Angaben wie Öffnungszeiten in der Spline Sans Mono, die den Werkstatt-Charakter unterstreicht. Alle drei Schriften self-hosted.
Das Layout arbeitet mit harten Kanten, vollen Breiten und viel Größe. Sektionen sind durch Linien statt Hintergrundfarben getrennt. Die Seite duzt – so spricht die Marke mit ihren Gästen, auch auf Instagram.
Technik
7 Bausteine – und warum genau diese
Vanilla HTML/CSS/JS
Ein One-Pager mit drei Dateien – schnell und ohne Build wartbar.
Anton + Archivo + Spline Sans Mono (self-hosted)
Plakative Typografie ohne Google-Fonts-Verbindung.
WebP-Fotos
Echte Fotos vom Betrieb (Burger, Team, Wagen) als WebP – groß in der Wirkung, klein in der Datei.
Cloudflare Worker /contact
Catering-Anfragen ohne Drittanbieter, sofort per Telegram, mit Spam-Schutz.
Statisches Instagram-Grid
Zuverlässig, ohne Meta-Skript und ohne Layout-Sprünge beim Laden.
JSON-LD Restaurant
Adresse, Geokoordinaten und Öffnungszeiten strukturiert für Google.
Eigener Consent-Tracker
Besucher und Anfragen messen, ohne Google Analytics.
Antippen zeigt, warum ich mich dafür entschieden habe.
SEO
5
- Indexierbar (index, follow) mit max-image-preview:large
- Meta-Title mit Angebot und Ort: „Premium Catering & Lieferservice · Bremen“
- JSON-LD vom Typ Restaurant mit Adresse, Geokoordinaten und Öffnungszeiten; dazu WebSite
- Sitemap und robots.txt vorhanden, OG-Bild für Messenger-Vorschau
- Sprechende Sektions-IDs für Ankerlinks (Karte, Angebote, Standorte, Kontakt)
Barrierefreiheit
5
- Schwarz/Weiß-Kontrast weit über dem WCAG-Minimum
- Skip-Link, semantische Landmarks, genau eine H1
- Formularfelder mit Labels, große Touch-Ziele
- Riesige Überschriften skalieren über clamp() – kein Überlaufen am Handy
- Reveal-Animationen respektieren prefers-reduced-motion
Datenschutz
5
- Schriften self-hosted, keine externen CDNs
- Google Maps nur nach Zwei-Klick-Zustimmung
- Instagram-Grid ohne Meta-Skript – die Verbindung entsteht erst beim Klick auf einen Post
- Formulardaten über den eigenen Worker an Telegram
- Consent-Tracker: keine Messung vor der Einwilligung
Performance
Gemessen am 16. September 2026, mobil (simulierte 4G-Drosselung) mit Lighthouse.
- Fonts
- self-hosted, 0 externe Requestsdrei Schriftfamilien als WOFF2
- Fotos
- WebP statt PNGausgeliefert wird nur WebP
- statisches Grid statt Embedkein Fremdskript
Ablauf
5 Schritte von der Idee bis online
Marke lesen
Instagram-Auftritt, Tonfall und Fotos des Betriebs analysiert: laut, direkt, American Streetfood.
Gestaltungsrichtung
Schwarz-Weiß mit Plakatschrift festgelegt – die Farbe kommt aus den Fotos.
One-Pager bauen
Hero, Story, Karte, Angebote, Standorte, Instagram, Bewertungen, Öffnungszeiten, Anfrage.
Fotos optimieren
Team, Wagen und Produktfotos als WebP, Favicon und OG-Bild aus dem Logo.
Formular anbinden
Catering-Anfrage über den Worker an Telegram, Spam-Schutz aktiv.
Ergebnis
Was am Ende belegbar dasteht
- One-Pager online unter eigener Subdomain, indexierbar
- Anfrageformular getestet: Nachricht kommt per Telegram an
- Keine externen Requests für Fonts oder Instagram; Karte nur nach Klick
- Konzept ohne Auftrag – dem Betrieb als Vorschlag zugänglich
Learnings
Was ich mitnehme
Schwarz-Weiß ist keine Sparlösung, sondern eine Entscheidung. Sie funktioniert nur mit starken Fotos – die hatte der Betrieb.
Riesige Typografie braucht sorgfältiges clamp() und Tests am Handy, sonst läuft die H1 über.
Für Foodtrucks ist „Wo seid ihr?“ die wichtigste Frage. Dieser Abschnitt gehört weiter nach oben, als ich ihn zuerst hatte.
Fragen zum Projekt
Häufige Fragen
Ist Ben's Catering ein Kunde?
Nein. Es ist ein Konzept ohne Auftrag für einen realen Bremer Betrieb. Die Seite ist als Konzept gekennzeichnet.
Warum duzt die Seite, obwohl Sie sonst siezen?
Die Marke duzt ihre Gäste – auf Instagram und am Wagen. Eine Website, die plötzlich siezt, würde fremd wirken. Der Ton folgt der Marke, nicht mir.
Kann ich für mein Catering-Unternehmen so eine Seite bekommen?
Ja. Ein One-Pager mit Angeboten, Standorten und Anfrageformular ist für Caterer und Foodtrucks meist die richtige Größe – siehe Landingpage.
Lässt sich das Anfrageformular auch an eine E-Mail schicken?
Ja. Der Worker kann parallel zu Telegram auch E-Mails auslösen. Telegram hat sich bewährt, weil die Nachricht sofort auf dem Handy ist.
Passende Leistungen
Das steckt dahinter
Ähnliches Projekt?
Sie brauchen so etwas für Ihren Betrieb?
Schreiben Sie mir, was Sie vorhaben. Ich sage Ihnen ehrlich, was sinnvoll ist, und nenne einen Festpreis.