StrategieBrandguideDesignguideWebdesignEntwicklungBackend zur SelbstpflegeDatenschutz
BootKamp Katja
Katja Rühl brauchte für ihr Outdoortraining eine Website, die jedes Angebot klar zeigt und die sie selbst pflegt: entstanden ist eine handgebaute Seite mit eigenem Backend zur Selbstpflege.
- Branche
- Outdoortraining
- Ort
- Butzbach (Pohl-Göns)
- Zeitraum
- August bis Oktober 2026
- Website
- www.bootkampkatja.de
Eine Website für Outdoortraining, die Katja selbst pflegt
Was gefragt war
Katja Rühl bietet mit BootKamp Outdoortraining in der Gruppe an, in Pohl-Göns bei Butzbach. Dienstags läuft Functional Fitness, samstags HYROX Training draußen, dazu kommen Teamtraining für Vereine und Mannschaften sowie der BootKamp Challenge Parcours für Gruppen.
Ihr Angebot hatte sich weiterentwickelt und kam auf der bisherigen Website nicht zur Geltung. Gebraucht wurde ein Auftritt, der jedes Angebot klar zeigt, bei Google in Butzbach und Umgebung gefunden wird und zum ersten Probetraining führt. Die Inhalte wollte Katja danach selbst pflegen können.
Die Ziele
- Jedes Angebot mit eigener Seite und klarem Weg zur Buchung
- Mehr Probetrainings und Anfragen, auch von Vereinen und Mannschaften
- Den Challenge Parcours bekannter machen
- Gefunden werden in Butzbach und Umgebung
- Texte, Bilder und Inhalte selbst ändern, ohne Agentur und ohne CMS
Was ich gemacht habe
Briefing und strategisches Onboarding
Positionierung, Zielgruppen, Wettbewerb im Umkreis und fünf Kernsätze für die Website in einem Dokument.
Brandguide
zehn Kapitel mit Farben aus der Logodatei, gerechneten Kontrastwerten, Sprache, Bildwelt, Gestaltungselementen und Leitplanken für Print.
Designrichtungen
drei Richtungen am selben Ausschnitt mit demselben Text, daraus die finale Richtung D.
Designguide und Komponentenbibliothek
Farben, Schrift in sechs Stufen, Knöpfe, Abstände, Raster und Zustände, dazu alle Bausteine in einem zentralen Stylesheet.
Webdesign
Entwürfe in Figma für Rechner und Handy samt Formular und Menüzuständen.
Entwicklung
statische Website in HTML, CSS und JavaScript ohne CMS, ein Bauskript erzeugt alle Seiten aus einmal gepflegten Bausteinen.
Backend zur Selbstpflege
eigenes Werkzeug in PHP, mit dem Katja Texte, Bilder, Kurskacheln, Angebotsblöcke, Abschnitte, Kontaktdaten und Rechtstexte direkt auf der Seite ändert und veröffentlicht.
Formulare
zwei Anfrageformulare für Einzelpersonen sowie Vereine und Mannschaften mit Versand über SMTP und Danke-Seite.
Datenschutz und Recht
Zustimmungsfenster, Cookie-Richtlinie, Datenschutz, Impressum und Teilnahmebedingungen in 20 Kapiteln als pflegbare Seite.
SEO-Grundlagen
eigener Seitentitel und eigene Beschreibung je Seite mit Ort und Angebot, Sitemap, robots.txt und Weiterleitungen der alten Adressen.
Was dieses Projekt ausmacht BootKamp Katja im Detail
Brandguide BootKamp KatjaAuszug
Regel 1
Orange ist Fläche, nie Schrift
Orange auf Weiß ist nicht lesbar, deshalb ist Orange auf der Seite immer Fläche und nie Schrift. Was auf Orange steht, setze ich dunkel.
Regel 2
Katja pflegt, die Gestaltung bleibt
Das Werkzeug ist auf Inhalte ausgelegt. Katja ändert Texte, Bilder und Angebote selbst, die Gestaltung bleibt dabei immer stimmig.
Steckbrief BootKamp KatjaAuszug
- Zeitraum
- August bis Oktober 2026
- Ort
- Butzbach (Pohl-Göns)
- Branche
- Outdoortraining
Eine gemalte Kante
Zwischen den Abschnitten sitzt eine gemalte Kante, die ich vom Pinselstrich im Logo abgeleitet habe. Jede ist anders gezeichnet, damit sie nach Pinsel aussieht und nicht nach Effekt.
Nur HyroXOut ist dunkel
Jedes Angebot hat seine eigene Seite mit demselben Aufbau. Nur HyroXOut habe ich dunkel gestaltet, damit das härtere Format sofort anders wirkt.
Ein Backend, das die Kundin selbst bedient
Katja öffnet ihre Seite, klickt in einen Text und schreibt. Bevor etwas online geht, zeigt das Werkzeug Vorher und Nachher und jeder Stand lässt sich zurückholen.
Wie es lief
Briefing und Onboarding
Aus dem Briefing entstand ein strategisches Onboarding mit Positionierung, Zielgruppen und der Kernaussage „Gefordert, nicht ausgepowert.“
Marke und Design
Aus Brandguide, drei Designrichtungen und Katjas Auswahl entstand ein festes Design für alle Seiten.
Erste Fassung
Ich habe 15 Seiten gebaut, jedes Angebot mit eigener Seite.
Inhalte und Selbstpflege
Katjas eigene Texte und Bilder kamen auf die Seite und seitdem pflegt sie ihre Inhalte mit einem eigenen Backend selbst.
Livegang
Die Website ging auf bootkampkatja.de online.
Das Projekt in Bildern
Kurse und Termine, die Google lesen kann
BootKamp Katja ist ohne CMS von Hand gebaut und Katja pflegt die Inhalte selbst. Damit Google, KI-Suchsysteme und jeder Mensch Kurse, Termine und Angebote verstehen, steckt unter der Oberfläche genauso viel Arbeit wie in der Gestaltung.
{
"@context": "https://schema.org",
"@type": "Course",
"name": "OutFit, Functional Fitness",
"hasCourseInstance": {
"@type": "CourseInstance",
"courseWorkload": "PT1H",
"location": { "name": "Pohl-Göns, Butzbach" },
"courseSchedule": {
"@type": "Schedule",
"repeatFrequency": "P1W",
"byDay": "https://schema.org/Tuesday",
"startTime": "18:00"
}
},
"offers": [
{ "@type": "Offer", "name": "Probetraining" },
{ "@type": "Offer", "name": "10er-Karte" }
]
}Strukturierte Daten
- LocalBusiness und SportsActivityLocation mit Region
- Course mit Wochentermin für OutFit und HyroXOut
- Service für Teamtraining und Challenge Parcours
- FAQPage auf Startseite, Angebotsseiten und Fragen
- Person mit Fachgebieten auf der Seite Über mich
SEO und GEO
- Eigener Titel und Beschreibung je Seite mit Ort
- Genau eine H1 pro Seite
- Canonical, sitemap.xml und robots.txt
- llms.txt für KI-Suchsysteme
- Weiterleitungen alter Adressen
Technik und Pflege
- Handgebaut in HTML, CSS und JavaScript, ohne CMS
- Bauskript hält Kopf, Fuß und Bausteine genau einmal
- Content Security Policy und lokale Schriften
- Eigenes Backend zur Pflege direkt auf der Seite
- Vorher und Nachher vor dem Veröffentlichen
Barrierefreiheit und Datenschutz
- Ausgerichtet an WCAG 2.2 AA, Kontraste gerechnet
- Klickflächen ab 44 px, sichtbarer Fokus, Sprungmarke
- Kein Tracking, keine Marketing-Cookies
- Kursplan und Karte verlinkt statt eingebettet
- Formulare mit Spamschutz, ohne Speicherung
- 14
- Seiten mit eigenem Titel und eigener Beschreibung
- 0
- Tracking- und Marketing-Cookies
- 2
- Anfrageformulare, die nichts speichern
Was jetzt steht
- Eine handgebaute Website ohne CMS auf bootkampkatja.de mit eigener Seite für jedes Angebot
- Ein Brandguide, ein Designguide und eine Komponentenbibliothek als feste Grundlage
- Ein eigenes Backend, mit dem Katja Inhalte direkt auf der Seite ändert, vor dem Veröffentlichen Vorher und Nachher sieht und jeden Stand zurückholen kann
- Zwei Anfrageformulare, die nichts speichern und ohne Drittanbieter senden
- Kein Tracking, keine fremden Schriften, Karte und Kursplan verlinkt statt eingebettet
- Katjas eigene Texte und echte Fotos aus ihren Trainings
Website www.bootkampkatja.de
Paul versteht sein Handwerk zu 100 %! Von der ersten Kontaktaufnahme bis zum Go-live meiner neuen Website habe ich mich zu jedem Zeitpunkt hervorragend betreut gefühlt. […] Er hat meine Vorstellungen von Anfang an verstanden und sie genauso umgesetzt, wie ich es mir gewünscht habe. […] Das Ergebnis ist eine Website, die genau zu mir und meinem Unternehmen passt. […]
Alle Bewertungen stammen aus meinem Google-Unternehmensprofil und sind dort einsehbar. Google prüft die Echtheit, ich übernehme sie unverändert.
Eine Website, die du selbst pflegst
Katja ändert ihre Inhalte direkt auf der Seite, sieht vor dem Veröffentlichen Vorher und Nachher und kann jeden Stand zurückholen. Wenn du deine Website auch selbst in der Hand haben willst, zeige ich dir in 30 Minuten den Weg dahin.
Passende Leistungen WebdesignSEO und GEOBranding