Breakpoints richtig definieren

So sieht Responsive Design wirklich gut aus

Responsive Design, Media Queries, Breakpoints und vor allem das Schlagwort “Mobile First” sind Themen, die bei der Erstellung einer Website heiß diskutiert werden. Schließlich ist der Großteil der genutzten Browser ist mittlerweile in der Lage, HTML5 und CSS3 darzustellen und somit für eine optimale Nutzererfahrung auf unterschiedlichsten Geräten zu sorgen.

Die Definition von Breakpoints, also den Umbruchpunkten, an denen sich das Layout an der Breite des Bildschirms orientiert, ist immer wieder eine Herausforderung – lässt sich jedoch mit Google Analytics als Datenbasis bewältigen.

Für die korrekte Definition von Breakpoints seht ihr erst einmal nach, mit welchen Bildschirmauflösungen sich Nutzer eure Seite anschauen. Im ersten Schritt wird die Bildschirmauflösung analysiert. Dafür gibt es in Google Analytics schon einen passenden Report für die Bildschirmauflösung, zu finden unter Zielgruppe > Technologie > Browser & Betriebssystem – primäre Dimension: Bildschirmauflösung. Hier seht ihr schon, dass eine Breite zwischen 360 und 375 Pixel am gängigsten ist. Da lohnt noch einmal ein genauerer Blick: Einfach nach Größen zwischen 300 Pixel und 499 Pixel mit folgendem Regulären Ausdruck filtern: ^(3|4)[0-9]{2}x

Über eine sogenannte Custom Dimension lässt sich die Breite von Bildschirmen in Google Analytics einspielen. Damit hat man eine wesentlich sauberere Datenbasis, denn die Höhenangabe fragmentiert die Breitenangaben (z.B. 320×568, 320×570, 320×480 aus dem Beispiel oben), welche man zunächst aufwendig summieren müsste. Um dies zu erreichen, muss lediglich eine Custom Dimension “Bildschirmbreite” auf Hit-Level gesetzt, und folgender Filter implementiert werden:

Nun kann man schon sehr gut erkennen, dass die Hälfte aller Nutzer mit solch einer Auflösung kommen. Das bedeutet: Es ist also besonders wichtig, hier zwischen 320 Pixel und 424 Pixel ein harmonisches Grundgerüst zu erzeugen. Der nächste größere Breite liegt bereits bei 480 Pixel. Unter 320 Pixel gibt es tatsächlich nicht mehr viel. Deshalb kann man hier mit 320 Pixel einen guten Startpunkt setzen. Zwischen 424 Pixel und 480 Pixel verankert man optimalerweise den nächsten Breakpoint, zum Beispiel bei 460 Pixel. Diese oben erklärte Analyse fahrt ihr nun für immer größer werdende Bildschirmauflösungen. Anschließend erhält man eine komplette Liste von Breakpoints.

Worauf bei der Definition von Breakpoints noch geachtet werden sollte und wie Bildgrößen optimal festgelegt werden, erklärt Sebastian Pospischil in “Responsive Design: Breakpoints und Bildergrößen richtig definieren” auf t3n.de.