Liquid Layout

Wenn der Benutzer die Größe des Fensters ändert, passen Sie die Größe des Seiteninhalts zusammen mit dem Fenster an, so dass die Seite ständig „liquid“ – also gefüllt ist.

Wenn Sie keine „geschlossene“ Benutzeroberfläche wie ein Vollbildschirm-Videospiel entwerfen, können Sie nicht vorhersagen, unter welchen Bedingungen die Benutzer Ihre Benutzeroberfläche sehen werden. Bildschirmgröße, Schriftart-Einstellungen, andere Fenster auf dem Bildschirm oder die Bedeutung einer bestimmten Seite für den Benutzer – nichts davon unterliegt Ihrer Kontrolle. Wie können Sie dann die eine optimale Seitengröße für alle Benutzer bestimmen?

Wenn Sie dem Benutzer ein wenig Kontrolle über das Layout der Seite geben, wird Ihre Benutzeroberfläche unter sich ändernden Bedingungen flexibler. Es kann auch dazu führen, dass sich der Benutzer weniger feindselig gegenüber der Benutzeroberfläche fühlt, da er sie so biegen kann, dass sie seinen unmittelbaren Bedürfnissen und Kontexten entspricht.

Wenn Sie mehr Überzeugungsarbeit leisten müssen, überlegen Sie, was mit einer „nicht-flüssigen“ Benutzeroberfläche mit festem Layout passiert, wenn sich die Sprache oder Schriftgröße ändert. Werden die Spalten immer noch aneinandergereiht? Werden Seiten plötzlich zu breit oder gar an den Rändern beschnitten? Wenn nicht, großartig; Sie haben ein einfaches und daher robustes Design. Aber Seiten, die so konstruiert sind, dass sie mit Änderungen der Fenstergröße gut zurechtkommen, kommen im Allgemeinen auch Änderungen der Sprache oder der Schriftgröße entgegen.

Liquid Layout vs Responsive Webdesign

Die Begriffe „liquid Layout“ und „responsive Webdesign“ werden manchmal synonym verwendet, aber das sind zwei verschiedene Dinge. Eine Seite, die mit responsivem Webdesign erstellt wurde, enthält CSS-Medienabfragen, die je nach Breite des Fensters oder der Art des Geräts, das für den Zugriff auf die Seite verwendet wird, unterschiedliche Stile laden. Reaktives Webdesign erfordert mehr CSS (und manchmal JavaScript) als ein einfaches, flüssiges Layout, bietet aber auch mehr Kontrolle über das Layout der Seite.