Die Breakpoint-Strategie ist das Vorgehen, mit dem du festlegst, wie viele Breakpoints eine Website bekommt und bei welchen Werten sie liegen. Zwei Wege sind verbreitet: die Werte an verbreiteten Gerätegrößen ausrichten oder sie aus dem Verhalten des eigenen Inhalts herleiten. Wir arbeiten mit dem zweiten Weg. Während der Breakpoint die einzelne Zahl bezeichnet, beschreibt die Strategie die Regel, nach der diese Zahlen überhaupt zustande kommen.
- Breakpoint-Strategie
Das Vorgehen, mit dem du festlegst, wie viele Breakpoints eine Website bekommt und bei welchen Werten sie liegen.
Beispiel: „Unsere Breakpoint-Strategie sieht drei Umschaltpunkte vor, alle aus dem Textlayout hergeleitet.“Auch: Breakpoint-Konzept. Gemeint ist die Entscheidungsregel hinter den Zahlen, während der Breakpoint die Zahl selbst bezeichnet.
Zwei Ausprägungen stehen sich gegenüber: die gerätegetriebene Festlegung, die sich an verbreiteten Displaygrößen orientiert, und die inhaltsgetriebene, die den Umschaltpunkt dort setzt, wo der Inhalt es verlangt.
Gerätegrößen sind ein wackliges Fundament
Wer Breakpoints an Gerätenamen festmacht, pflegt eine Liste, die nie fertig wird. Jedes Jahr kommen Displaygrößen dazu, Telefone falten sich auf Tabletformat auf, und auf dem Tablet teilen sich zwei Apps den Bildschirm. Dazu kommt, dass kaum jemand den Browser am Desktop auf voller Bildschirmbreite benutzt. Die Zahl im CSS beschreibt immer den Viewport, und der hat mit dem Gerätenamen nur lose zu tun.
Der Inhalt zeigt, wo der Bruch hingehört
Das inhaltsgetriebene Vorgehen dreht die Reihenfolge um. Du baust die schmalste Ansicht fertig, ziehst das Fenster langsam auf und hältst an der ersten Stelle an, an der die Darstellung unangenehm wird. Typische Auslöser sind Textzeilen, die deutlich über 75 Zeichen hinauswachsen, ein Bild, das neben dem Text verloren wirkt, oder eine Navigation, die plötzlich Platz für alle Punkte hätte. Genau diese Breite wird der Breakpoint. Dabei entstehen krumme Werte wie 712 oder 1080 Pixel, und das ist richtig so: Sie beschreiben genau dieses Layout.
Wie viele Umschaltpunkte eine Website braucht
Aus unserer Arbeit an Unternehmenswebsites kommen die meisten Projekte mit drei bis vier Umschaltpunkten aus. Jeder weitere bedeutet einen weiteren Zustand, der gestaltet, gebaut und getestet werden muss. Vieles, wofür früher ein eigener Umschaltpunkt nötig war, erledigt CSS heute stufenlos: clamp() skaliert Schriftgrößen zwischen einem Minimum und einem Maximum, ein Grid mit auto-fit und minmax() ändert die Spaltenzahl von allein. Unsere Regel im Projekt lautet, dass sich jeder Breakpoint in einem Satz begründen lassen muss.