fest – flüssig – responsive – adaptive

Meine Erfahrung nach sind Layoutarten wie fest, flüssig, responsive oder adaptive gerade für Einsteiger schwer zuzuordnen. Deswegen habe ich jetzt einmal Minimalbeispiele gebastelt, die nur diese Begriffe verdeutlichen sollen. Um die Unterschiede nachvollziehen zu können, muss man das Browserfenster schmaler ziehen. Und ich habe eine Vereinfachung durchgeführt: ich zeige die unterschiedlichen Layouttypen nicht an vollständigen Layouts, sondern stelle jeweils zwei Bereiche gegenüber, die das unterschiedliche Verhalten deutlich machen.

fest im Unterschied zu flüssig

Das erste Gegensatzpaar, das ich zeigen möchte, ist fest im Unterschied zu flüssig. Ein festes Layout ändert sich nicht, wenn man das Browserfenster kleiner macht. Das Layout bleibt in den Ausmaßen, die es hat. Es erscheinen wenn das Browserfenster schmaler ist als das Layout horizontale Scrolleisten. Ein flüssiges Layout verhält sich anders: das Layout wird schmaler, wenn das Browserfenster schmaler gezogen wird.

Beide Layouttypen aber haben gemeinsam, dass es keine CSS-Anpassungen für kleinere Screens gibt, im Beispiel setze ich keine Media Queries ein. Beim festen Bereich erscheinen rasch die horizontalen Scrolleisten. Der flüssige Bereich passt sich an – aber irgendwann kommt ein Moment, wo das Browserfenster zu schmal ist und die Inhalte nicht mehr gut dargestellt werden können.

Beispiel fest im Unterschied zu flüssig

responsive im Unterschied zu adaptive

Bei den nächsten beiden Typen gibt es Anpassungen durch Media Queries (mehr zu Media Queries in meinem Video). Das bedeutet, dass das Layout sich verändert, wenn weniger Platz zur Verfügung steht. Beim responsiven und beim adaptiven Layout ändert sich die Darstellung von zweispaltig zu einspaltig.

Wie diese Veränderung geschieht und was dazwischen zu beobachten ist, ist bei responsive und bei adaptive unterschiedlich.

Wenn weniger als 920px zur Verfügung springt das adaptive Layout, der Layoutbereich wird auf eine feste kleinere Größe gesetzt, außerdem ist die Darstellung nicht mehr zweispaltig, sondern einspaltig. Ein weiterer Sprung geschieht, wenn weniger als 620px zur Verfügung steht.

Das responsive Layout verkleinert sich hingegen kontinuierlich, wenn das Browserfenster schmaler wird, bis zu dem Layoutsprung (zweispaltig -> einspaltige Darstellung), auch danach passt sich der Container weiter an. Man sieht auch schön, wie das Bild schmaler wird. Es gibt dabei unendlich viele Zwischenstufen.

Beispiel responsive im Unterschied zu adaptive

Kurzgefasst:

  • responsive: flüssiges Layout + Media Queries
  • adaptive: festes Layout + Media Queries

Bei echten Layouts gibt es natürlich auch Mischformen. Außerdem gibt es Möglichkeiten, Anpassungen ohne Media Queries durchzuführen. Deswegen ist das Gezeigte eine Vereinfachung. Ich hoffe aber, dass es hilft, die grundlegenden möglichen Verhaltensweisen zu unterscheiden.

Eine Antwort zu “fest – flüssig – responsive – adaptive”

  1. Hanna sagt:

    danke, das ist hilfreich