Liquid Design: So designst du Websites, die sich “fließend” allen Browsergrößen anpassen

18. Juni 2015 von Sebastian Maier

Mit Liquid Design passt sich eine Website fließend allen Bildschirmgrößen an

Smartphone, Phablet oder Tablet: Die Palette der mobilen Endgeräte in allen Größen und Formen wird immer breiter und vielfältiger.

Es macht daher schon eine ganze Weile keinen Sinn mehr, statisch nur auf eine oder wenige Bildschirmgrößen zu optimieren. Man bietet den Nutzern ein viel besseres Erlebnis, wenn sich ein Webdesign “liquid” oder “fluid”, also quasi fließend, an verschiedene Browsergrößen anpasst.

Eine grafische Übersicht verschiedener Zoll-Größen bei Smartphones und Tablets

(Quelle: http://blog.econocom.com/en/blog/the-phablet-reigns-supreme-at-mwc/)


Liquid vs. Responsive

Moment, wird jetzt der eine oder andere sagen, dafür gibt es doch das Responsive Design? Das stimmt, doch beim Responsive Design gestaltet man sowohl für den Desktop als auch für unterschiedliche mobile Varianten jeweils ein statisches Screendesign. Für die mobilen Varianten gibt man über so genannte Media Queries im CSS Stylesheet an, für welche Breiten und Ausrichtung des mobilen Endgerätes – ob hochkant oder quer – die entsprechenden Werte gelten sollen.

Bei der Masse an verschiedenen Endgeräten müsste man jedoch mittlerweile sehr viele Media Queries bestimmen, um beim Responsive Design jede Bildschirmgröße abzudecken. Lässt man eine Variante aus und optimiert beispielsweise nur auf das iPhone 5, wird die Seite auf einem Phablet oder einfach nur einem etwas größeren Android-Gerät nicht mehr passend angezeigt. Auch erscheinen stets neue Geräte mit neuen Größen auf dem Markt, weshalb ein Responsive Design schnell veraltet sein kann.

Bei einem Liquid Design oder auch Liquid Responsive Design bestehen diese Probleme wie gesagt nicht. Es passt sich “fließend” den ganz unterschiedlichen Screens der Endgeräte an. Das bedeutet, dass auch Bilder oder Design-Elemente wie Kästen oder Linien in ihrer Breite oder ihrer Höhe dynamisch skaliert werden.

An dieser Stelle möchte ich euch ein Beispiel zeigen, wie wir bei smooster ein Fluid Design umgesetzt haben:

Die Website des Kurpfälzischen Kammerorchesters passt sich der Größe des Browserfensters stufenlos an


Schiebt ihr das Browserfenster zusammen, seht ihr, wie sich Bild und Text im Verhältnis zum Browserfenster und auch im Verhältnis zueinander stufenlos anpassen. Es entstehen keine unschönen Umbrüche.


Liquid designen in der Praxis

Beim Designen einer Liquid-Seite ist ein wenig Umdenken gefragt. Vor allem ist zu berücksichtigen, dass keines der designten Elemente wirklich statisch ist.

Ich möchte euch an dieser Stelle erläutern, was das konkret bedeuten kann.


Schrift

Logischerweise muss sich beim Liquid Design auch die Schrift, die sich in einem Design-Element befindet, zwangsläufig diesem anpassen. Wird das Element schmaler, muss die Schrift kleiner werden. Sonst würde es zu einem Zeilenumbruch kommen.

Diese Anpassung muss sich automatisch an der Browser-Anzeigefläche orientieren. Als Programmierer arbeitet man bei Liquid daher nicht mehr mit festen Pixelwerten, sondern mit dynamischen Angaben.

Glücklicherweise bieten uns die neuen Browser dafür viele Möglichkeiten. Wir können z. B. abhängig von Eltern-Elementen mit Prozenten arbeiten oder sogar bei ganz aktuellen Browsern mit den so genannten Viewport-Angaben – das ist immer der sichtbare Bereich der Website im Browser – quasi vergleichbar mit Above-the-Fold.


Bild

Im Hinblick auf Bilder solltet ihr Folgendes beachten: Bei Print kann ich einen Störer auf ein Foto setzen, der immer an dieser Stelle bleibt. Bei Web und im Besonderen bei Liquid-Responsive-Websites kann dieser Störer “wandern”, je nach Bildschirmbreite und -höhe. Dies kann zu ungewollten Effekten führen, z. B. dass der Störer an einer Stelle über dem Foto liegt, die wichtige Details überdeckt.



Wie sind eure Erfahrungen mit Liquid-Responsive?

PS: Demnächst werden wir ein Webinar zu diesem Thema abhalten, zu dem ihr natürlich herzlich eingeladen seid. Weitere Infos dazu gibt es in unserem Newsletter, zu dem ihr euch am besten gleich hier ganz unten auf der Seite anmeldet :).


zurück
comments powered by Disqus