Glossar

Breakpoints

Der Begriff Breakpoints wird mit Unterbrechungspunkte übersetzt. Im Zusammenhang mit dem Webdesign sind allerdings tatsächlich die Umbruchspunkte gemeint. Sie gehören zu den Standards, die beim responsive Webdesign beachtet werden müssen. Ein responsive Webdesign ist wiederum die Basis, um den ständig steigenden Ansprüchen von Google an die mobile Nutzbarkeit von Websites gerecht zu werden. Der Umbruchspunkt gibt an, ab wann sich die Darstellung einer Website ändern muss. Er ist abhängig von der Bildschirmauflösung der von den Nutzern verwendeten Endgeräte.

Warum wurden die Breakpoints notwendig?

Als die ersten internetfähigen Smartphones und Tablets auf den Markt kamen, waren ihre Bildschirmauflösungen noch niedrig. Je nach Modell konnten gerade einmal 320 mal 480 Bildpunkte dargestellt werden. Das macht einen Bruchteil dessen aus, was ein Notebook-Display oder das Display eines Desktop-Computers beherrscht. Um dort Websites vernünftig und mit einer guten Usability darstellen zu können, mussten sie angepasst werden.

Dafür bestimmt der Programmierer Breakpoints, die sich an den Standardauflösungen für Displays orientieren. Ist ein solcher Punkt unterschritten, wird eine niedriger aufgelöste Header-Grafik ausgeliefert. Alternativ kann die Header-Grafik in der geringsten Auflösung hinterlegt und prozentual vergrößert werden. Darunter leidet allerdings immer die Qualität der Darstellung auf hochauflösenden Displays, weshalb diese Methode kaum angewendet wird. Hinzu kommt, dass die Top-Modelle unter den Smartphones inzwischen mit 1.080 mal 1.920 Bildpunkten Full HD beherrschen.

Heute beeinflussen Breakpoints das gesamte Webdesign

Wer sich die Unterschiede zwischen den Desktop-Versionen und den mobilen Websites genauer anschaut, entdeckt, dass die Breakpoints noch viel mehr bewirken. Bei den Content Management Systemen sorgen die integrierten Umbruchspunkte für eine Verschiebung der Menüs. Die in den seitlichen Widget-Zones untergebrachten Navigationselemente wandern unter die eigentlichen Inhalte. Das ist nicht nur von der Bildschirmauflösung abhängig. Auch die Displaygröße wird dabei berücksichtigt. Bei WordPress wird das über CSS gelöst. Das AMP-Plugin spielt dabei keine Rolle, denn es generiert nur spezielle Links auf die für die mobile Anzeige geeigneten Inhalte.

Die Breakpoints müssen außerdem bei der Einbindung von Grafiken in den Content berücksichtigt werden. Hier können ähnliche Verfahren wie bei der Auslieferung der Header-Grafiken zum Einsatz kommen. Alternativ ist die generelle Hinterlegung der Grafiken in einer geringen Auflösung möglich. Content Management Systeme bieten die Chance, das über die grundlegenden Einstellungen für die Objekte in der Mediathek zu automatisieren. Eine weitere Möglichkeit ist die Einbindung der Grafiken in Container mit der Angabe der maximalen Breite und Höhe. Der Container passt dann mit der Option „auto“ über die Media Queries die Anzeige an die tatsächlich nutzbare Auflösung an. Auf diese Weise wird die Angabe fixer Breakpoints überflüssig, denn sie werden von den Media Queries dynamisch generiert.


Interessiert? Erfahren Sie mehr zum Thema "Breakpoints" - kontaktieren Sie uns jetzt

We create for You

Unter der Überschrift „Kreation“ vereinen wir die 4 Kernkompetenzen von baseplus®: Das Design, die Entwicklung, das Online Marketing und Print, in der jeweils anmutenden Farbe. Das konsequente Color-Coding dient der optimierten Benutzerführung, die Claims kommunizieren jeden Bereich zusätzlich.

Klicken Sie hier, um zu sehen was wir meinen