Responsive Goes Fluid

Eigentlich muss man nicht mehr über Responsive Design sprechen. Als vor zehn Jahren Smartphones die technologische Weltbühne erobert haben, war es noch neu und aufregend, dass Webseiten nun auch auf Mobilgeräten angezeigt werden konnten und sollten – und der Mehrwert und -aufwand musste der Kundschaft ja auch erstmal erklärt werden.

Heutzutage entfallen weltweit mehr als die Hälfte aller Webseiten-Besuche auf Mobilgeräte. Responsive Design ist immer noch wichtig, aber eben Routine und wir hatten ein Jahrzehnt (das sind ca. 70 Jahre in Web-Jahren), in dem wir Best Practices entwickeln konnten. Bis auf die eine oder andere Website, die seit 2010 nicht mehr aktualisiert wurde, findet man kaum mehr Seiten, die nicht für Mobilgeräte angepasst sind.

Doch in den letzten zehn Jahren haben sich auch unsere Kerntechnologien wie HTML und CSS weiterentwickelt und inzwischen gibt es so manches, was elegante Lösungen für alte Probleme bietet. Ein Beispiel dafür ist fluide Typografie.

Aus Bruch mach Fluss

Der herkömmliche Weg, eine Website responsiv zu gestalten, sind Breakpoints. Das heißt, dass ab definierten Bildschirmbreiten andere Darstellungsanweisungen greifen, z.B. „bis 600 Pixel Breite soll die Hauptüberschrift 30 Pixel groß sein und bei allen größeren Breiten 60 Pixel“. (Mal als einfaches Beispiel, in Pixel sollte man Schriftgrößen ohnehin nicht mehr angeben.)

Als CSS sieht das dann so aus:

Diese @media-Anweisung nennt man dabei eine Media-Query, also eine Abfrage, die bestimmte Parameter der aktuellen Darstellungsumgebung abklopft. Media-Querys sind wundervoll und ohne sie geht es nicht. Allerdings kann CSS inzwischen mehr als Umbrüche definieren. CSS kann Berechnungsaufträge an den Browser weitergeben – und das dank Einheiten wie vw (viewport width) in Abhängigkeit zur Bildschirmbreite.

Was wäre also, wenn das Design nicht zwei diskrete Punkte hätte, an denen es radikal umbricht, sondern sich subtil und fließend an die Fenster- oder Bildschirmgröße angleicht?

Dies hätte mehrere Vorteile:

1. Edgecases vermeiden

Die Bildschirmgrößen, die nur wenig größer oder kleiner als ein Breakpoint sind, sehen beim herkömmlichen responsiven Verhalten oft grenzwertig aus, weil sie eben genau das sind: Grenzfälle, in denen das jeweilige Design an sein Limit kommt.

2. Designaufwand gering halten

Designs sind aufwendig, vor allem Screendesigns. Und anstatt für jeweils Smartphone (Quer- und Hochformat), Tablet (Quer- und Hochformat) und Desktop eigene Ansichten zu erstellen, definiert man einen Minimal- und einen Maximal-View und den Rest berechnet der Browser. Das erspart viel Arbeit.

3. Weniger Code

Der obige Fall mit der Überschrift, sähe als fluider Wert so aus:

Das war es schon. Man spart sich viele Zeilen Code, was wiederum die Performanz der Seite verbessert.

4. Die Proportionen bleiben schön

Gerade bei Typografie hängt der ästhetische Eindruck stark von den Proportionen ab – von den Verhältnissen der Schriftelemente zueinander, aber auch zum Weißraum. Definiert man Typografie und Abstände fluide, bleiben diese Proportionen erhalten und gehen nicht schon auf dem Weg von 1400 zu 1200 Pixeln verloren.

Fluid Design in Action

Eines der verbreitetsten Tools zur Umsetzung von fluidem Design ist wahrscheinlich Utopia. Auf deren Seite findet sich auch ein sehr gutes Erklärvideo, das die Vorteile und Funktionsweise noch einmal in der Tiefe erläutert.

Aber auch mit SCSS lässt sich fluide Typografie recht einfach implementieren.

Wer sich für einen tieferen Einblick in die Berechnungen hinter fluider Typografie interessiert, findet in diesem Artikel mehr dazu.

Und wer sich seine fluiden Werte gerne mit visueller Unterstützung sucht, wird mit diesem Tool viel Freude haben.