Arbeitsfassung v0.2 · Projektwerte sind Vorschläge, noch kein freigegebener Standard

Webseiten klar aufbauen. Für Menschen und KI-Agenten.

Ein visueller Bauleitfaden: Aufbau, Breakpoints, Textbreiten, Abstände und wichtige Prüfregeln. Als Spickzettel auf dem zweiten Bildschirm – und als gemeinsame Arbeitsgrundlage für Framer, Webflow und HTML.

Section — volle Breite. Bestimmt die Außenabstände und Seitenränder. Die Padding-Werte wechseln je Breakpoint.

Container — zentriert, ohne eigenes Padding. Begrenzt die Breite: 1200 px im Standard, 1440 px für bewusst breitere Inhalte.

Content — hier lebt dein echter Inhalt. Das gap steuert den Rhythmus zwischen Headline, Text, Karten usw.

Section · volle Breite · padding 96/48

Section · oben/unten 64 · seitlich 16

Section · volle Breite · oben/unten 80 · seitlich 32

Container · maxWidth 1200 · Standard

Content · Headline + Karten Grid

01 / 09 · Aufbau

Drei Schichten, drei Aufgaben

Trenne Layout von Inhalt. So musst du Padding nur an einer Stelle pflegen und der Content-Stack bleibt frei für das Eigentliche.

Section

Volle Breite, padding 96 oben/unten und 48 an den Seiten. Sorgt für gleichmäßigen Abstand zwischen den Sektionen und schützt die Seitenränder.

Volle Breite, Padding 64 px oben/unten und 16 px an den Seiten. Sorgt für Abstand zwischen Sektionen und schützt die Seitenränder.

Volle Breite, Padding 80 px oben/unten und 32 px an den Seiten. Sorgt für Abstand zwischen Sektionen und schützt die Seitenränder.

Container

Maximal 1200 px und zentriert. Hat selbst kein Padding. Nur bewusst breitere Inhalte nutzen die Ausnahme mit maximal 1440 px.

Content

Hier lebt der echte Inhalt. Headline, Text, Karten, Buttons. Das gap regelt den vertikalen Rhythmus, ganz ohne manuelle Abstände.

Section · oben/unten 96 · seitlich 48

Section · oben/unten 64 · seitlich 16

Section · oben/unten 80 · seitlich 32

Container · maxWidth 1200 · Padding 0

Content · Standard-Gap 24

Content · Standard-Gap 16

Content · Standard-Gap 20

01 / 09 · Aufbau

So liest du diese Demo-Seite

Die gestrichelten Rahmen zeigen die drei Ebenen. Blau markiert die Section, Pink den Container, Grün den Content. Die Rahmen und Beschriftungen sind Lehrhilfen – sie gehören nicht zur Gestaltung einer normalen Website-Sektion.

Die Beschriftungen wechseln mit dem Breakpoint. Die tatsächlichen Abstände im Framer-Aufbau wechseln mit.

02 / 09 · Breakpoints

Nicht drei Geräte. Drei Layout-Situationen.

Die Namen helfen bei der Orientierung. Entscheidend ist die verfügbare Viewport-Breite in CSS-Pixeln – nicht das Modell, die Hardware-Auflösung oder die Pixelzahl des Displays. Diese Grenzen stammen aus diesem Framer-Projekt.

Handy

Unter 810 px

Meist eine Spalte. Inhalte in sinnvoller Lesereihenfolge stapeln; Navigation als Handy-Variante prüfen.

Buttons dürfen umbrechen oder untereinander stehen. Bilder bleiben proportional. Lange Wörter und Links auf Überlauf prüfen.

Seitenpadding: 16 px – bestätigt. Entwurf: Section 64 px oben/unten, erste Section oben 80 px, Karten innen 16 px.

Tablet

810 bis unter 1200 px

Kleinere Abstände und Schriftgrößen. Grids auf zwei Spalten reduzieren, wenn Karten sonst zu schmal werden.

Nicht einfach Desktop verkleinern. Drei Spalten sind nur sinnvoll, wenn Text und Bedienelemente wirklich genug Platz behalten.

Projektvorschlag: Section 80 px oben/unten · 32 px seitlich. Erste Section oben 104 px. Karten innen 20 px.

Desktop

1200 bis unter 1920 px

Mehrspaltige Inhalte, solange jede Spalte gut lesbar bleibt. Container begrenzen die Breite; nicht jeden Text strecken.

Die volle Breite gehört der Section. Text, Karten und Bilder richten sich innerhalb des Containers nach ihrem Inhalt.

Projektvorschlag: Section 96 px oben/unten · 48 px seitlich. Erste Section oben 128 px. Karten innen 24 px.

