- Auftrag
- Kompletter Neuaufbau der Schulwebsite
- Umfang
- Konzeption, Design, Entwicklung, Content-Migration, Schulung
- Stack
- WordPress · Individuelles Theme · Vite · Tailwind
- Jahr
- 2026
- Paket
- Plus →
- URL
- Veröffentlichung ausstehend
Ausgangslage
Die Aufgabe
Eine Schulwebsite ist selten „nur" eine Website. Sie ist Aushängeschild, Entscheidungshilfe und Serviceportal zugleich: Eltern verschaffen sich vor der weiterführenden Schule einen ersten Eindruck, Familien suchen Termine und Formulare – und im Hintergrund muss das Ganze von Lehrkräften pflegbar sein, die dafür weder Zeit noch technische Vorkenntnisse mitbringen.
Der bisherige Auftritt lief auf einem in die Jahre gekommenen System und wurde dem nicht mehr gerecht – weder gestalterisch noch technisch, und schon gar nicht bei Datenschutz, Ladezeit und mobiler Nutzung.
- Ein moderner, hochwertiger Auftritt – ruhig, warm, seriös statt verspielt-bunt
- Einfache Pflege durch die Redaktion, ohne HTML und ohne Angst, etwas kaputtzumachen
- Datenschutz auf Schul-Niveau – Fotos von Minderjährigen, externe Einbettungen
- Tempo und Barrierefreiheit als Selbstverständlichkeit, nicht als Zusatz
- Die Inhalte der alten Seite geordnet in die neue Struktur überführen
Haltung & Umsetzung
Der Weg
Ich bin nicht mit einem fertigen Baukasten in das Projekt gegangen, sondern mit einer Haltung: Die Seite sollte ruhig und redaktionell wirken – mehr Magazin als Werbeprospekt. Substanz vor Effekt. Und trotzdem eine eigene Handschrift haben, die man wiedererkennt.
Daraus wurde eine warme, zurückhaltende Designsprache: Papierweiß, ein dunklerer Stein-Ton für Rhythmus, ein tiefes Weinrot als Akzent. Klare Typografie, durchgängig ruhige Bewegungen – langsame, weiche Übergänge statt hektischem An und Aus.
Statt eines aufgeblähten Universal-Themes entstand ein individuelles WordPress-Theme – nur das, was die Schule wirklich braucht, dafür genau richtig. Und jede Entscheidung habe ich auch daran gemessen: Kann eine Lehrkraft das später selbst pflegen, ohne mich zu fragen?
Responsive
Ein Auftritt, jedes Gerät.
Vom großen Bildschirm bis zum Handy in der Hand: Struktur, Ruhe und Lesbarkeit bleiben erhalten – nur die Anordnung passt sich an.
Das Herzstück
Ein roter Faden – wörtlich.
Die Leitbild-Sektion stellt die drei prägenden Stärken der Schule vor – Sprachen, Fahrten & Austausch, Musik & Kultur. Der Wunsch des Kunden: etwas Verspieltes, eine Linie, die beim Scrollen mitläuft. Daraus wurde die tragende Metapher des Abschnitts – der rote Faden. Im Deutschen ist er das verbindende Leitmotiv, genau das, was ein Leitbild ausmacht.
Die weinrote Linie ist eine einzige SVG-Kurve, die sich beim Scrollen selbst zeichnet – im Tempo, in dem man liest. Das Besondere: Sie ist nicht fest gezeichnet, sondern wird live aus der echten Geometrie der Seite berechnet. Das Skript misst die tatsächlichen Positionen von Textzeilen und Bildern und konstruiert den Pfad so, dass er sich um Texte und Bilder herumwindet, statt hindurchzulaufen – mit kleinen, handschriftartigen Schleifen in den freien Bändern dazwischen.
Robust gebaut: Ein Prüfskript tastet hunderte Punkte entlang der Linie ab und stellt sicher, dass sie bei keiner Bildschirmbreite Text oder Bild schneidet – passt der Platz nicht, weicht sie automatisch auf eine ruhigere Route aus. Bei „Bewegung reduzieren" liegt sie still da, mobil wird sie ausgeblendet, und ohne JavaScript erscheint eine dezente statische Linie.
Einblick
Die Startseite im Ganzen
Fahren Sie mit der Maus über das Bild – die Ansicht scrollt langsam durch die komplette Startseite, vom Hero bis zum Footer.
Für die Redaktion gebaut
Selbst pflegbar – ohne Angst, etwas kaputtzumachen.
Die schönste Website nützt einer Schule wenig, wenn nur der Entwickler sie ändern kann. Pflegbarkeit war deshalb kein Nebenthema, sondern ein Design-Ziel.
-
Alles Wichtige ohne Code
Hero, Portal-Karten, Grußwort, die Leitbild-Stärken – steuerbar über den WordPress-Customizer, mit Live-Vorschau.
-
Passgenaue Redakteurs-Rolle
Die Redaktion darf genau das, was sie braucht. Technisch heikle Bereiche sind gesperrt – man kann nichts versehentlich zerlegen.
-
Editor = fertige Seite
Schriften, Farben und Abstände des Frontends sind in den Editor gespiegelt: echtes WYSIWYG, keine Überraschung nach dem Veröffentlichen.
-
Termine & Farben im Dashboard
Neue Terminkategorien samt Farbe legt die Redaktion selbst an – inklusive Farbwähler, ohne Entwickler.
-
Selbst-anpassende Elemente
Bildunterschriften werden automatisch zu Karten, die Leitbild-Linie rechnet sich bei Textänderungen neu.
-
Anleitung ohne Fachjargon
Eine bebilderte Schritt-für-Schritt-Anleitung für die Lehrkräfte – inklusive Bilder-Verkleinern vor dem Hochladen.
Solide gebaut
Sicher, schnell, zugänglich.
Für eine Schule ist Datenschutz keine Kür, sondern Pflicht – es geht um die Daten von Kindern und Jugendlichen. Entsprechend sorgfältig ist der Unterbau.
-
Zwei-Klick-Lösung
Karten und Videos laden erst nach aktiver Zustimmung. Bis dahin: keine Daten an Dritte, keine Cookies, kein Tracking.
-
Content-Security-Policy
Eine bewusst enge Liste erlaubter Einbettungsquellen – vom Beobachten bis zum Durchsetzen umschaltbar.
-
Schlank ausgeliefert
Moderner Build mit Vite: gebündelte Stile und Skripte im niedrigen zweistelligen Kilobyte-Bereich.
-
Kein Layout-Ruckeln
Bildflächen sind per aspect-ratio reserviert – beim Nachladen springt nichts.
-
Barrierefrei
„Bewegung reduzieren" respektiert, semantische Struktur, Tastaturbedienung, sichtbarer Fokus.
-
Läuft auch ohne JavaScript
Progressive Enhancement: Die Animationen sind das Sahnehäubchen, nicht die Statik.
Messbar
Das Ergebnis
Am Ende steht eine Website, die drei Dinge gleichzeitig schafft, die sich sonst oft widersprechen: gestalterisch eigenständig und detailverliebt, technisch solide, schnell und datenschutzkonform – und trotzdem von Menschen ohne technischen Hintergrund pflegbar.
- Eigenständiges Design mit individuellem WordPress-Theme statt Baukasten
- Von der Schule selbst pflegbar – mit echtem WYSIWYG-Editor
- Datenschutzkonform mit Zwei-Klick-Lösung für externe Inhalte
- Schnelle Ladezeiten, kein Layout-Ruckeln
- Barrierefrei und ohne JavaScript nutzbar
- Die scrollgekoppelte Fadenanimation als unverwechselbares Herzstück
Klingt das nach einem Projekt, das Sie auch starten wollen?
Erzählen Sie mir, was Sie vorhaben. Kostenlos, unverbindlich – binnen 24 Stunden eine Antwort.
Oder schreiben Sie mir direkt: kontakt@webseitz-webdesign.de