Liquid Design – die letzte Phase eines Auslaufmodells?

• Was ist eigentlich liquid design?
• Ist fixes Tabellenlayout wirklich fix?
• Freiheitsgrade und beherrschbares Seitenlayout
• Seitenzoom und Lupe – Abschied vom liquid-design?
• Fazit – soweit möglich …

• Nachtrag Dezember 2006 – Internet Explorer 7 

Was ist eigentlich liquid design?

Die Definition spare ich mir an dieser Stelle, hier will ich lieber ein paar provokante Denkanstösse platzieren.

Liquid design ist nichts neues, sondern das ursprüngliche Prinzip des Internet, als es das, was wir heute als Layout bezeichnen, noch gar nicht gab. Den Texten und Schriften wurden alle Freiheitsgrade gelassen. Es wurden lediglich Inhalt und Struktur des Dokumentes übermittelt, das jeweilige Ausgabegerät erstellte daraus ein Layout nach seinem Ermessen.

Mit der Einführung von Tabellen und Schriftformatierung wurden die Freiheitsgrade Schritt für Schritt beschnitten, es entstand dann irgendwann das, was man heute fixes Tabellenlayout nennt. 

nach oben

Ist fixes Tabellenlayout wirklich fix?

Mit zunehmendem Einsatz von Tabellen zu Layout-Zwecken (ich sage ganz bewusst nicht Missbrauch) kam dann die Diskussion auf, ob man zur Skalierung der Tabellen absolute oder relative Werte nehmen sollte. Das gleiche gilt natürlich auch für die Formatierung der Seitenbreite mittels CSS. Der Einsatz von relativen Werten wie z. B. "%" war dann der erste Ansatz (zurück) zum liquid design, der Einsatz von absoluten Werten wurde als Layout mit fixer Breite bezeichnet und auch sofort von den Hardlinern als unangemessen und den Prinzipien von html zuwider abgestempelt.

Vor allem, wenn in diesem Zusammenhang auch noch versucht wurde, die Vergrösserung oder Verkleinerung der Schrift zu verhindern und somit ein pixelgenaues Layout zu erreichen. Der Internet Explorer (IE) ermöglicht dies auch, indem er absolut in px oder pt formatierte Schriften nicht vergrössert oder verkleinert. Und nur dann kann man nach meiner Meinung von fixem und pixelgenauem Layout sprechen, so etwas gibt es also nur im IE.

Und während dieses Verhalten des IE von vielen Verfechtern des barrierefreien Internet verteufelt wird, halte ich es für richtig. Hier ist also der IE der einzige Browser, der sich korrekt verhält. Es ist falsch, auf den Browser zu schimpfen, der die Anweisung des Webdesigners korrekt umsetzt. Wenn schon, dann schimpft doch über den Webdesigner, der die Schrift absolut formatiert !!!

Damit wir uns nicht falsch verstehen, ich finde barrierefreies Internet absolut erstrebenswert, und begrüsse den von Opera eingeleiteten Trend zum Seitenzoom. Aber dazu später … Liquides Design heisst weiter nichts als "flüssiges Design". Auch in einer Layout-Tabelle mit einer fixen Breite von 760 verhält sich der Inhalt der Seite flüssig, so lange sich die Schrift vergrössern oder verkleinern lässt. Aber eben nach dem Thermometer-Prinzip, also nur in eine Richtung. 

nach oben

Freiheitsgrade und beherrschbares Seitenlayout

Was meine ich mit "Freiheitsgraden"? Nun, eine Seite mit fester Breite und absolut formatierter Schriftgrösse und Bildern hat keinen Freiheitsgrad. Das setzt allerdings nur der IE richtig um.

Formatiert man nur die Schriftgrösse relativ, aber die Seitenbreite und alle anderen Elemente absolut, hat das Layout 1 Freiheitsgrad, ich nenne das das "Thermometer-Prinzip", da sich die Seite bei Veränderung der Schriftgrösse nur in eine Richtung ausdehnt, unabhängig von der Bildschirm-Auflösung. Hier fängt nach meiner Auffassung das liquid design bereits an.

