Wer sich mit Responsive Web Design beschäftigt landet früher oder später bei der Frage: Mit welchen Breakpoints soll ich arbeiten? In der Regel orientieren man sich dabei an den Geräten, auf denen die Website dargestellt werden soll. Die Bildschirme von Smartphones und Tablets sind soundso breit, also nehmen wir diese Werte als Breakpoints.
Aber welche Geräte von welchen Herstellern wählen wir dafür aus? Nach welchen Kriterien gehen wir vor? Und was passiert, wenn neue Geräte auf den Markt kommen? Schreiben wir dann wieder neue Breakpoints ins Stylesheet?
In diesem Artikel möchte ich alte und neue Methoden betrachten, mit denen man die „richtigen“ Breakpoints für ein Responsive Web Design zu finden.
Was sind Breakpoints?
(Wer schon weiß, wie das mit den Breakpoints funktioniert, darf die nächsten zwei Absätze überspringen und weiter unten weiterlesen).
Breakpoints definieren die Stellen, an denen sich das Layout einer Website ändert, wenn die Inhalte auf Geräten mit unterschiedlich großen Displays dargestellt werden. Das Layout einer Website im Responsive Design passt sich automatisch der Größe des Displays an. Guckt der Besucher mit einem Smartphone, bekommt er die Website anders ausgeliefert als wenn er vor dem Desktop-Rechner sitzt.
Arbeitet man mit einem festen Layout, verkleinert der mobile Browser die Website im Ganzen auf die Größe des jeweiligen Bildschirms. Ziemlich bald wären alle Texte unleserlich und die winzigen Links wären über einen Touchscreen nicht mehr bedienbar.
Responsive Design = Flexibler Raster + Media Queries
Damit die Website beweglich wird, setzt man einen Flexiblen CSS-Raster ein. Hier sind die Breiten der Spalten nicht mehr absoluten Werten definiert (also z.B. width: 300px), sondern in relativen Werten (z.B. width: 30%).
Aber irgendwann sieht auch ein flexibles Layout nicht mehr gut aus: Die Spalten werden zu eng und die Texte zu klein. Jetzt kommen die Media Queries zum Einsatz: Mit diesen Abfragen überprüft man die Bildschirm-Größe und legt fest, wann sich das gesamte Layout ändern soll, indem es zum Beispiel von einem mehrspaltigen Aufbau auf eine oder zwei Spalten wechselt.
Breakpoints finden: Der klassische Weg
Um festzulegen, wann man die Spalten und Elemente im Layout neu anordnen muss, orientiert man sich an den Bildschirmgrößen der üblichen Verdächtigen: Am iPhone und am iPad.
Daraus ergeben sich folgende Breakpoints:
- 320 Pixel (iPhone Hochformat)
- 480 Pixel (iPhone Querformat)
- 768 Pixel (iPad Hochformat)
- 1024 Pixel (iPad Querformat)
Alles, was über 1024 Pixel hinausgeht, könnte man den Desktop-Rechnern zuschlagen. Da aber inzwischen alle Laptops deutlich mehr Pixel auf dem Display versammeln, ist es üblich, noch einen Breakpoint bei 1200 Pixel zu setzen. Will man jetzt noch den Besitzern von Riesendisplays etwas Gutes tun, kann man noch einen weiteren Breakpoint bei 1600 Pixeln einbauen. Auch eine Media Query für kleine Tablets ist sinnvoll – das Format ist etwa 480 x 640 Pixel.
Die Breakpoints-Liste
- 320 Pixel (iPhone Hochformat)
- 480 Pixel (iPhone Querformat)
- 649 (Kleines Tablet Querformat)
- 768 Pixel (iPad Hochformat)
- 1024 Pixel (iPad Querformat)
- 1200 Pixel (Laptop)
- 1600 Pixel (Mega-Displays und TV)
Damit sind wir auf der sicheren Seite, oder?
Naja, nicht ganz.
Das Problem: Das Web ist anders
Brad Frost zeigt in seinem Artikel Responsive Web Design: Missing The Point eine Grafik, die das Problem ohne viele Worte auf den Punkt bringt:
© Image by bradfrostweb.com
„Das Web“ gibt es nicht. Jede Woche kommen neue Smartphones und Tablets auf den Markt und die Marktanteile der großen Betriebssysteme schwanken hin und her. Und Apple’s Retina-Displays, die plötzlich viermal so viele Bildpunkte auf dem Screen unterbringen, werfen einen bisher fixen Wert mal eben über Bord.
Wenn man sich die Realität des Web anschaut, ist es keine gute Idee, Breakpoints für ein Responsive Design an den Maßen existierender Geräte festzumachen. Es gibt einfach zu viele, und es werden immer mehr.
Was tun?
Letzte Woche erschien ein sehr interessanter Artikel bei Smashingmagazine. Darin erklärt Thierry Koblentz seine Idee von einem Device Agnostic Approach To Responsive Design, frei übersetzt etwa: „Responsive Design ohne Rücksicht auf die Geräte“. Stephanie Rieger’s Gedanken in ihrem Artikel bei A List Apart The Best Browser is the One You Have With You gehen in die gleiche Richtung.
Wenn wir uns an den technischen Möglichkeiten von Geräten und Browsern orientieren, sind wir verloren. Diese Vorgaben wechseln nicht nur ständig, es ist auch unmöglich vorherzusagen, wer wann mit welchen Mitteln eine Website betrachtet.
Der einzige Fixpunkt in diesem unbeständigen System sind die Inhalte. Sie können wir aktiv gestalten, auf sie haben wir Zugriff. Den Content der Website können wir über das Design strukturieren.
Die Idee: Die Inhalte geben die Breakpoints vor
Das klingt abenteuerlich. Ein bisschen Abenteuer ist auch dabei, denn der Weg ist weder bequem noch hunderprozentig sicher. Aber weil „das Web“ ständig in Bewegung ist und man nun Mal einen Pudding nicht an die Wand nageln kann, bleibt eigentlich nur diese Möglichkeit übrig.
Auf einen einfachen Nenner gebracht plädiert Thierry Koblentz dafür, die Breakpoints an den Stellen zu setzen, an denen die Inhalte unleserlich werden und/oder die Priorisierung der Inhalte durcheinander gerät. Das einzige Instrument, dass man dafür braucht, ist die rechte untere Ecke des Browserfensters: Wenn man das Browserfenster mit der Maus zusammenschiebt kommt irgendwann der Punkt, an dem das Layout nicht mehr stimmt. Das wäre dann der erste Breakpoint.
Ein schickes Tool um festzustellen, ab welche Bildschirm-Breite das Layout nicht mehr passt, ist responsivepx von Remy Sharp. Damit kann man die Breakpoints auf den Pixel genau bestimmen.
Content (und Mobile) First
Aber nicht nur die Lesbarkeit der Texte ist ein Kriterium, auch die Funktion der Inhalte ist wichtig. Die Navigation einer Seite kann man nicht einfach weglassen sobald sie im Weg ist, eine Blog-Roll oder einen Tweet dagegen schon.
Man muss also die Inhalte kategorisieren und nach ihrer Bedeutung für die Website sortieren und gruppieren. Welches Element muss im Zweifelsfall dem wichtigeren weichen? Was steht an oberster Stelle, was rutscht weiter nach unten, was verschwindet womöglich ganz?
Hier kommt wieder der Mobile First-Ansatz ins Spiel. Anstatt von der Desktop-Ansicht der Website auszugehen und die Inhalte auszublenden und zu verkleinern, sobald sie nicht mehr aufs nächstkleinere Display passen, beginnt man dort, wo der Prozess üblicherweise endet: Bei der Ansicht für Smartphones.
Hier ist die Website auf ihre absolute Basis reduziert, der Besucher sieht nur die wichtigsten Elemente. Welche Elemente sind das? Was bleibt übrig, was kann man auf keinen Fall weglassen?
Das ist der Einstieg in das Konzept der Website.
Fazit
Die Display-Größen von existierenden Geräten bieten eine grobe Orientierung wenn es darum geht, Breakpoints für ein Responsive Design zu finden. Aber mehr auch nicht. Erst dann, wenn sich die Breakpoints am Design und am Inhalt der Website orientieren, wird ein Schuh daraus.
Jede Website, jedes Design ist anders. Wenn das Layout für die Darstellung auf einem 9-Zoll-Tablet gar keine Veränderung braucht, ist der Breakpoint 1024 Pixel überflüssig. Wie oft ärgere ich mich über künstlich „abgespeckte“ iPad-Versionen, bei denen mir die Desktop-Version vorenthalten wird, obwohl sie bequem auf den Bildschirm gepasst hätte.
Breakpoints sind keine Werte, die man festschreiben kann. Auch kann man sie nicht an konkreten Geräten festmachen. Breakpoints sind Elemente, die direkt mit dem Design und den Inhalten einer Website verknüpft sind.
UPDATE: Den Artikel von Jeffrey Zeldman darf ich natürlich nicht vergessen: State of The Web: Of Apps, devices and Breakpoints. Unbedingt auch die Kommentare lesen.
Wie hat Dir der Artikel gefallen?
[kkratings]