Sektionsvarianten-Umschalter

Version 1.0.0·Stand 2026-09-30·Markdown · kostenlos

Bei jeder neuen Sektion, jedem neuen Hero-Bild oder Umbau mit Spielraum automatisch mehrere Varianten bauen und einen auffälligen Magenta-Umschalter direkt an die Sektion setzen. Entschieden wird im echten Seitenkontext statt an Einzel-Screenshots, danach wird alles Übrige sauber zurückgebaut.

🧭Worum es geht

Von der Entscheidung, wann Varianten nötig sind, über festes Aussehen (Pill-Knöpfe in #c2185b), Markup-Vertrag mit data-Attributen und rund 25 Zeilen Vanilla-JS mit Direktlink bis zu Pflicht-Proben, Rückbau nach der Wahl und grep-Sperre vor dem Livegang. Gilt für Sektionen, Layouts und Bildvarianten innerhalb einer bestehenden Seite.

📄Was die Datei enthält

Entscheidungstabelle: wann Umschalter mit A/B/C, wann Aktuell/Alternative, wann direkt umsetzen
Fertiges CSS für die Magenta-Pill-Knöpfe inklusive Fokus-Stil und No-JS-Fallback
Markup-Vertrag mit data-studien, data-studienwahl, data-studie und data-studie-ziel
Kompakte Vanilla-JS-Referenz: Umschalten per hidden, aria-pressed, Direktlink per URL-Parameter, replaceState
Pflicht-Proben je Variante: Klick, Direktlink, aria-pressed, hidden, saubere Konsole
Rückbau-Regeln und grep-Sperre im Build vor dem echten Livegang

🎯Welche Probleme sie löst

Varianten im echten Seitenkontext vergleichen statt an losgelösten Screenshots
Einen Link zu genau einer Variante weitergeben, ohne Seite neu zu bauen
Varianten unterscheiden sich im Prinzip (Layout, Interaktion, Informationsarchitektur), nicht nur in der Farbe
Der Umschalter wird nie mit dem Design verwechselt, weil er bewusst CD-fremd ist
Nach der Wahl bleibt kein Arbeitswerkzeug in der Live-Seite zurück

⚠️Welche Fehler ohne diesen Skill auftreten

Alle Varianten stehen gleichzeitig auf der Seite, weil eine eigene display-Regel das hidden-Attribut aushebelt
Scroll-Animationen in nachträglich eingeblendeten Varianten bleiben unsichtbar
Varianten überschreiben sich gegenseitig durch doppelte Klassennamen
Nicht gewählte Varianten werden nur versteckt und blähen CSS und HTML dauerhaft auf
Umschalter und Direktlinks gehen versehentlich mit auf die Live-Domain

🏷️Themen

designdesignstudienvariantenab-vergleichlandingpagewebdesignjavascriptbarrierefreiheitqualitaetssicherung

Skill = eine einzelne Fähigkeit bzw. ein Schritt – fokussiert und sofort einsetzbar.

Workflow = ein kompletter Prozess, der mehrere Skills zu einem Ergebnis verkettet.