Abonnieren
Liquid Design oder auch elastisches Layout, so nennt man eine Designtechnik, die flexible Spaltenbreiten einsetzt. Wie man an meiner Seite hier unschwer erkennen kann, passen sich die Spaltenbreiten immer dem Browserfenster an – eine Änderung der Fensterbreite ändert automatisch das Layout und der gesamte Text bricht neu um.
Das gilt nicht nur für Layoutspalten, auch Bilder können so formatiert werden, dass sie sich flexibel der Spaltenbreite oder dem Browserfenster anpassen. Zusätzlich ändert sich die gesamte Gestaltung mit dem Browser-Zoom – über eine Koppelung von Kästen, Rahmen oder Abständen an die Schriftgröße ist diese Seite zum Beispiel auch bei einem Zoom von 200% noch benutzbar. Dabei kommt es natürlich trotzdem zu unschönen Layoutänderungen, zum Beispiel werden einzelne Wörter nicht umbrochen und ragen in hohen Zoomstufen kombiniert mit kleinen Browserfenstern aus ihren Spalten heraus und/oder überlappen andere Spalten, ausserdem umbricht die Navigationsleiste und so weiter.
Diese Layouttechnik hat natürlich auch einige Nachteile. Der Gestalter gibt einen großen Teil seiner Layout-Kontrolle an den Besucher ab, er kann lediglich Rahmenbedingungen vorgeben, innerhalb derer die Seite beziehungsweise der Textfluss umbrechen soll. Problematisch wird es vor allem in den Extremen:
Abhilfe wäre eine Angabe von minimalen und maximalen Breiten. CSS bietet diese Möglichkeit über die Angaben min_width und max_width. Ich habe beides auf meinen Seiten bis jetzt nicht eingesetzt, unter anderem weil der Internet Explorer beide Angaben leider nicht interpretiert und ich keinen Hack einsetzen wollte, um es dem Internet Explorer beizubringen. Björn Seibert erläutert auf markup :: Journal diesen Zusammenhang sehr schön und bietet auch zwei Links zu Explorer-Hacks, einen mit einer reinen CSS-Lösung und einen über JavaScript, den sogenannten »Dynamic Properties« (beide Artikel leider Englisch).
Die JavaScript-Lösung imponiert mir, weil sie kein zusätzliches Markup im HTML erfordert und einfach in ein ein eigenes Stylesheet für den Internet Explorer via Conditional Comments ausgelagert werden kann. Hacks sind dadurch überflüssig und das Markup bleibt sauber und validiert. Da es sich nur um ein rein gestalterisches – und damit zur Not verzichtbares – Feature handelt, macht es auch nicht viel aus, wenn der Besucher JavaScript deaktiviert hat.
Bilder und Grafiken sind ein gestalterisches Problem im Liquid Design. Zum Teil kann man sie ebenfalls skalieren; wenn das aber nicht möglich ist (zum Beispiel bei Bildern, die als Hintergrund eingesetzt werden) dann können unschöne weisse Löcher neben den Bildern entstehen, wenn das Browserfenster weiter aufgezogen wird. Björn erläutert das Problem anschaulich und schlägt einige Lösungsansätze vor.
Von den Beispielen, die Björn noch auflistet, gefallen mir vor allem vivabit und deren Seite über media 2006, weil das Layout in praktisch allen Zoomstufen stabil und der Inhalt gut lesbar bleibt. Abgesehen von dem imponierenden Layout natürlich :-)
Von Peter am 19.01 um 21:02 Uhr. Kategorie: HTML-CSS
Trackback-URL: http://www.lisardo.biz/trackback/181/SxjYWOSb/