Responsive und Adaptive Layouts

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.

 Adaptive Responsive Webdesign