Blog Themen
- Alle Beiträge (43)
- Dies und Das (4)
- Finanzen (3)
- Politik (7)
- TV-Ges(ch)ehen (5)
- Unfug (5)
- Webdesign (16)
- WordPress (7)
Links
Archiv
Fix, flexibel, fluid, liquid, elastisch – ja was denn nun?
Immer wieder werden die verschiedenen Layout-Varianten von Internetseiten auf einschlägigen Blogs und Foren heiss diskutiert. Und immer wieder entgleisen diese Diskussionen, weil Leute mit diskutieren, denen die Begriffe fixe Breite, flexibles Layout, elastisches und liquides / fluides Layout nicht klar sind.
Es wird einfach aneinander vorbei diskutiert.
Deshalb habe ich mich entschlossen, diese Begriffe mal auf meinem eigenen Blog zu klären, damit meine Kommentare nicht länger werden als die Beiträge der Autoren. Jetzt kann ich einfach hierher verlinken 
.
- Layout mit fixer Breite
- Liquides oder fluides Layout
- Elastisches Layout (Zoomlayout)
- Was ist eigentlich flexibles Layout ?
- Was bringt die Zukunft?
Layout mit fixer Breite
Bei einem Layout mit fixer Breite wird width für alle Elemente (Boxen, Bilder usw.) in px formatiert. Bei Textvergrösserung verändern sich die horizontalen Abmessungen der Seite nicht, die Seite wächst nur nach unten, durch die grössere Schrift und die damit verbundenen Zeilenumbrüche im Fliesstext.
Ist der Viewport kleiner als die horizontale Breite der Seite, entsteht ein horizontaler Scrollbalken. Der Viewport ist das Browserfenster abzüglich Scrollbalken, Kopf- und Fussbereich des Browsers und evtl. Sidebars (z. B. Bookmarks oder Favoriten).
Hier gibt es keine Missverständnisse, das ist so ziemlich jedem klar.
Beispiel: dieses Blog
Übrigens: genaugenommen lassen sich richtig fixe Layouts in der derzeitigen Browserlandschaft gar nicht umsetzen, weil alle Browser ausser dem IE auch in px definierte Schriften vergrössern. Was wir als fixes Layout bezeichnen, ist eigentlich nur ein horizontal fixes Layout, vertikal ist es flexibel.
Bei einem richtig fixen Layout müssten wir nicht nur width in px auszeichnen, sondern auch height und die Schriftgrösse. Dann würden aber (ausser im IE) die Inhalte nach unten aus den Boxen herauswachsen, sobald man die Schrift vergrössert. Die Inhalte würden sich überlagern oder verschwinden, je nach dem, wie der overflow definiert ist.
Wir machen also alle eigentlich nur mehr oder weniger flexible Layouts, entweder nur vertikal flexibel oder vertikal und horizontal flexibel . Das ist natürlich ein wenig provokant, theoretisch und verquer gedacht, aber ich habe schon irgendwie bewusst als Zwischenüberschrift "Layout mit fixer Breite" gewählt statt einfach nur "fixes Layout".
Liquides oder fluides Layout
Liquides (auch fluid genanntes) Layout bezieht sich auf das Verhalten von Flüssigkeiten (liquid) und Gasen (fluid).
Flüssigkeiten und Gase breiten sich in ihrem Behälter aus, auf die Internetseite bezogen heisst das, dass sich die Seite horizontal dem zur Verfügung stehenden Viewport anpasst, und zwar automatisch, ohne dass der Nutzer etwas dazu tun muss.
Erreicht wird das, indem width für die Grundelemente einer Seite, die für die horizontalen Abmessungen der Seite zuständig sind, in % ausgezeichnet werden. Bilder usw. werden in der Regel weiterhin in px ausgezeichnet oder gar nicht.
Um zu vermeiden, dass die Seite unter extremen Bedingungen schlimm aussieht oder schlecht benutzbar oder lesbar ist, wird einem liquiden Layout oft mittels der CSS-Eigenschaften minwidth und maxwidth eine Mindestbreite und eine maximale Breite in px zugewiesen.
Horizontale Scrollbalken entstehen erst, wenn minwidth unterschritten wird oder ein Wort oder ein Element zu gross für den Viewport ist.
Dabei muss man jedoch in Kauf nehmen, dass ältere Browser minwidth und maxwidth nicht interpretieren.
Beispiel: meiert.com
Elastisches Layout (Zoomlayout)
Lange bevor der Opera den Seitenzoom eingeführt hat, den inzwischen nahezu alle modernen Browser anbieten, haben findige Webdesigner eine Möglichkeit gefunden, die horizontale Ausdehnung einer Internetseite an die Schriftgrösse anzulehnen. Den ach so modernen Seitenzoom gab es also schon lange vor dem Opera, allerdings wurde er nicht durch den Browser erzeugt, sondern durch den Webdesigner mittels CSS.
Die horizontale Ausdehnung aller Elemente einer Internetseite wird in em ausgezeichnet, incl. der Bilder und aller anderen Objekte. Das erzeugt einen Seitenzoom bei Vergrösserung der Schrift, unabhängig davon, ob der Browser einen Seitenzoom hat oder nicht. Alle Boxen, Container, Bilder und anderen Elemente wachsen mit der Schriftgrösse.
Das nennt man elastisches Layout, weil sich die Seite verhält wie ein Luftballon, den man aufbläst. Mit dem grösser werdenden Luftballon wird auch alles, was da drauf gedruckt ist, grösser: Schriften, Bilder, Logos usw. Die Haut eines Luftballons ist elastisch.
Bei einer solchen Seite ist es egal, ob man den Textzoom oder den Seitenzoom benutzt, sie verhält sich immer gleich, immer wie im Seitenzoom. Deshalb werden diese Layouts auch Zoomlayout genannt.
Seitenzoom für alte Browser, sozusagen … Beispiel: zdf.de
Was ist eigentlich flexibles Layout?
Hier scheiden sich die Geister. Wann ist eine Website flexibel? Genau hier entstehen die Missverständnisse in den vielen Diskussionen.
Fix steht für ein Layout mit fester, in px ausgezeichneter Breite.
Flexibel heisst zunächst einmal "nicht fix", dazu gehören ganz klar liquide / fluide Layouts. Die meisten zählen aber auch die elastischen Layouts zu den flexiblen Layouts. Flexibel als Oberbegriff für alles, was nicht fix ist.
Man kann das aber auch anders sehen.
Bei Seitenzoom verhält sich nämlich eine elastische Seite genauso wie eine Seite mit fixer Breite.
Bei Schriftvergrösserung verhält sich eine elastische Seite wie eine Seite mit fixer Breite bei Seitenzoom. Das Layout bleibt erhalten, die Seite wächst insgesamt, mit all ihren Elementen.
Das ist, zugegeben, sehr verwirrend. Wozu gehört denn nun das elastische Layout, ist es ein flexibles Layout oder ein auf die Spitze getriebenes fixes Layout, das auch bei Schriftvergrösserung erhalten bleibt, nur eben grösser wird?
Den Begriff "flexibles Layout" als Oberbegriff für liquide und elastische Layouts und alle möglichen Mischformen dieser beiden zu verwenden, ist meiner Meinung nach falsch und stiftet nur Verwirrung. Flexibel sind meiner Meinung nach nur liquide Layouts, da sich diese ohne Zutun des Nutzers flexibel an den Viewport anpassen.
Ich sehe 3 grundsätzliche Designvarianten::
- Layout mit fester Breite (fixes Layout)
- liquid / fluides Layout (flexibles Layout)
- elastisches Layout (Zoomlayout)
Natürlich gibt es auch gemischte Layouts. Ein elastisches Layout kann durchaus fixe Elemente beinhalten, in einem liquiden Layout kann man elastische Elemente anordnen usw.
Grundsätzlich sollten aber diese 3 Layout-Varianten klar sein, bevor man in einem Forum oder Blog mitreden will.
Den Begriff "flexibles Layout" sollte man vermeiden, da auf Grund der weit verbreiteten unklaren Verwendung dieses Begriffes Missverständnisse vorprogrammiert sind.
Was bringt die Zukunft?
Da in der Zukunft wohl alle Browser sowohl Textzoom als auch Seitenzoom anbieten werden, wird das elastische Layout als Stilmittel wohl überflüssig werden. Das erledigen dann die Browser mittels Seitenzoom.
Ein elastisches Layout nimmt dem Nutzer die Freiheit zu entscheiden, ob er nur die Schrift oder die ganze Seite vergrössern will, es wird immer die ganze Seite vergrössert. Ein Nutzer mit einem schmalen Viewport wird nur die Schrift vergrössern wollen, um horizontale Scrollbalken zu vermeiden. Bei einem elastischen Layout geht das aber nicht.
Liquides Layout wird auch weiterhin ein Stilmittel des Webdesign bleiben. Mit minwidth und maxwidth wird man das dann auch zunehmend gut steuern können, irgendwann wird der IE6 die gleiche Bedeutung haben wie heute der NN4.
Generell könnte ich mir vorstellen, dass das Verhalten von Internetseiten in der Zukunft immer weniger vom Webdesigner beeinflussbar sein wird.
Schon heute wird die Vorgabe einer fixen Breite von den Browsern mittels Seitenzoom ausser Kraft gesetzt. Welcher Webdesigner hätte denn vor ein paar Jahren schon gedacht, dass die Browser aus seinem fixen Layout ganz einfach mittels Seitenzoom ein elastisches machen???
Vielleicht wird ja in nicht allzu ferner Zukunft auch ein elastisches Layout durch die Browser ignoriert werden. Es wird dann 2 Buttons geben, gleichberechtigt und friedlich nebeneinander auf der Oberfläche, Textzoom und Seitenzoom. Wo man draufdrückt, das passiert, egal, was im CSS steht.
Dann entscheidet endlich der Nutzer, wie sich die Seite verhält, ob nur der Text grösser wird oder die ganze Seite, unabhängig davon, was der Webdesigner vorgibt. Wir Webdesigner bestimmen dann nur noch, wie die Seite beim Aufruf unter den Standardeinstellungen aussieht, fixe Breite oder bildschirmfüllend / liquid.
Dann wird es nur noch fest oder flüssig geben, fix oder liquid, und wenn jemand von flexibel spricht wird dann eindeutig sein, was er gemeint hat.
Freitag, 8. August 2008, 16:46 Uhr
zum Kommentar-Eingabeformular (Kommentare überspringen) »
Am 3. Mai 2009 um 11:44 Uhr
Imho sollte aber jede Seite liquid Programmiert sein. Natürlich könnte das der Browser übernehmen, bei Bilder resultiert ein Seitenzoom aber immer (noch) in Qualitätsverlust.
Btw, ein sehr informativer und gut geschriebener Beitrag, elastisches Layout wäre mir z.B. noch nirgends aufgefallen!