coastdigitalgroup/coastai-skills

Split-Screen-Layout-System

Zweck

Das Split-Screen-Layout-System bietet ein standardisiertes, responsives und barrierefreies Design-Framework zur Strukturierung von Zwei-Panel-Webseiten. Split-Screen-Designs unterteilen den Viewport in zwei separate horizontale oder vertikale Zonen – typischerweise kombiniert ein visuelles oder Medien-Panel (Markenillustration, Video, interaktive Produktleinwand oder Testimonial-Spotlight) mit einem interaktiven oder Inhalts-Panel (Authentifizierungsformular, Onboarding-Schritt, Wertversprechen-Erzählung oder Feature-Konfigurator).

Ein effektives Split-Screen-Interface zu entwerfen erfordert das Ausbalancieren räumlicher Proportionen, die Sicherstellung einer gleichen oder bewussten visuellen Hierarchie zwischen den beiden Panels, die Aufrechterhaltung des unabhängigen Panel-Scrollens ohne doppelte Scrollbalken-Fehler, die Verwaltung von kontrastreichen Übergängen bei asymmetrischen Hintergrundfarbthemen sowie die Implementierung von responsivem Mobile-Stacking, das die logische Lesereihenfolge und das Fokus-Management gemäß WCAG 2.1 AA bewahrt.

Anwendungsfälle

• Authentifizierungs- & Gateway-Interfaces (Login / Registrierung): Kombinieren eines interaktiven Anmelde- oder Registrierungsformulars auf einem Panel mit hochwirksamer Markenkunst, Kundenstimmen oder Produkt-Highlights auf dem angrenzenden Panel.
• Produkt-Landingpage-Hero-Bereiche: Präsentieren einer konversionsstarken Überschriftenerzählung und eines primären CTA auf dem linken Panel, während auf dem rechten Panel ein interaktives 3D-Modell, eine Anwendungs-UI-Vorschau oder eine Video-Demo gezeigt wird.
• Onboarding- & mehrstufige Wizard-Flows: Kombinieren einer persistenten Schritt-für-Schritt-Anleitung, Fortschrittsanzeigen oder Vorschau-Visualisierungen auf der einen Seite mit aktiven Formulareingabefeldern auf der anderen Seite.
• Vergleichs- & Dual-Feature-Präsentationen: Darstellung von zwei kontrastierenden Produkten, Tarifstufen oder „Vorher vs. Nachher“-Transformationen nebeneinander mit unabhängiger visueller Hierarchie.
• Event- & Webinar-Registrierungsseiten: Strukturieren von Sprecher-Bios und Zeitplan-Agendas neben einem festen Registrierungsformular.

Wann NICHT verwenden

• Multi-Record-Anwendungs-Dashboards: Verwenden Sie für Produktivitätssoftware, die eine kontinuierliche Listennavigation neben einem aktiven Datensatz-Arbeitsbereich erfordert (z. B. E-Mail-Posteingang, CRM-Helpdesk), das master-detail-layout-system.
• Komplexe mehrspaltige App-Layouts: Verwenden Sie für SaaS-Dashboards, die eine persistente vertikale Seitenleisten-Navigation, obere Befehlsleisten und Widget-Grids erfordern, das dashboard-layout-system oder sidebar-navigation-system.
• Hochdichte Datenraster: Verwenden Sie für strukturierte tabellarische Daten über mehrere Zeilen und Spalten das data-table-ui-system oder responsive-grid-system.
• Einspaltige redaktionelle Artikel: Verwenden Sie für lange Textdokumente oder Blogbeiträge, die für ungehindertes vertikales Lesen gedacht sind, das article-layout-system oder section-composition-system.

Eingaben

1. Aufteilungsverhältnis & Räumliche Absicht: Bevorzugte Proportion (50/50 ausgewogene Aufteilung, 60/40 hero-fokussierte Aufteilung oder 40/60 formular-fokussierte Aufteilung).
2. Panel-Rollen-Zuweisung: Definieren des Zwecks von Panel A (Visuelles/Medien/Marken-Panel) und Panel B (Interaktives/Formular/Inhalts-Panel).
3. Oberflächen- & Themen-Paarungs-Token: Oberflächenfarben und -themen (z. B. Dunkles Markenkunst-Panel kombiniert mit hellem Formular-Panel oder zwei helle Oberflächen) aus dem accessible-color-system und dark-theme-design-system.
4. Medien- & Inhaltsdichte-Assets: Visuelle Assets (Bilder, SVGs, Video-Canvas, Produkt-Mockups) und Formular-/Inhalts-Schemata, die eingebettet werden sollen.

