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. Weiterlesen →