Liquid design
„Liquid”, oder auch „fluid design” bedeutet „flüssiges” Design und steht im Gegensatz
zu einem „festen” oder „frozen” Design. Die Unterschiede liegen hier besonders in
der Anpassungsfähigkeit der Webseite auf die Benutzereinstellungen.
Im Gegensatz zu Printmedien kann man im Webdesign nicht von vorgegebenen Maßen ausgehen.
Bei einem Zeitschriftenentwurf sind die Maße des Papiers ebenso unverrückbar vorgegeben,
wie zum Beispiel die Schrifttype und die Schriftgröße.
Betrachtet man aber eine Webseite im Browser, so hat der Benutzer eine ganze Reihe
von Parametern, die entweder hardwareabhängig vorgegeben sind, oder nach persönlichen
Vorlieben angepasst werden können.
Dimension des Sichtfeldes
Der Browser ist üblicherweise eine Fensteranwendung, so dass die effektive Fläche,
die zur Anzeige der Webseite zur Verfügung steht, das Sichtfeld, sehr stark variiert.
Entgegen der oft geäußerten Ansicht hat das Sichtfeld rein gar nichts mit der
Bildschirmauflösung zu tun. Es ist daher völlig nebensächlich, ob eine
Bildschirmauflösung von 600*480, 800*600, 1024*768 Pixel, oder irgendeine andere
vorliegt. Das einzige was diese Zahl angibt ist, dass das Sichtfeld nicht größer
werden kann. Mehr nicht!
Ob der Browser im Vollbildmodus läuft, oder als Fenster zusammen geschoben in einer
Ecke platziert wurde, ist eine Entscheidung des Benutzers, und sollte es auch bleiben.
Daraus ergibt sich ein wesentlicher Nachteil eines fest vorgegebenen, starren Layouts,
wie man in
diesem Beispiel
sehen kann. Wird das Browserfenster schmaler, dann erscheint die horizontale Bildlaufleiste
und der Text verschwindet aus dem Sichtfeld. Somit wird der Benutzer gezwungen, entweder
die Seite beim Lesen jeder Zeile horizontal zu verschieben, oder sein Browserfenster
auf das vorgegebene Maß zu verbreitern.
Für mein Empfinden ist das eine genauso eindeutige Aufforderung, die Webseite zu verlassen,
wie der Versuch direkt (zum Beispiel mittels JavaScript) Einfluss auf die Größe des
Browserfensters zu nehmen.
Das „liquid design” passt sich dagegen an das Browserfenster an, wie Wasser an das
umgebende Glas. Wie in
diesem Beispiel
zu erkennen, wächst oder schrumpft die Breite der Seite mit der Fensterbreite, da die
Breite als prozentualer Wert des Sichtfeldes definiert wurde. Dadurch bleibt der Text
auch ohne horizontales Verschieben lesbar.
Skalierung der Schriftgröße
Ein weiterer sehr wichtiger Aspekt für die Benutzerfreundlichkeit ist die Möglichkeit,
die Schriftgröße anzupassen.
Menschen mit Sehschwäche werden die Schrift sicher gerne größer darstellen, als Normalsichtige.
Daher ist auch dies ein Parameter, der nur vom Benutzer festgelegt werden sollte.
Als Webseitenanbieter sollte man lediglich empfehlende Vorgaben machen. Also wären
hier Angaben in Pixel oder Pica zu vermeiden, um auch den Benutzern des IE
die Möglichkeit der Schriftgrößeneinstellung nicht vorzuenthalten. Andere Browser lassen
sich durch eine Schriftgrößenangabe in Pixel oder Pica erst gar nicht vom Skalieren abhalten.
Eine Angabe der Schriftgröße in % oder em ist deutlich
flexibler und zugänglicher. Die Maßeinheit em orientiert sich an den
Dimensionen des Buchstaben M der jeweiligen Schriftart, und ist also auch von deren
Größenskalierung abhängig.
Günstig ist diese Maßeinheit somit auch für gestalterische Elemente, deren Größe
vom enthaltenen Text abhängen soll. Eine Navigationsliste wäre dafür ein mögliches Beispiel.
Die beiden Textboxen auf der vorherigen Beispielseite zeigen, wenn man die Schriftgröße
verändert, dieses unterschiedliche Verhalten.
Probieren
Sie es aus.
Herausforderung
Die Anforderung an eine Webseite sollte lauten, möglicht einfach zugänglich zu sein,
und den Benutzer nicht zu bevormunden, sondern ihn im Gegenteil zu ermuntern und
einzuladen die Seite für ihn optimal ein- und darzustellen.
Dazu muss man sich allerdings von der Idee frei machen, ein punktgenaues Design
vorzugeben, dass auf allen Browsern identisch wiedergegeben wird. Tatsächlich
gestaltet Webdesign kein Blatt Papier mit starren Maßen, sondern entwirft ein
Layout auf einer Art Gummifolie, an der der Benutzer hin und her zerren kann.
Die besondere Herausforderung liegt nun darin, diesem flexiblen Bereich eine Gestalt zu geben, die ebenso flexibel ist, aber dennoch konstant das gewünschte Erscheinungsbild der Seite vermittelt.
Dieser Aufgabe gerecht zu werden ist sicherlich nicht einfach, da man insbesondere
für gestalterische Elemente wie zum Beispiel Grafiken Lösungen entwickeln muss,
um entsprechende Größenveränderungen abzufangen. Aber gerade diese Herausforderung
anzunehmen und zu meistern, kann auch die Attraktivität dieses Konzeptes für den
Gestalter ausmachen.
Fairerweise muss man einräumen, dass eine absolut „liquid” gestaltete Seite auch Nachteile
haben kann und nur sehr schwer ohne Kompromisse umzusetzen ist. Dennoch sollte
die Seite möglichst flexibel sein und den Besucher in seinen Vorlieben so wenig wie möglich einengen.
Kurz gesagt: so starr wie unbedingt nötig und so flexibel wie irgend möglich.