Ausgaben

1. Zwei-Panel-Canvas-Spezifikation: CSS-Grid-Layout-Definitionen für Desktop-Aufteilungsverhältnisse, Container-Höhenbegrenzung (100vh / 100%) und glatte Panel-Grenzen.
2. Medien-Containment- & Hintergrundkontrast-Regeln: CSS-Regeln für Bildskalierung (object-fit: cover), Hintergrundverläufe, visuelle Gewichtsverteilung und Lesbarkeits-Overlays.
3. Responsives Stacking- & Mobile-Flow-Modell: Responsive Breakpoint-Regeln, die horizontale nebeneinanderliegende Panels in vertikale gestapelte Zeilen umwandeln, während die DOM-Lesereihenfolge und die Sichtbarkeit von Prioritätsinhalten erhalten bleiben.
4. Barrierefreier ARIA- & Tastaturfokus-Bauplan: ARIA-Landmarken-Region-Definitionen (role="region" oder semantisches <main> / <aside>), Heading-Hierarchie-Regeln und WCAG-AA-Fokusindikator-Verwaltung.

---

Arbeitsablauf

1. Viewport-Container & Panel-Geometrie einrichten

Erstellen Sie den äußeren Split-Screen-Wrapper und legen Sie die Layout-Grenzen fest, um unerwünschte Browser-Scrollbalken zu vermeiden:

• Viewport-Höhenbegrenzung: Setzen Sie für Vollbild-Erlebnisse (wie Auth-Seiten oder Landing-Hero-Bereiche) den Hauptcontainer auf display: grid; min-height: 100vh; width: 100%; overflow: hidden;.
• Desktop-Spaltenverhältnisse:
  • 50/50 Ausgewogene Aufteilung: grid-template-columns: 1fr 1fr; (Ideal für gleichgewichtige Wertversprechen oder Auth-Seiten).
  • 60/40 Feature-Aufteilung: grid-template-columns: 3fr 2fr; (Gibt interaktiven Produktvorschauen mehr Platz).
  • 40/60 Formular-fokussierte Aufteilung: grid-template-columns: 2fr 3fr; (Priorisiert das Ausfüllen mehrfeldriger Formulare, während der Markenkontext erhalten bleibt).
• Unabhängiges Panel-Containment: Stellen Sie sicher, dass einzelne Panels Überlauf elegant behandeln (overflow-y: auto; height: 100%;), um zu verhindern, dass ein langes Panel den gesamten Viewport aufspannt oder doppelte Scrollbalken verursacht.

2. Das visuelle & Medien-Panel (Panel A) formulieren

Das visuelle Panel schafft sofortige Markenbindung und emotionale Resonanz:

• Hintergrundschichtung & Kontrast: Wenn Panel A dunkle Markenfarben oder Fotografie verwendet, stellen Sie sicher, dass die interne Typografie den WCAG-AA-Kontrast (≥4,5:1) erfüllt.
• Medienskalierung & Rahmung: Wickeln Sie Kunstwerke oder Produkt-Mockups in Containerelemente mit strengen Größenkontrollen (width: 100%; height: 100%; object-fit: cover; oder object-fit: contain;).
• Dekorative vs. informative Visuals:
  • Wenn das Bildmaterial rein dekorativ ist, wenden Sie alt="" und aria-hidden="true" an.
  • Wenn das Bild Text oder Produkt-Screenshots enthält, geben Sie beschreibenden alt-Text oder eine gepaarte Bildunterschriften-Typografie an.

3. Das interaktive & Inhalts-Panel (Panel B) formulieren

Das interaktive Panel steuert Benutzeraktionen (Formulareingabe, Konversionsklicks, Lesen):

