Adaptive Design ist ein Gestaltungsansatz, bei dem eine Seite mehrere fertige Layouts für festgelegte Bildschirmbreiten bereithält und je nach verfügbarem Platz zwischen ihnen umschaltet. Zwischen zwei Stufen bleibt alles, wie es ist: Der Inhaltsbereich behält seine feste Breite, der übrige Platz bleibt leer. Genau an dieser Stelle arbeitet Responsive Design anders, denn dort wächst dasselbe Layout mit jedem Pixel mit.
- Adaptive Design
Gestaltungsansatz mit einer festen Zahl von Layoutstufen, zwischen denen die Seite je nach Bildschirmbreite umschaltet.
Beispiel: „Das Layout ist adaptive gebaut: Bis 767 Pixel bleibt der Inhalt 320 Pixel breit, darüber springt er auf 750.“Auch: Adaptive Web Design, kurz AWD. Der Begriff wird uneinheitlich benutzt, teils für die Layoutstufen im Browser, teils für Gerätevarianten, die der Server ausliefert.
Abgrenzung: Responsive Design passt dasselbe Layout stufenlos an. Adaptive Design wählt aus vorbereiteten Zuständen aus.
Wie das Umschalten in Stufen funktioniert
Beide Ansätze benutzen dieselbe Technik, nämlich Media Queries. Der Unterschied liegt darin, was innerhalb einer Stufe passiert. Im adaptiven Aufbau bekommt der Inhaltsbereich pro Stufe eine feste Pixelbreite, die bis zur nächsten Abfrage gilt. Im responsiven Aufbau bekommt er eine Breite in Prozent und eine Obergrenze, an der das Mitwachsen endet.
/* Adaptive: feste Breite je Stufe */
.container { width: 320px; }
@media (min-width: 768px) { .container { width: 750px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }
/* Responsive: mitwachsende Breite mit Obergrenze */
.container { width: 100%; max-width: 1170px; }Sichtbar wird der Unterschied beim langsamen Ziehen am Browserfenster. Springt das Layout in Sprüngen, liegt ein adaptiver Aufbau vor. Läuft es mit, ist es responsive.
Der Unterschied in einem Satz
Responsive Design beschreibt, wie sich ein Layout zwischen zwei Breiten verhält. Adaptive Design beschreibt, wie viele fertige Zustände es dafür gibt. Daraus folgt der praktische Unterschied im Projekt: Stufen lassen sich einzeln abnehmen und sauber gegen einen Entwurf prüfen, weil jede Stufe genau ein Aussehen hat. Ein fließendes Layout muss dagegen auf jeder beliebigen Breite plausibel bleiben, auch auf denen, die niemand im Entwurf gezeichnet hat.
Warum die Grenze in der Praxis verwischt
Viele Projekte sind eine Mischung, ohne dass das jemand entschieden hätte. Klassische CSS-Frameworks liefern eine feste Container-Breite pro Stufe und verhalten sich damit adaptiv, während die Inhalte darin fließend umbrechen. Umgekehrt trägt manches Angebot das Wort adaptive im Text, meint damit aber nur ein responsives Layout mit wenigen Breakpoints.
Wir empfehlen deshalb, im Gespräch mit einem Dienstleister vom Verhalten zu sprechen statt vom Etikett. Die Frage, was zwischen zwei Breakpoints mit dem Inhaltsbereich passiert, klärt in einem Satz, worüber geredet wird.