Breakpoints bei responsive Webdesign
Bei der Umstellung einer Website auf responsive Design kommt den Breakpoints eine entscheidende Bedeutung zu. Das sind die Punkte, ab der (meistens eine bestimmte Breite) das Design einer Website merklich anders gestaltet wird, bzw. die Container umbrechen. Beispielsweise kann mittels CSS erreicht werden, dass ein zweispaltiges Layout ab einer bestimmten Breite zu einem Layout mit vier Spalten geändert wird. Nachfolgend eine Abbildung über das grundsätzliche Schema.
Eine wichtige Frage ist, bei welchen Breiten (oder auch Höhen) ein Breakpoint gesetzt werden soll. Hierbei gibt es die verschiedensten Techniken, Mittel und Wege, um die optimalen Breakpoints zu ermitteln. Dazu zählen vor allem die folgenden.
- Breakpoints anhand der Standardbreiten der Geräte setzen
- Breakpoints anhand eines Rasters (Grid) setzen
- Breakpoints nach den Inhalten ausrichten (Content-first)
Daneben gibt es allerlei weitere Möglichkeiten, die Breakpoints sinnvoll zu ermitteln. Hierbei gibt es kein einheitliches Schema, woran man sich orientieren kann, da jedes Internetprojekt individuell ist. Am Ende sollte das Aussehen auf allen Geräten möglichst einheitlich und gut sein und die Website sollte intuitiv und einfach zu bedienen sein.
Breakpoints an die Standardbreiten der Geräte orientieren
Eine häufig verwendete Lösung ist, die Breakpoints an die Standardbreiten der Geräte zu orientieren. Dabei werden meistens folgende Breiten als primäre Breakpoints berücksichtigt.
- 320 Pixel
- 768 Pixel
- 1024 Pixel
Neben diesen Breiten kann man zusätzliche Breiten berücksichtigen, die man als "Sekundär-Breakpoints" betrachten kann. Das könnten beispielsweise folgende sein.
- 360 Pixel
- 480 Pixel
- 640 Pixel
- 960 Pixel
- 1200 Pixel
- 1600 Pixel
Der Nachteil bei dieser Variante ist, dass es viele Geräte gibt, die eine andere Displaybreite haben. Man kann nicht alle Breiten abdecken und was bei dem einen Gerät gut aussieht, kann auf einem anderen Gerät nicht mehr so gut aussehen. Außerdem kann es passieren, dass man die Inhalte auf den Seiten anders gestalten muss, damit sie in das Schema passen.
Breakpoints anhand eines Rasters (Grid) setzen
Eine ebenfalls häufig verwendete Methode ist, die Inhalte von Websites in ein Raster (Grid) aufzuteilen und die Breakpoints anhand des Rasters zu erstellen. Beispielsweise könnte man die Webseiten in ein Raster mit vier Spalten aufteilen und bei jeder Spalte von einer Breite von 320 Pixel ausgehen. Somit wären die übrigen Breakpoints bei 640px, 960px und 1280px.
Nachteilig bei dieser Variante ist ebenfalls, dass sie nicht bei allen Websites angewendet werden kann. Denn, nicht jede Website kann man in ein sinnvolles Raster aufteilen. Entscheidet man sich trotzdem dafür, kann das weiteren Aufwand verursachen, da man unter Umständen die Inhalte an das Raster anpassen muss.
Breakpoints nach den Inhalten ausrichten (Content-first)
Es gibt eine sehr einfache Möglichkeit, sinnvolle Breakpoints herauszufinden. Hierbei verändert man die Browsergröße. Wenn es anfängt, dass eine Webseite nicht mehr gut aussieht, setzt man einen Breakpoint. Diese Methode wird auch Content-first genannt, da man die Breakpoints nach den Inhalten ausrichtet.
Welche Methode man verwendet und wie man die Breakpoints setzt, ist individuell festzulegen.