Es gibt eine Vielzahl unterschiedlicher Geräte um sich im Web fortzubewegen. Entsprechend gibt es auch ein sehr breites Spektrum verschiedener Bildschirmgrössen. Dieses reicht von preisgünstigen Mini-Smartphones mit einer Auflösung von 240x320 Pixel bis zu einem 5K Monitor mit einer Auflösung von 5120 x 2880 Pixel. Unabhängig welches Gerät gerade benutzt wird, Webseiten und Webapplikationen müssen immer optimal bzw. angepasst dargestellt werden.

Es ist nichts neues, dass Responsive Design die etablierte Methode ist, dieser Anforderung gerecht zu werden. Wird eine Webseite responsive gestaltet, werden Inhalte und Funktionalitäten so umgesetzt, dass sie sich automatisch unterschiedlichen Bildschirmbreiten anpassen. Nun gibt es natürlich unterschiedliche Arten, wie das Thema Responsive Design interpretiert und letztlich umgesetzt wird. Wie wir das Thema Responsive Design angehen und systematisieren haben wir hier zusammengefasst.

Von Screen Designs zu Viewports

Wenn wir Webseiten konzipieren, zeichnen wir – wie in der Architektur – Baupläne. Diese bestehen in den ersten Phasen prinzipiell aus mehr oder weniger statischen Bildern – so genannten Lo-Fi Wireframes. Dann werden die Baupläne weiter detailliert und es werden Hi-Fi Wireframes oder klickbare Prototypen erstellt. Das Resultat ist ein finales UI-Design bzw. Screen Design einzelner Seiten, Module oder Komponenten. Nun ist die Webseite damit aber noch nicht responsive. Um ganz sicher alle Fälle abzudecken müssten wir nun eigentlich ein Design für alle möglichen Bildschirmbreite erstellen. Die beiden bekannten Smartphone Hersteller Apple und Samsung alleine haben derzeit über 40 verschiedene Smartphones im Angebot. Nebst diesen beiden Hersteller gibt es noch weitere 167. Hinzu kommen noch SmartWatches, Tablets, Notebooks, Desktop Computer bis zu Digital Signage Displays. Obwohl viele Geräte ähnliche Bildschirmgrössen aufweisen, wird rasch augenfällig, wie aufwändig es wird für alle diese Bildschirmbreiten einzelne UI Designs zu erstellen.

Statt für spezifische Geräte bzw. Bildschirmbreiten zu designen, fokussieren wir uns auf Viewports. Als Viewport bezeichnen wir den Raum, den eine Webseite innerhalb des Browsers zur Verfügung hat. Da das Browserfenster nicht immer die volle Breite eines Bildschirms einnimmt, unterscheiden wir die Begriffe Bildschirmbreite und Viewportbreite.

Für welche Viewports designen wir?

Wir können uns das Spektrum der möglichen Bildschirm bzw. Viewportbreiten als horizontale Linie vorstellen. Sie beginnt Links bei 0 Pixel und geht rechts bis 2560 Pixel. Die Punkte auf dieser Linie widerspiegeln Viewports. Für diese statistische Analyse behandeln wir die Begriffe Viewportbreiten und Bildschirmbreiten als gleichwertig, da in den meisten Fällen Browserfenster die volle Breite einnehmen. Gängige Viewports sind z.B. 768px bei iPads oder 1920px für Full-HD Monitore. Wenn wir auf dieser Linie die am meisten verbreiteten Viewports aufzeichnen, sehen wir, dass es gewisse Cluster gibt – also bestimmte Bereiche auf der Linie, wo sich die Punkte häufen.

Wir treffen nun eine Auswahl an Viewportbreiten für unsere Baupläne. Wir nehmen häufig vorkommenden und genutzten Viewportbreiten (dazu gibt es Statistiken), die idealerweise zusätzlich in der Mitte dieser Cluster zu liegen kommen. So stellen wir sicher, dass wir pro Cluster ein möglichst genaues Abbild zeigen können, wie die Webseite für die entsprechenden Viewport-Ranges aussehen wird.

Wir nennen unsere Viewports "Small", "Medium", "Large" und "XLarge". Diese Bezeichnungen beziehen sich nur auf die Breite des Browserfensters, also auf den Viewport, nicht auf bestimmte Geräte. Gegen oben haben wir die Möglichkeit, je nach Anforderungen, zusätzliche Viewportbreiten wie “XXLarge” einzuführen. Momentan definieren wir meist eine maximale Breite für die Inhalte bei 1600px.

Wenn wir im UI-Design nun also visuelle Baupläne für Webseiten erstellen, haben wir die Dimensionen der verschiedenen Ansichten so gewählt, dass wir immer in der Mitte von häufig vorkommenden Viewports liegen. So stellen wir sicher, dass die Designs, wenn sie im Browser umgesetzt sind, nur minimal von unseren Bauplänen abweichen.

Wie definieren wir die Breakpoints richtig?

Breakpoints sind diejenigen Punkte auf der Linie der Viewports, wo sich Module und Komponenten der Webseiten (also das Design) verändern müssen, damit die Inhalte weiterhin gut lesbar, strukturiert und schön angezeigt werden. So kann ein Produktvergleich, der auf kleinen Screens als Liste dargestellt wird auf einem grösseren Gerät, wenn mehr Raum zur Verfügung steht, als Tabelle dargestellt werden. Oder ein Slider-Modul kann sich bei einer grösseren Viewportbreite zu einer Galerie verändern.

Wenn wir das UI-Design für einen Medium Viewport (768px) erstellen, konzipieren wir das Design so, dass es auch unterhalb von 768px und oberhalb immer noch optimal dargestellt wird. Wir setzen die Breakpoint idealerweise also genau zwischen den Clustern. So haben wir nämlich ein klares Bild, wie sich das UI-Design innerhalb des Clustern bis zum Breakpoint verhält.

Ein standardisiertes System

Mit der Etablierung von Standards was die Breakpoints und die Viewportgrössen unserer Baupläne betrifft, haben wir erreicht, dass wir nicht bei jedem Projekt ein neues gestalterisches wie auch technisches Fundament bauen müssen.

Neben den beschriebenen Punkten haben wir bei Gridonic auch ein standardisiertes dynamisches Raster-System, ein Typografie- und Abstands-System definiert. Durch solche Standards können wir uns direkt mit den wichtigen und spezifischen Fragen der jeweiligen Projekte auseinandersetzen und sind so effizienter. Sie erlauben uns ausserdem ein gemeinsames Vokabular intern wie auch mit unseren Kunden zu nutzen. Dies vereinfacht die Kommunikation.

Wir achten darauf, dass die Standards so grundlegend bleiben, dass sie uns nicht einschränken und uns weiterhin erlauben, jede Webseite als individuelles Projekt auszugestalten, gleichzeitig uns aber als Baukasten dient, der es uns erlaubt auf unseren Erfahrungen aufzubauen.

Inspiration & Ressourcen

• The 100% correct way to do CSS breakpoints by David Gilbertson

• 15 reasons why a grid based approach will improve your designs by Mary Stribley