Webdesign für einen Kölner Karnevalsverein: Tanzcorps Colonia Rut Wiess

Ein Tanzcorps lebt in der Session von Auftritten. Die Website hat eine klare Aufgabe: Wer eine Tanzgruppe für seine Sitzung, sein Fest oder seine Feier sucht, soll sehen, was ihn erwartet, und eine Anfrage stellen. Das Formular dafür gab es schon, erreichbar über die Schaltfläche „Jetzt Buchen“.

Oben auf der Startseite stand ein Bild-Slider aus einem Plugin. Auf der Mitgliederseite gab es einen Abschnitt für die Ehrungen nach 5, 8, 11 und 15 Jahren aktivem Tanz, mit 60 Namen. Auf dem Handy erschienen die Stufen dort in der Reihenfolge 5, 11, 15, 8.

Farben und Schrift habe ich von der Live-Seite abgenommen: das dunkle Theme-Rot, ein warmes Off-White, Poppins in den Schnitten, die das Theme schon lädt. Auch die Schaltflächen folgen dem Stil des alten Sliders, damit der neue Teil nicht wie ein Fremdkörper wirkt.

Die Seite sollte auf WordPress bleiben. Neue Teile mussten sich also in das vorhandene Theme einfügen, als Code-Baustein, den man in den Seiteneditor einsetzt. Ohne neues Plugin, ohne Bibliothek, mit der Schrift, die das Theme ohnehin lädt, und strikt in den Vereinsfarben.

Für die Startbühne habe ich fünf Varianten gebaut. Gewählt wurde die zentrierte Fassung. Der Vereinsname erscheint in zwei Ebenen: erst als weiße Kontur, die von unten einfährt, dann füllt sie sich. Darunter liegt die Bühne mit Fotos der Tänzerinnen und der Tänzer, getrennt durch eine Lichtkante, die man mit Maus oder Finger verschieben kann.

Über die Fläche ziehen langsame Flammen im dunklen Rot des Vereins, die dem Zeiger folgen. In einem runden Ausschnitt wechselt beim Überfahren das Bild zur Hebefigur, auf dem Handy per Tipp. Die Schaltfläche „Jetzt Buchen“ springt direkt zum Anfrageformular.

Wenn ein Gerät kein WebGL kann oder reduzierte Bewegung eingestellt ist, zeigt die Bühne Fotos und alle Texte. Die Seite bleibt also in jedem Fall benutzbar. Damit das Caching-Plugin der Seite das Skript nicht bis zum ersten Scrollen zurückhält, habe ich die nötigen Ausnahmen in der Einbauanleitung festgehalten.

Auch für die Ehrungen gab es drei Entwürfe. Gewählt wurde eine Ehrenbühne über die volle Breite: Ein Bühnenfoto bleibt beim Scrollen stehen, darauf eine dunkle Karte mit Reitern für die vier Stufen. Die Tafeln wechseln alle drei Sekunden von selbst, bei Hover hält der Durchlauf an, ein Klick beendet ihn.

Die Reihenfolge ist jetzt im Code festgelegt: 5, 8, 11, 15. Sie gilt auf dem Desktop genauso wie auf dem Handy und für Screenreader.

Beide Bausteine sind auf colonia-rutwiess.de eingebaut. Geprüft habe ich die Startbühne auf elf Geräteprofilen von iPhone SE bis Android-Tablet: kein seitliches Scrollen, Konsole ohne Fehler. Mit echter Grafikkarte lief das Scrollen mit 60 Bildern pro Sekunde, auf dem Handyformat auch bei vierfach gedrosseltem Prozessor.

• Startbühne mit Lichtkante, Flammen und Bildwechsel, ohne Plugin
• Ehrentafel mit 60 Namen in vier Stufen und fester Reihenfolge
• Einbauanleitung für den Seiteneditor des Vereins