Ab 1920 px: mehr Außenraum, nicht endlos längere Zeilen.

Ultra Wide übernimmt zunächst die Desktop-Werte. Standard-Container maximal 1200 px, begründete breite Ausnahme 1440 px, Lesetext maximal 680 px. Maximalbreiten bleiben auch auf großen Monitoren wirksam.

Prüfen: 809/810, 1199/1200 und 1919/1920 px sowie dazwischen. Zusätzlich bei 320 px Breite und mit Zoom testen. Breakpoints sind Wechselstellen – keine Garantie für alle Zwischenbreiten. [3]

03 / 09 · Spacing

Dein Spickzettel beim Bauen

Wähle den Breakpoint und lies den Abstand direkt an der passenden Stelle ab. Blau: Section. Pink: Container. Grün: Content und innere Abstände.

Handy

Unter 810 px

↕ 64 px oben

Erste Section: 80 px

↔

Container · max. 1200

kein eigenes Padding

Content

Deine Headline

↕ 16 px

Zugehörige Beschreibung

↕ 40 px zum Inhalt

↔ 16 px zwischen Spalten

Karte

innen 16

Karte

innen 16

↕ 32 px zwischen Reihen

Karte

innen 16

Karte

innen 16

↔

↕ 64 px unten

Standard-Gap im Content: 16 px

Tablet

810 bis unter 1200 px

↕ 80 px oben

Erste Section: 104 px

↔

Container · max. 1200

kein eigenes Padding

Content

Deine Headline

↕ 16 px

Zugehörige Beschreibung

↕ 48 px zum Inhalt

↔ 24 px zwischen Spalten

Karte

innen 20

Karte

innen 20

↕ 40 px zwischen Reihen

Karte

innen 20

Karte

innen 20

↔

↕ 80 px unten

Standard-Gap im Content: 20 px

Desktop

Ab 1200 px · auch Ultra Wide

↕ 96 px oben

Erste Section: 128 px

↔

Container · max. 1200

kein eigenes Padding

Content

Deine Headline

↕ 16 px

Zugehörige Beschreibung

↕ 64 px zum Inhalt

↔ 32 px zwischen Spalten

Karte

innen 24

Karte

innen 24

↕ 48 px zwischen Reihen

Karte

innen 24

Karte

innen 24

↔

↕ 96 px unten

Standard-Gap im Content: 24 px

Schematische Skizzen, nicht maßstabsgetreu. Alle Angaben in px. Standard-Container: maximal 1200; breite Ausnahme: 1440; längerer Lesetext: 680. Die Werte sind weiterhin ein Entwurf zur Beurteilung.

03 / 09 · Spacing

Eine Skala statt Zufallswerte

Ein 4-px-Grundraster mit einer begrenzten Auswahl. Spezifische Regeln haben Vorrang vor dem allgemeinen Content-Gap.

104

128

104 px ist der Einstiegswert für Tablet. Schriftgrößen, Strichstärken und die Innenmaße bestehender Buttons werden nicht pauschal auf diese Abstandsskala gezwungen.

04 / 09 · Typografie

Die Schrift hat eine Größe. Der Text braucht eine Breite.

Schriftstil, semantische Ebene und maximale Zeilenbreite sind drei verschiedene Entscheidungen. Die Größen der H1/H2/H3 kommen aus den vorhandenen Presets. Die Breiten und Body-Werte hier sind Vorschläge zur gemeinsamen Beurteilung.

H1 – das Seitenthema · max 900 px · Desktop/Tablet/Handy 56/40/32 px

Ein klares Thema. Eine starke Hauptüberschrift.

Eine Hauptüberschrift pro Seite als Projektkonvention. Sie sagt klar, worum es geht.

H2 – ein Hauptabschnitt · max 820 px · Desktop/Tablet/Handy 48/32/28 px

Ein neuer Abschnitt beginnt hier.

Gliedert die Seite in Hauptabschnitte. Gleicher Rang bedeutet gleiche inhaltliche Ebene.

H3 – ein Unterabschnitt · max 680 px · Desktop/Tablet/Handy 40/28/24 px

Ein Detail innerhalb des Abschnitts.

Untergliedert einen H2-Abschnitt. Nicht nur wegen der kleineren Schrift als H3 auszeichnen.

Body – längerer Lesetext · max 680 px · Desktop/Tablet/Handy 18/16/16 px

Ein breiter Bildschirm bedeutet nicht, dass jede Textzeile die gesamte Breite nutzen sollte. Begrenze längeren Lesetext, damit das Auge leicht zur nächsten Zeile findet. Die Maximalbreite ist eine Obergrenze: Auf kleinen Bildschirmen passt sich der Text an den verfügbaren Platz an.