Der 2. Freiheitsgrad ist dann die relative Definition der Breite einer ganzen Seite, einer Spalte, einer Box oder eines frames (Ach ja, das gibt es ja auch noch . Die Seitenbreite passt sich der Bildschirmauflösung an, die Seitenhöhe ändert sich mit der Änderung der Schriftgrösse. Das ist dann das, was man allgemein "liquid design" nennt.

Mit jeder Gewährung eines Freiheitsgrades gibt der Webdesigner die Kontrolle über das Seitenlayout ein wenig auf. Internetseiten mit 0 Freiheitsgraden kann man ja eh nur für den IE gestalten, aber browserspezifisches Design lehne sogar ich ab .

Genau das ist es, was Webdesign (zur Zeit noch) von z. B. Printdesign unterscheidet. Der Webdesigner muss das Händchen und das Gefühl dafür haben, was unterschiedliche Ausgabemedien mit seiner Seite so machen, vor allem auf verschiedenen Bildschirmen, mit unterschiedlichen System-Einstellungen, Betriebssystemen, Browsern usw. Und dabei ist es hinsichtlich liquid design erst einmal egal, ob er die Seiten konservativ mit nur html gestaltet oder alles Layout mit feinstem CSS verwirklicht wird. 

nach oben

Seitenzoom und Lupe – Abschied vom liquid-design?

Mit Opera tut sich eine neue Welt auf, die eigentlich nur ein Schritt zurück zur Normaltät ist. Opera vergrössert nämlich nicht die Schrift, sondern die ganze Seite mit all ihren Elementen. Da funktioniert das Internet plötzlich wie alle anderen Programme auch, eben so, wie das Leben.

Wenn ich ein bedrucktes Blatt Papier vom Schreibtisch nehme und näher an die Augen führe, vergrössert sich nicht nur die Schrift, sondern auch alles andere. Die Seitenaufteilung bleibt so, wie sie ist. Und wenn ich zu nahe herangehe, habe ich nicht mehr das ganze Blatt im Blickfeld. Auf dem Bildschirm bedeutet das Scrollbalken.

Und somit wird ein absoluter Bruch mit dem ehernen Prinzip von html vollzogen, das da heisst: "html erzeugt Fliesstext, der sich den Gegebenheiten des Ausgabemediums anpasst". Nach meinen Informationen wird auch der IE7 ein Seitenzoom-Werkzeug bereitstellen. Inwieweit dann trotzdem noch die gewohnte Schriftvergrösserung angeboten wird, ist mir zur Zeit noch nicht bekannt. Wenn Seitenzoom und Lupe zum Standard bei den Internet-Browsern werden, ist pixelgenaues Design ganz plötzlich wieder denkbar.

Die (eigentlich veralteten) Design-Prinzipien des Internet, die ja aus den Zeiten der "nur-Informations-Vermittlung" stammen, könnten langfristig gegenstandslos werden. Internet-Seiten könnten in einer fixen Breite von 740 mit 4 Spalten zu je 185 Breite mit einer kleinen Schrift gestaltet werden, so dass man die einzelnen Spalten zur Not auch mit einem Handybrowser im Desktop-Modus lesen kann. Auf einem Bildschirm mit 800×600 ist die Schrift gut lesbar, auf dem 19-Zoller mit 1600-er Auflösung holt man sich die Seite einfach heran, zoomt sie grösser, bis der Bildschirm ausgefüllt ist. Das Layout bleibt erhalten, die Schrift wird gut lesbar.

Das funktioniert so in jedem Textverarbeitungs-Programm, warum nicht auch im Internet? Liquid design? Was ist das und wozu eigentlich?

Die relative Änderung der Schriftgrösse zu den anderen Elementen einer WebSite sollte dann natürlich nicht mehr möglich sein. Wenn die Browser der Zukunft sowohl Schriftvergrösserung als auch Seitenzoom anbieten, weiss der Webdesigner gar nicht mehr, wie er eine Seite gestalten soll. Es reicht schon, wenn wir mit einer solchen Situation in der Übergangszeit zurechtkommen müssen, bis die heutigen Browser vernachlässigbar sind. Und das kann dauern.

Wir sollten nie vergessen, dass unser eigentliches Publikum Leute sind, die neue Software nur mit einem neuen Computer kaufen. Die nehmen den Computer einfach so, wie er ist (fast jeder Computer ist heute von Haus aus recht komplett ausgestattet). Dass das so ist, zeigt uns der hohe Anteil des IE5 in unseren Statistiken.

Bei unseren Seiten zum Thema Webdesign mag das anders sein, bei den Seiten unserer Kunden aber, die sich mit anderen Themen beschäftigen, ist das eben so.

Was macht nun eigentlich ein Browser mit Seitenzoom mit einer Seite im liquid design? Nun, die Seite bleibt liquid und passt sich der Auflösung an, nur die Bilder werden eben (im Gegensatz zur nur-Schriftvergrösserung) mit vergrössert oder verkleinert. Es passiert im Prinzip das gleiche, wie wenn ich die Bildschirm-Auflösung verkleinere. Der Vorteil einer Seite im liquid design ist, dass auch bei Vergrösserung mittels Seitenzoom kein horizontaler Scrollbalken entsteht. Hier bleiben also die Prinzipien des Webdesign erhalten, der Text fliesst, und das Layout muss dieser Flexibilität Rechnung tragen.

Wir können eigentlich nur hoffen, dass die bestehenden Seiten im liquid design die Umstellung von Schriftvergrösserung auf Seitenzoom ohne Überarbeitungsbedarf überstehen. Ich konnte bisher nur mit Opera testen, da ich das Plugin für Firefox und den IE7 noch nicht habe. 

nach oben

Fazit – soweit möglich …

Meine Tests mit Opera haben ergeben, dass auch im Zeitalter des Seitenzoom das liquid design durchaus ein Stilmittel bleiben kann, aber es wird an Bedeutung verlieren.

Die Anhänger des pixelgenauen Layouts werden langfristig die Oberhand gewinnen, und die Verfechter der heutigen flexiblen Layouts sollten dieser Entwicklung tolerant und aufgeschlossen gegenüberstehen.

Aber dass da eine kleine Revolution auf uns zukommt, halte ich für sicher. Es ist ein fundamentaler Unterschied, ob nur einzelne Elemente einer Internet-Seite vergrössert werden, oder die ganze Seite. Viele Besonderheiten des Webdesigns werden dann einfach gegenstandslos.

Wir sollten aber auch nicht vergessen, dass der Grossteil unserer Besucher gar nichts mit unseren Seiten anstellt, nichts vergrössert, nichts verkleinert und die Seiten einfach so nimmt, wie sie auf dem Bildschirm erscheinen. Insofern werden alle Seiten auch mit den neuen Browsern zumindest im 100% Zoom aussehen, wie sie auch heute unter den gleichen Bildschirm-Bedingungen aussehen, also erstmal keine Panik.

Ich habe mir gar keine Mühe gegeben, alle Aspekte dieser Entwicklung zu überdenken, habe einfach mal aufgeschrieben, was mir zu Ostern bei schlechtem Wetter so zu diesem Thema eingefallen ist. Ich habe auch gar keine Lust, ein neues Forum aufzumachen, es gibt ja schon so viele zu diesen Themen. Aber wenn ein Betreiber eines Forums oder Blogs Lust hat, diese Gedanken zu diskutieren, nur zu, holt Euch den Text. Über einen Link auf diese Seite würde ich mich dann natürlich freuen. 

nach oben

Nachtrag Dezember 2006 – Internet Explorer 7

Hurra, Hurra, der IE7 ist da! Und natürlich mit Seitenzoom-Funktion! Das musste ich doch gleich mal testen.

Und natürlich verhält sich der Seitenzoom des IE7 ganz anders als der Seitenzoom des Opera-Browsers, vor allem in Bezug auf Seiten im liquid design. Etwas weiter oben habe ich geschrieben, dass liquide Seiten bei Benutzung des Seitenzoom im Opera liquid bleiben, genau wie bei der nur-Schrift-Vergrösserung des IE, nur dass die Bilder und alle anderen Elemente mit vergrössert oder verkleinert werden. Es entstehen keine horizontalen Scrollbalken, solange die Mindestbreite noch auf den Bildschirm passt.

Genau das ist beim IE7 anders. Die Seite wird komplett vergrössert, so wie sie auf dem Bildschirm ist, was sofort einen horizontalen Scrollbalken erzeugt. Nix mehr mit liquid. Dabei ist das eigentlich nur konsequent. Genauso, wie der Internet Explorer schon immer absolut formatierte Schriften nicht vergrössert, was ja nur die korrekte Ausführung der Vorgaben des WebDesigners ist. Seitenzoom ist eben eine Vergrösserung der Seite, so wie sie ist. Alternativ bietet der IE7 auch weiterhin die nur-Schrift-Vergrösserung an, bei der die Bilder nicht mit vergrössert werden. Da bleibt die liquide Seite natürlich liquid. Wie gehabt.

Die nur-Schrift-Vergrösserung der alten Browser wird also nicht aussterben, der Seitenzoom wird den Besuchern unserer Seiten nur noch mehr Möglichkeiten geben, mit dem Layout unserer Internet-Seiten zu spielen und sie nach Belieben zu verändern, egal ob liquid oder nicht.

Und so wird die Erfahrung versierter Web-Gestalter in Zukunft wohl mehr denn je gefragt sein, das Gespür dafür, die Seiten so zu gestalten, dass sie unter allen nur denkbaren Bedingungen noch ein halbwegs ordentliches Bild abgeben und bequem bedienbar bleiben.

Das beste Mittel gegen die Zerstörung des Seitenlayouts durch Schriftvergrösserung oder Seitenzoom ist, den Besucher gar nicht erst in Versuchung zu führen, diese Mittel anzuwenden, d. h. vernünftige Schriftgrösse und Seitenaufteilung. Meine Tests mir dem IE7 haben mir wieder einmal bestätigt, dass meine Art der Gestaltung von Internet-Seiten zukunftssicher ist. Fixes Tabellenlayout für 800×600p. Der Seitenzoom des IE7 erkennt, ob die Seite zentriert oder linksbündig ist, und stellt bei Seitenvergrösserung den Scrollbalken entsprechend ein. Bei linksbündigen Seiten liegt er links, bei zentrierten Seiten mittig.

Man kann die Seite soweit grosszoomen, bis sie den Bildschirm horizontal ausfüllt. Wenn dann jemand mal den Scrollbalken bedient, nur weil er eben da ist, wird er schnell merken, dass da rechts (oder links und rechts) nix interessantes mehr ist. Der horizontale Scrollbalken ist zwar da, stört aber nicht, weil er nicht bedient werden muss. Mir wäre es allerdings auch lieber, wenn der horizontale Scrollbalken erst dann erscheinen würde, wenn die Seite den Viewport sprengt.

Nun will ich aber nicht zu sehr frohlocken, wer weiss schon, was die nächste Version irgendeines Browsers so bringen mag, Redesign kann ja auch Spass machen & . In diesem Sinne ein frohes Fest und einen guten Rutsch ins neue Jahr 2007…

nach oben

 

Mittwoch, 15. März 2006, 21:18 Uhr

nach oben

zum Kommentar-Eingabeformular (Kommentare überspringen) »

Schreibe einen Kommentar

Kommentare erscheinen erst nach manueller Freischaltung.

nach oben