Wer sich mit der Umsetzung einer Website im responsive Webdesign auseinandersetzt, wird sich früher oder später auch mit Breakpoints beschäftigen müssen. Eigentlich eine simple Sache. Das Design soll auf allen Displaygrößen gut aussehen, bis ins kleinste Detail User frindly sein und mit exorbitant guten Ladezeiten glänzen. Smartphone und Co haben eine Breite von X und dieser Wert X ist der natürliche Breakpoint für das responsive Design. Fertig (?).
Würde man sich auf die mobilen Endgeräte nur eines Herstellers festlegen, wäre man in der Tat fertig und hätte die passenden Breakpoints schnell gefunden. Aber was ist, wenn dieser Hersteller sich dazu entschlossen hat ein neues Tablet mit einer weiteren Displaygröße auf den Markt zu werfen. Und an welchem Hersteller orientiert man sich? Es scheint so, als gäbe es doch ein paar Punkte mehr, die in die Wahl der „richtigen“ Breakpoints mit einfließen sollten.
Was sind Breakpoints?
Ein Breakpoint ist ein definierter Punkt im CSS (Stylesheet), mit dem sich die Darstellung der Webseite an die unterschiedliche Displaygrößen anpasst, dass Design wird responsive. Ohne das setzen betreffender Breakpoints würde eine Website nur auf die jeweilige Displaygröße verkleinert werden (statisches Web Design).
Ein Breakpoint ist eine zusätzliche Regel im CSS, die nur für die notierte Größe Anwendung finden. Im CSS würde mittels einer @media Anweisung, gefolgt von der Größenzuordnung, die zusätzliche Regel notiert und somit auch nur auf diese Größe zutreffen und angewendet werden. Breakpoints sind – vereinfacht ausgedrückt – geräteabhängige Stilvorgaben und werden über Media-Queries gesetzt.
In beiden Beispielen nimmt das Layout die volle Breite des Displays ein. Um das zu realisieren wurde im CSS mit @media ein Breakpoint gesetzt, der die Darstellung und das Verhalten des Layouts so ändert, dass sich bei einer Displaygröße < 1200 Pixel die Elemente untereinander anordnen müssen.
Wann Breakpoints setzen?
Das ist eine der schwierigen Fragen und genau beantworten lässt sich das eigentlich nicht. Im Grunde könnte man hunderte Breakpoints setzen, genügend unterschiedliche Displaygrößen gäbe es allemal.
Aber man kann es nicht jedem recht machen und es ist schon okay, wenn man hier und da fünfe gerade sein lässt. Ein paar der wichtigsten Displaygrößen sollte man aber berücksichtigen. Um einen Anfang zu haben, orientiert man sich einfach an den gängigen Kandidaten, z.B. dem iPad und dem iPhone.
Die Breakpoints wären demzufolge:
- 320 Pixel (iPhone Hochformat)
- 480 Pixel (iPhone Querformat)
- 768 Pixel (iPad Hochformat)
- 1024 Pixel (iPad Querformat)
Mit dieser Handvoll Breakpoints würde man nicht besonders weit kommen, schließlich gibt es noch die Displaygrößen oberhalb 1024 Pixel. Um hier ebenfalls für eine vernünftige Darstellung zu sorgen, brauchen wir also noch weitere Größen.
Zusätzlich:
- 600 Pixel (kleinere Tablets Hochformat)
- 1200 Pixel (Laptop)
- 1500 – 1600 Pixel (TV u. sehr große Displays)
Wenn man sich diese Liste etwas genauer betrachten stellen man fest, dass sie recht große Lücken aufweisen und es stellt sich die Frage, wie man damit umgehen soll.
Content first – Der Inhalt bestimmt die Breakpoints
Das klingt schon fast ketzerisch, ist aber eigentlich die logische Konsequenz. Es ist und bleibt im Dunklen mit welcher Displaygrößer der User die Seite besuchen wird, oder was es zukünftig für Größen auf dem Markt geben wird. Das Internet wird auch weiterhin mit klassischen Mitteln genutzt werden, keine Frage. Es werden aber auch immer mehr TV-Geräte mit Auflösungen jenseits der 1500 Pixel oder Monitore auf Kuhlschränken etc. dazu komen. Die einzige Konstante in dem munteren Reigen ist der Content, daran wird sich nichts ändern. Es wird also immer irgendwas geben, dass in irgendeiner Größe angezeigt werden soll.
Wenn Breakpoints gesetzt werden, dann primär zu Gunsten der Inhalte und nicht (nur) aus ästhetischen Gesichtspunkten. Im wesentlich sollten Breakpoints nicht gesetzt werden um das Webdesign, sondern den Content zu erhalten. An erster Stelle also die Lesbarkeit und die Nutzerführung (Navigation) und erst an zweiter Stelle das Design.
Es mag niederschmetternd klingen, denn viele Webdesigner sehen das (ihr) Design im Vordergrund. Tatsächlich ist aber gerade das Design auf mobilen Endgeräten zweitranging. Form follows Function hat bei kleineren Displaygrößen ein deutlich größere Bedeutung, als bei einem Desktop Monitor.
Die Kunst besteht eher darin, so viel wie nötig so gut wie möglich auch auf weniger Raum nutzbar zu machen, bzw. die Nutzbarkeit zu erhalten. Insgesamt ein Problem struktureller und nicht Gestalterischer Natur.
Wenn man dem Gedanken von responsive Webdesign folgt und die Priorität auf den Content legt, entstehen nur marginale Lücken und der eine oder andere Breakpoint erweist sich als völlig unsinnig. Die Tatsache, dass Größenangaben im responsive Webdesign nicht mit festen Pixeln sondern in Prozent angegebenen werden, sollte erst gar keine Lücken entstehen lassen. Anstelle eines 5 zeiligen Textes entstünde – bei einem größeren Display – ein zwei zeiliger Text, er muss nur lesbar bleiben. Ist er es nicht (mehr) liefert das einen guten Grund für einen Breakpoint über den die Schriftgröße anpasst wird.
Page load und Web Performance – Ein gutes Breakpoint Argument
Die Ladezeit einer Website spielt immer eine Rolle. Bei der mobilen Nutzung ist ihre Bedeutung noch ein bisschen größer. Es ist – einigermaßen – Sinn frei zu versuchen, ein Bild oder eine Grafik auch bis in die kleinste Displaygröße hinweg „durchzuziehen“. Es gibt zwar technische Lösungen, die es möglich machen bei unterschiedlichen Displaygrößen auch dementsprechend angepasste Bilder (Dateigröße und Abmessung) auszuliefern aber dir Frage ist immer, tut das not? Macht das Bild auf einem kleinen Display da noch Sinn oder könnte es, dem Content zuliebe, auch fehlen?
Werden Bilder und Grafiken ebenfalls über das CSS eingebunden, erhält man sich die Option sie Fallweise (ab einer gewissen Displaygröße) ein oder auszublenden. Unterm Strich lässt sich mit dem cleveren setzten von Breakpoints also nicht nur die Gestaltung, sondern auch die Ladezeit zu Gunsten der mobilen Nutzung beeinflussen.
Ohne Breakpoints geht es also nicht und es kann durchaus Sinn machen, sich einmal eingehender mit ihnen zu beschäftigen.