Eine Kundin schickte mir neulich vier Screenshots derselben Startseite: einmal vom iPhone, einmal vom iPad, einmal vom Bürorechner, einmal vom alten Laptop ihres Mannes. Vier Geräte, vier Eindrücke, eine ratlose Mail. „Irgendetwas stimmt da nicht, aber ich kann nicht beschreiben, was."
Genau diese Lücke schließen vier Begriffe: Viewport, Breakpoint, Whitespace und Grid. Sobald Du sie kennst, hast Du die Worte, um Beobachtungen in präzises Feedback zu verwandeln. Statt „sieht komisch aus" sagst Du „der Breakpoint bei 768 Pixel greift zu früh". Das spart Erklärschleifen auf beiden Seiten.
Dieser Beitrag ist als Vokabel-Trainer gedacht. Pro Begriff bekommst Du eine Definition, den Zweck und ein Beispiel aus der Praxis. Kein Code, keine technische Tiefe, nur das Werkzeug für gute Gespräche mit Deinem Dienstleister.
Viewport — der sichtbare Ausschnitt eines Geräts
Der Viewport ist der Bereich, in dem ein Browser Deine Webseite tatsächlich darstellt. Auf einem iPhone sind das vielleicht 390 mal 844 CSS-Pixel, auf einem Bürorechner mit Full-HD-Monitor 1920 mal 1080. Wichtig: Diese Werte beschreiben nicht die physischen Pixel des Geräts, sondern die logische Fläche, mit der das Layout rechnet.
Der Browser muss diesen Wert kennen, weil er sonst rät und dabei meistens falsch liegt. Ohne expliziten Hinweis nimmt ein Smartphone-Browser an, die Seite sei für einen 980-Pixel-breiten Desktop gebaut, und quetscht das Ganze in den schmalen Bildschirm. Das Ergebnis: winzige Schrift, horizontales Scrollen, Frust.
Deshalb steht in jedem ordentlichen Webseiten-Quelltext eine kleine Zeile namens Meta-Viewport-Tag. Die teilt dem Browser mit: „Nutze die Gerätebreite als Bezug." Erst dann kann das Layout sauber reagieren. Wenn Dir Deine Seite auf dem Handy in winzig wirkt, fehlt vermutlich genau diese Zeile.
Breakpoint — die Grenze, ab der das Layout umschaltet
Ein Breakpoint ist eine festgelegte Bildschirmbreite, an der bestimmte Gestaltungs-Regeln greifen oder wegfallen. Unterhalb von 768 Pixel zeigt Deine Seite vielleicht ein Burger-Menü, oberhalb klappt die volle Navigation auf. Der Sprung passiert genau an dieser Schwelle, nicht stufenlos.
Die Idee dahinter: Eine Seite passt sich nicht wie ein Gummiband an jede Größe an, sondern bleibt in Stufen lesbar. Zwischen den Stufen darf das Layout fließen, an den Stufen wechselt es das Schema. Typische Schwellen sind 576, 768, 992 und 1200 Pixel, je nach Framework leicht unterschiedlich. Bootstrap, Tailwind oder ein eigenes Setup setzen die Marken jeweils dort, wo es zur Designidee passt.
Wenn Dir auf dem iPad auffällt, dass die Sidebar plötzlich verschwindet und der Hauptinhalt allein steht, hat ein Breakpoint genau dort gegriffen. Manchmal zu früh, manchmal zu spät. Die richtige Frage an Deinen Entwickler lautet dann: „Bei welcher Breite schaltet die Sidebar weg, und können wir die Schwelle verschieben?"
Whitespace — der Raum zwischen den Elementen
Whitespace ist der leere Raum zwischen Texten, Bildern, Buttons und allen anderen Elementen Deiner Seite. Auf Deutsch heißt das Weißraum oder Negativraum, wobei „weiß" irreführt: Auch ein dunkelblauer Hintergrund ohne Inhalt zählt als Whitespace, solange er die Funktion hat, Dinge voneinander zu trennen.
Whitespace lenkt den Blick und schafft Lesbarkeit. Zwei Buttons mit vier Pixel Abstand wirken wie ein zusammenhängender Block, derselbe Abstand auf 24 Pixel erweitert macht aus ihnen zwei klare Optionen. Ähnlich bei Texten: Ein großzügiger Zeilenabstand entspannt das Lesen, ein zu enger drückt die Augen zusammen.
Im Minimalismus ist Whitespace das Hauptgestaltungsmittel, siehe auch der Abschnitt zum minimalistischen Stil in Webdesign-Arten — die richtige Wahl für Dein Projekt. Aber auch klassische Layouts leben davon. Wenn Dir eine Seite „voll" oder „erschlagend" vorkommt, ist meistens nicht zu viel Inhalt das Problem, sondern zu wenig Raum dazwischen.
Grid — das unsichtbare Raster hinter dem Layout
Das Grid ist ein Raster aus Spalten und Zeilen, an dem die Elemente Deiner Seite ausgerichtet sind. Du siehst es nicht direkt, aber es sorgt dafür, dass Überschriften, Bilder und Text-Blöcke eine gemeinsame Flucht haben. Die meisten Webseiten arbeiten mit zwölf Spalten — eine Zahl, die sich gut teilen lässt: in zwei Hälften, drei Drittel, vier Viertel oder sechs Sechstel.
Der Zweck eines Grids ist Konsistenz. Wenn ein Hauptinhalt acht Spalten füllt und die Sidebar daneben vier, ergeben beide zusammen die volle Breite. Auf der nächsten Seite wiederholt sich diese Anordnung, und der Leser erkennt das Schema wieder. Das macht eine Webseite ruhig und vertraut, ohne dass jemand bewusst darüber nachdenkt.
Wenn Du ein Bild nicht ganz an der Kante zum Text stehen hast, sondern minimal versetzt, bricht das Grid an dieser Stelle. Der Eindruck: „Wirkt unruhig, aber ich weiß nicht warum." Ein Hinweis an Deinen Designer, das fragliche Element auf die Spaltenkante zu setzen, löst das Problem oft in Sekunden.
Wie die vier Begriffe zusammenwirken
Die vier Begriffe sind keine Inseln. Der Viewport bestimmt, welcher Breakpoint gerade aktiv ist, weil ein Smartphone mit 390 Pixel Breite andere Schwellen unterschreitet als ein Desktop. Der aktive Breakpoint legt fest, wie das Grid aufgeteilt wird: zwölf Spalten auf dem großen Bildschirm, vielleicht nur eine einzige auf dem Handy. Und das Grid wiederum bestimmt, wo der Whitespace landet, weil es die Abstände zwischen den Spalten und Zeilen festlegt.
Wenn auf dem Handy etwas „nicht stimmt", kann die Ursache also auf jeder dieser vier Ebenen liegen. Ein fehlender Viewport-Tag verzerrt schon die Grundlage. Ein falsch gesetzter Breakpoint schaltet zur falschen Zeit. Ein zu eng gesetztes Grid drückt die Inhalte. Zu wenig Whitespace macht alles zur Bleiwüste.
So formulierst Du präzises Feedback
Mit dem Vokabular im Rücken wird Feedback an Deinen Entwickler oder Designer konkret. Drei Beispiele aus dem Alltag, jeweils vorher und nachher.
- Vorher: „Sieht doof aus auf dem Handy." Nachher: „Bei 375 Pixel Breite bricht die Hauptnavigation in drei Zeilen, kannst Du den Breakpoint anpassen oder das Menü als Burger einklappen?"
- Vorher: „Das wirkt so vollgestopft." Nachher: „Zwischen Headline und Fließtext fehlt mir Whitespace, das wirkt wie ein Block. Kannst Du den Abstand vergrößern?"
- Vorher: „Die Bilder hängen schief." Nachher: „Das Bild im rechten Block sitzt nicht auf derselben Spaltenkante wie der Text darüber. Bitte am Grid ausrichten."
Du musst nicht alles selbst lösen können. Du musst nur das Problem so beschreiben, dass jemand anderes es ohne Rückfragen findet. Die vier Begriffe geben Dir genau diese Beschreibungs-Schärfe.
Wo die Begriffe an ihre Grenzen kommen
Whitespace und Grid sind Wahrnehmungs-Themen. Was als angenehm gilt, hängt vom Kontext ab. Eine Anwalts-Webseite verträgt mehr Ruhe und mehr Whitespace als ein Online-Magazin, das von visueller Dichte lebt. Auch Breakpoints sind keine Naturkonstanten: Wenn Deine Zielgruppe vor allem Tablets im Querformat nutzt, gehört dort ein eigener Breakpoint hin, auch wenn das vom Standard-Schema abweicht.
Mit anderen Worten: Die Begriffe sind Werkzeuge, keine Regeln. Sie helfen Dir, Beobachtungen einzuordnen und Wünsche zu formulieren. Die finale Entscheidung trifft immer der Mensch, der sich mit Deiner Marke und Deiner Zielgruppe auseinandergesetzt hat.
Fazit — vier Worte, mehr Wirkung
Viewport, Breakpoint, Whitespace, Grid. Mit diesen vier Worten verlässt Du den Bereich „irgendwas stimmt da nicht" und betrittst den Bereich strategisch nutzbarer Beobachtungen. Du musst kein Designer werden, kein CSS lernen, keine Tools bedienen. Es reicht, dass Du beim nächsten Blick auf Deine Webseite die Sprache hast, um zu beschreiben, was Du siehst.
Und wenn Du tiefer einsteigen willst, welche Designansätze welche Layout-Logik mitbringen, schau in Webdesign-Arten — die richtige Wahl für Dein Projekt. Dort wird das technische Fundament durch die ästhetischen Entscheidungen ergänzt, die auf demselben Raster aufsetzen.