• Inhaltsausrichtung & Abstände: Zentrieren Sie den Inhalt vertikal innerhalb von Panel B mit display: flex; flex-direction: column; justify-content: center; align-items: center; padding: clamp(2rem, 5vw, 4rem);.
• Formularbreiten-Begrenzung: Beschränken Sie Formularelemente auf ein lesbares Maximalmaß (max-width: 440px; width: 100%;), damit Eingabefelder auf ultrabreiten Bildschirmen nicht unangenehm breit werden.
• Touch-Ziel & Eingabehierarchie: Standardisieren Sie primäre Schaltflächen, Formulareingaben und Links mit dem button-and-action-system und form-design-system mit Tippzielen von mindestens 44x44px auf Touch-Viewports.

4. Responsives Mobile-Stacking & Prioritätsfluss konfigurieren

Auf mobilen Viewports (typischerweise < 768px oder < 1024px) werden nebeneinanderliegende Panels zu eng und unlesbar:

• Breakpoint-Stacking-Übergang: Ändern Sie grid-template-columns in ein einspaltiges Layout (grid-template-columns: 1fr; min-height: auto; overflow: visible;).
• DOM-Reihenfolge vs. visuelle Stacking-Priorität:
  • Auth- & Formularseiten: Das interaktive Formular (Panel B) ist das primäre Benutzerziel. Platzieren Sie Panel B zuerst im DOM, damit mobile Benutzer die Eingabefelder sofort sehen, ohne an langwierigem Marketing-Bildmaterial vorbeiscrollen zu müssen. Verwenden Sie CSS order oder natürliche DOM-Platzierung.
  • Hero- & Präsentationsseiten: Platzieren Sie die narrative Überschrift (Panel B) zuerst, gefolgt vom Produktvisual (Panel A).
• Medienhöhen-Reduzierung: Reduzieren Sie in mobilen gestapelten Ansichten die Höhe des visuellen Panels (max-height: 280px oder aspect-ratio: 16/9), damit es nicht den gesamten mobilen Bildschirm dominiert.

5. Tastaturfokus & ARIA-Landmarken implementieren

• Semantische Struktur & Landmarken:
  • Wickeln Sie das primäre Inhalts-/Formular-Panel in <main> oder role="main".
  • Wickeln Sie das visuelle/Marken-Präsentations-Panel in <aside aria-label="Produktpräsentation"> oder <section aria-label="Marken-Highlights">.
• Lese- & Fokus-Reihenfolge: Stellen Sie sicher, dass die DOM-Tab-Reihenfolge natürlich von links nach rechts (oder von oben nach unten auf mobilen Geräten) entsprechend dem visuellen Layout verläuft, ohne verwirrende Tabindex-Sprünge (tabindex="0" oder natürlicher Fokus).
• Fokusringe über Themengrenzen hinweg: Stellen Sie sicher, dass Fokusringe ein 3:1-Kontrastverhältnis sowohl zu dunklen visuellen Panels als auch zu hellen Formular-Panels aufweisen (outline: 2px solid var(--focus-ring); outline-offset: 2px;).

---

Entscheidungsregeln

Layout-Aufteilungsverhältnisse & Anwendungsfall-Zuordnung

Seitentyp	Desktop-Aufteilungsverhältnis	Mobile Stack-Reihenfolge	Empfohlene Panel-Rollen
Login / Registrierung Auth	50 / 50 Aufteilung	Formular oben, Medien unten	Panel A: Markenkunst / Testimonial; Panel B: Login-Formular (<main>)
Produkt-Hero-Bereich	60 / 40 Aufteilung	Text oben, Medien unten	Panel A: Text & CTA (<main>); Panel B: Interaktive App-Leinwand
Onboarding-Wizard	40 / 60 Aufteilung	Schritte oben, Eingaben unten	Panel A: Schritt-Checkliste / Vorschau; Panel B: Aktive Formularfelder
Dual-Vergleich	50 / 50 Aufteilung	Option A oben, Option B unten	Panel A: Stufe A / Vorher; Panel B: Stufe B / Nachher

Richtlinien für asymmetrischen Hintergrundkontrast

• Dunkles visuelles Panel + Helles Formular-Panel: Setzen Sie unabhängige CSS-Custom-Properties für jedes Panel (--pane-bg, --pane-text, --pane-border). Erben Sie niemals Textfarben über die Aufteilungsgrenze hinweg.
• Trennlinie der Aufteilung: Fügen Sie bei zwei hellen oder zwei dunklen Aufteilungen eine subtile 1px-Grenze ein (border-right: 1px solid var(--border-subtle)), um eine visuelle Trennung zwischen den Panels herzustellen.

