Responsive und Adaptive Layouts

Responsive oder Adaptive Layouts erfüllen vom Prinzip her den gleichen Zweck. Einfach ausgedrückt sollen sie dafür sorgen, dass eine Website auf allen möglichen Endgeräten bestmöglich zu sehen und zu bedienen ist. Wobei man in der Regel davon ausgehen kann, dass ein Responsives Layout dem Adaptiven überlegen ist. Aber wie für alle Regeln gibt es auch hier wieder die berühmten Ausnahmen.

Wo ist eigentlich der Unterschied?

Ein Adaptives Layout verwendet ein Raster mit fester Spaltenbreite, ausgedrückt in Pixeln.
Mit anderen Worten, die Spaltenbreiten verändern sich nicht relativ zu jeder beliebigen Breite des Browserfensters sondern nur bei bestimmten breakpoints (Messpunkten). Die Abmessung von Medien wie Bildern und Grafiken verändern sich entsprechend auch nur an den erwähnten breakpoints. Wir können also jeder Zeit pixelgenau arbeiten.

Ein Responsives Layout nutzt hingegen ein Raster mit variabler Breite, ausgedrückt in em oder Prozent.
Spaltenbreite und Medien skalieren relativ zur breite des Browserfensters. Auch hier werden breakpoints eingesetzt um die Spaltenbreiten sinnvoll zu justieren. Der jeweils verfügbare Anzeigebereich wird wesentlich effizienter ausgenutzt.

Was spricht für ein adaptives Layout?

Es bietet eine größere Kontrolle über das Design als solches, da wir uns nur mit einer Hand voll unterschiedlicher Zustände befassen müssen. Gerade die Typographie ist leichter in den Griff zu bekommen im Hinblick auf Schusterjungen bei Überschriften und gut lesbare Zeilenlängen. Es ist insgesamt schneller umzusetzen und einfacher zu testen als ein responsive Layout.

Besonders bei einer bereits bestehenden Website kann sich die Erweiterung um ein adaptives Layout als kostengünstige Alternative anbieten, wenn ein vollständiger Umbau (noch) nicht in Frage kommt.

2 Bemerkungen zu “Responsive und Adaptive Layouts

  1. avanzu

    Macht doch nen guten Eindruck, allerdings solltet ihr die Breakpoints noch mal prüfen.

    Leider erzeugt gerade das Bild mit den verschiedenen Endgeräten bei manchen Auflösungen nen horizontalen Scrollbar.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.