Fließtext als Absatz, nicht als Überschrift. Zeilenlänge und Umbrüche mit dem echten Inhalt prüfen.

Webprinzip: Überschriften müssen die Inhaltsstruktur ausdrücken. In diesem Projekt: eine H1 fürs Seitenthema, H2 für Hauptabschnitte, H3 für Unterabschnitte. Beim Vertiefen keine Ebene überspringen; die Schriftgröße entscheidet nicht über das HTML-Tag. [4]

Maximalbreite ist keine feste Breite. Framer: Fill plus Max Width. Webflow/HTML: width: 100% plus max-width. Im flexiblen Layout zusätzlich unnötige Mindestbreiten vermeiden. Kein manuelles Umbruchzeichen, nur damit eine Überschrift bei einer einzigen Breite schön aussieht.

Body in diesem Entwurf: 18 px auf Desktop, 16 px auf Tablet/Handy, Zeilenhöhe 1,5. Prüfe echte Texte, lange Wörter und Zoom. Schriftgrößen, Zeilenhöhen und Abstände zwischen Absätzen nicht miteinander verwechseln.

04 / 09 · Typografie

Eine klare Headline.
Genug Raum zum Lesen.

Eine echte Textsektion zum Beurteilen: Der Container ist maximal 1200 px breit, der Lesetext darin maximal 680 px. Zwischen Überschrift und Beschreibung liegen 16 px.

Bei reinen Text-Sektionen darf der Content enger sein als der Container. So bleibt die Zeilenlänge angenehm lesbar, während Außenabstand und Seitenränder zu den übrigen Sektionen passen.

Dieses Beispiel ist in Framer aus editierbaren Ebenen aufgebaut. Es ist noch kein veröffentlichter Download und kein fertig freigegebenes Freebie.

04 / 09 · Typografie

Abstände sollen helfen.
Nicht einschränken.

Maximalbreiten sind Obergrenzen, keine festen Breiten. Auch am Handy müssen Schrift, Seitenränder und Umbrüche zusammenpassen.

Ein Lesetext mit maximal 680 px ist ein Ausgangspunkt, keine Garantie für eine bestimmte Zeichenanzahl. Prüfe die tatsächliche Schrift und den tatsächlichen Inhalt. Für längere Texte zählt Lesbarkeit mehr als das starre Einhalten einer Zahl.

Für deine Rückmeldung: Wirken die Abstände zu groß, zu eng oder passend? Stimmen Seitenränder, Textbreite und der Wechsel zwischen den Sektionen? Erst nach deiner Beurteilung wird daraus der verbindliche Standard.

05 / 09 · Layout-Beispiele

Mehr Breite – wenn der Inhalt sie braucht.

Dieses Vierer-Grid ist die bewusst breite Ausnahme. Auf kleineren Bildschirmen wechselt es in weniger Spalten. Normale Textsektionen bleiben beim Standard-Container.

Rahmen

Section-Padding bleibt gleich.

Breite

Dieser Container darf bis 1440 px wachsen.

Rhythmus

Spalten, Reihen und Karten folgen den Gerätewerten.

Umbruch

Vier Spalten auf Desktop, zwei auf Tablet, eine am Handy.

06 / 09 · Buttons

Zusammengehörig. Aber nicht aneinandergeklebt.

Projektvorschlag: aktivierbare Flächen mindestens 48 × 48 px, Beschriftung nach Bedarf breiter. Zwischen benachbarten Aktionen 16 px Luft. Auf kleinen Ansichten lieber stapeln als die Trefferflächen verkleinern.

Zum Bauablauf

Zur Prüfliste

↑ Die grüne Umrandung zeigt den Content-Stack. Der freie Zwischenraum ist gap: 16 px. Die beiden Aktionen führen zu Kapiteln dieser Seite.

Projektregel: Eine klar priorisierte Hauptaktion pro Aktionsgruppe. Zweite Aktionen optisch zurücknehmen. Beschriftungen benennen das Ziel. Ein Link führt zu einem Ziel; ein Button löst eine Aktion aus. Nicht jeden klickbaren Text als Button gestalten.

WCAG 2.2 AA, 2.5.8: grundsätzlich 24 × 24 CSS-Pixel Zielgröße, mit definierten Ausnahmen. Für kleinere Ziele zählt unter anderem die 24-px-Kreis-Abstandsprüfung; es gibt keinen pauschalen WCAG-Mindest-Gap. 44 × 44 gehört zu 2.5.5 (AAA), nicht zum allgemeinen AA-Minimum. Unser Vorschlag 48/16 ist eine Projektregel. [1][2]