---

Einschränkungen

• Barrierefreiheit (WCAG 2.1 AA):
  • SC 1.4.3 Kontrast (Minimum): Text auf beiden Panels muss ein Kontrastverhältnis von mindestens 4,5:1 zu seinem jeweiligen Hintergrund aufweisen.
  • SC 1.3.2 Sinnvolle Reihenfolge: Die visuelle Tab-Reihenfolge und die Screenreader-Lesereihenfolge müssen mit der logischen Priorität der Seite übereinstimmen (Interaktives Formular zuerst bei Auth; Wertversprechen-Überschrift zuerst bei Hero-Bereichen).
  • SC 2.4.7 Fokus sichtbar: Fokussierte Eingabefelder und Schaltflächen müssen nicht abgeschnittene Fokusindikatoren mit einem Kontrastverhältnis von ≥3:1 zu den Panel-Oberflächenfarben aufweisen.
  • SC 2.5.8 Zielgröße: Alle interaktiven Auslöser müssen die Mindesttippziele erfüllen (24x24px Minimum, 44x44px für Touch empfohlen).
• Layout-Verschiebungs- & Überlauf-Prävention: Vollbild-Desktop-Split-Layouts müssen overflow: hidden auf dem Hauptwrapper und overflow-y: auto innerhalb einzelner scrollbarer Panels verwenden, um Layout-Thrashing auf Fensterebene und doppelte Scrollbalken zu eliminieren.
• Typografie-Zeilenlänge: Textmaße in beiden Panels müssen zwischen 45 und 75 Zeichen pro Zeile (ch-Einheiten) bleiben, um eine komfortable Lesbarkeit zu gewährleisten.

---

Häufige Fehlermuster

• Doppelter Scrollbalken-Fehler: Setzen von height: 100vh auf Kindelementen, ohne den Container-Überlauf zu sperren, wodurch sowohl das Browserfenster als auch das Kind-Panel unabhängige vertikale Scrollbalken anzeigen.
• Mobile Occlusion primärer Inhalte: Platzieren eines riesigen visuellen Kunst-Panels vor dem Login-Formular in der mobilen DOM-Reihenfolge, wodurch mobile Benutzer gezwungen werden, durch 600px Marketing-Bildmaterial zu scrollen, um zum Benutzernamensfeld zu gelangen.
• Ungeprüfte Textüberladung über Kunst: Rendern von Text direkt über detailreichen Hintergrundfotos ohne dunkle Verlauf-Overlays (rgba(0,0,0,0.6)), wodurch der Text unlesbar wird und den WCAG-AA-Kontrast nicht erfüllt.
• Unbegrenzte Formular-Eingabe-Dehnung: Zulassen, dass sich Formularfelder in einer 50/50-Desktop-Aufteilung über 800px Breite erstrecken, was zu unbeholfenen Touch-Zielen und visuellen Verzerrungen führt.
• Ungleiches visuelles Gewicht: Ein Panel überwältigend dunkel und gesättigt machen, während das angrenzende Panel schlicht weiß mit winzigem Text ist, was zu visuellem Ungleichgewicht und hoher Augenbelastung führt.

---

Validierungskriterien

• Die Viewport-Begrenzung verwaltet das Desktop-Aufteilungsverhältnis (50/50 oder 60/40) sauber ohne doppelte Fenster-Scrollbalken.
• Der responsive mobile Breakpoint (<768px) stapelt Panels in eine einzelne Spalte mit geeigneten Höhenbeschränkungen bei Medienelementen.
• Die DOM-Lesereihenfolge priorisiert die primäre Aufgabe (z. B. Auth-Formular zuerst auf mobilen Login-Bildschirmen).
• Der Textkontrast auf sowohl dunklen als auch hellen Split-Panels erfüllt WCAG AA (≥4,5:1 Verhältnis).
• Interaktive Eingaben und Schaltflächen haben begrenzte Breiten (max-width: 440px) und Touch-Ziele ≥44x44px.
• Semantische ARIA-Landmarken (<main>, <aside>, role="region") unterscheiden die beiden Panels ordnungsgemäß.