07 / 09 · Bauablauf

Eine Sektion bauen. Dieselben Entscheidungen wiederholen.

Die drei Ebenen sind unsere Layout-Konvention, keine Pflichtarchitektur des Internets. Die Idee bleibt gleich – die Namen und Bedienoberflächen unterscheiden sich.

01 · Inhalt zuerst

Ziel, Überschrift, Text, Medien und eine passende Hauptaktion festlegen. Mit echten oder klar markierten Platzhalterinhalten arbeiten.

02 · Section anlegen

Volle verfügbare Breite, Hintergrund und äußere Abstände. Die erste Section berücksichtigt die Navigation. Nicht zusätzlich dasselbe Seitenpadding auf den Container legen.

03 · Container begrenzen

Zentriert, flexibel, maximal 1200 px. Nur bei begründeten Visuals/Grids 1440 px. Längeren Lesetext innerhalb des Containers enger führen.

04 · Content gruppieren

Überschrift + Beschreibung: Gap 16. Inhalt in Stack oder Grid. Zugehörige Elemente gemeinsam gruppieren; Abstände am Eltern-Layout statt an jedem Kind verstreuen.

05 · Kleiner werden lassen

Spalten und Navigation anpassen, Texte umbrechen, Bildproportionen erhalten. In Framer Breakpoint-Vererbung nutzen und nur notwendige Overrides setzen.

06 · Im Browser prüfen

Zwischenbreiten, lange Inhalte, Tastatur, Fokus, Zoom und Links testen. Ein schöner Canvas allein belegt keine funktionierende Website. Vor Veröffentlichung den kompletten Änderungsumfang prüfen.

Framer

Frames/Sections, Fill + Max Width, Stacks und Grids. Primary und Breakpoint-Replicas vererben Werte; lokale Overrides gezielt prüfen. Geteilte Textstile nicht für eine einzelne Seite global verändern.

Webflow

Section-/Div-Elemente und Container-Klassen. Flex/Grid für die Anordnung, Padding am passenden Elternteil, max-width für Lesebreite. Klassen und Breakpoint-Overrides bewusst einsetzen.

HTML & CSS

Semantische Bereiche mit main, section und Überschriften. Flexbox/Grid, gap, padding, max-width und Media Queries bilden dieselben Entscheidungen ab. Nicht jede visuelle Gruppe benötigt eine section.

Übertragbar sind die Prinzipien – nicht automatisch die Breakpoint-Zahlen oder alle Ebenennamen. Framer, Webflow und ein eigenes CSS-System können andere Grenzwerte und andere Vererbungsregeln haben.

08 / 09 · Prüfung

Nicht nur passend aussehen. Auch benutzbar sein.

Diese Prüfliste deckt wichtige Grundlagen ab, ist aber kein vollständiger WCAG-Konformitätsnachweis. Wiederhole die Prüfung mit dem tatsächlichen Inhalt und in der tatsächlichen Website.

Tastatur & Fokus

Navigation, Links, Formulare und Dialoge ohne Maus bedienen. Fokus sichtbar halten; keine Tastaturfalle. Sticky-Header und Banner dürfen das fokussierte Element nicht vollständig verdecken. Projektziel: vollständig sichtbar. [1]

Kontrast & Farbe

Text muss sich deutlich vom Hintergrund abheben. WCAG AA: grundsätzlich 4,5:1 für normalen Text, 3:1 für großen Text, jeweils mit den definierten Ausnahmen. Bedeutung nicht allein über Farbe vermitteln – deshalb stehen hier Namen neben den Farbfeldern. [1]

Navigation & Struktur

Einen klaren Seitentitel und logische Überschriften verwenden. Hauptinhalt erkennbar auszeichnen. Mobile Navigation öffnen, schließen und per Tastatur verlassen können. Keine toten Ziele oder nur bei Hover erreichbaren Inhalte. [1][4]

Formulare

Sichtbare, technisch zugeordnete Labels; Platzhalter nicht als einzige Beschriftung. Nur nötige Felder verlangen. Fehlermeldung am betreffenden Feld verständlich erklären und Erfolg erst nach bestätigter Verarbeitung anzeigen. Keine echten Testanfragen ohne Freigabe. [1][5]

Bilder & Medien

Informative Bilder passend zum Kontext beschreiben; dekorative HTML-Bilder mit leerem alt-Attribut. Bild-Links nach ihrem Ziel benennen. Proportionen erhalten, Zuschnitt und wichtige Motive pro Breakpoint prüfen. Passend große, komprimierte Assets statt unnötig großer Dateien verwenden. [6]

Reflow & reale Inhalte

Bei 320 CSS-Pixel Breite ohne unnötiges horizontales Scrollen und ohne Informationsverlust prüfen; Ausnahmen gelten für notwendige zweidimensionale Inhalte. Auch 400 % Zoom testen, z. B. bei ursprünglich 1280 px Viewport. Lange Titel, echte Texte und Fehlermeldungen mitprüfen. [3]

Vor dem Livegang

Alle Links und Zustände prüfen. Seitentitel, Beschreibung, Indexierung, Entwurfsstatus und Social-Vorschau kontrollieren. Fremde Assets nur mit Nutzungsrecht. Ladeverhalten im Browser prüfen. Den vollständigen Publish-Diff ansehen und erst nach ausdrücklicher Freigabe veröffentlichen.

09 / 09 · KI-Agenten

Gleiche Regeln. Auch wenn ein Agent baut.

Die visuelle Seite und die begleitende Markdown-Arbeitsfassung beschreiben denselben Entwurf. Projektvorschläge dürfen nicht stillschweigend zu verbindlichen oder universellen Standards werden.

1. Projekt, Zielseite, aktuellen Stand und erlaubten Änderungsumfang zuerst lesen. Neue Freigaben und live geprüfte Änderungen haben Vorrang vor alten Snapshots.

2. Vor Ersatz vorhandene Sektionen editierbar auf einer benannten Canvas sichern und zurücklesen. Zusätzlich die responsive Seite sichern, wenn Breakpoint-Varianten betroffen sind. JSON allein ersetzt das Canvas-Archiv nicht.

3. Native, editierbare Elemente verwenden. Projektwerte gemeinsam anwenden, notwendige Ausnahmen begründen. Globale Stile, Komponenten und andere Seiten ohne gesonderte Freigabe unverändert lassen.

4. Änderungen am echten Ziel zurücklesen, Desktop/Tablet/Handy/Ultra Wide ansehen und im Browser Zwischenbreiten, Navigation, Fokus und Links prüfen. Warnungen einordnen statt ignorieren.

5. Gemacht, geprüft und noch offen getrennt melden. Keine Veröffentlichung, Formulareinsendung, Installation oder externe Integration aus diesem Guide ableiten.

Die passende Markdown-Arbeitsfassung wird separat bereitgestellt. Ein öffentlicher Download ist noch nicht freigegeben.

Quellen für die allgemeinen Prüfregeln

[1] WCAG 2.2 – Richtlinien und Erfolgskriterien

[2] Zielgröße: Minimum und Abstandsausnahmen

[3] Reflow: Breite, Zoom und Ausnahmen

[4] Semantische Überschriften

[5] Formulare richtig beschriften

[6] Bilder und Alternativtexte

Webseiten klar aufbauen. Für Menschen und KI-Agenten.

Drei Schichten, drei Aufgaben

So liest du diese Demo-Seite

Nicht drei Geräte. Drei Layout-Situationen.

Handy

Tablet

Desktop

Ab 1920 px: mehr Außenraum, nicht endlos längere Zeilen.

Dein Spickzettel beim Bauen

Handy

Tablet

Desktop

Eine Skala statt Zufallswerte

Die Schrift hat eine Größe. Der Text braucht eine Breite.

Eine klare Headline.Genug Raum zum Lesen.

Abstände sollen helfen. Nicht einschränken.

Mehr Breite – wenn der Inhalt sie braucht.

Rahmen

Breite

Rhythmus

Umbruch

Zusammengehörig. Aber nicht aneinandergeklebt.

Eine Sektion bauen. Dieselben Entscheidungen wiederholen.

01 · Inhalt zuerst

02 · Section anlegen

03 · Container begrenzen

04 · Content gruppieren

05 · Kleiner werden lassen

06 · Im Browser prüfen

Framer

Webflow

HTML & CSS

Nicht nur passend aussehen. Auch benutzbar sein.

Tastatur & Fokus

Kontrast & Farbe

Navigation & Struktur

Formulare

Bilder & Medien

Reflow & reale Inhalte

Vor dem Livegang

Gleiche Regeln. Auch wenn ein Agent baut.

Quellen für die allgemeinen Prüfregeln

Mach dein Projekt auch zu meinem.

Mach dein Projekt auch zu meinem.

Mach dein Projekt auch zu meinem.

Eine klare Headline.
Genug Raum zum Lesen.

Abstände sollen helfen.
Nicht einschränken.

Mach dein Projekt
auch zu meinem.

Mach dein Projekt
auch zu meinem.

Mach dein Projekt
auch zu meinem.