Eine adaptive Website nutzt genau wie eine responsive Seite sogenannte „Breakpoints” (beispielsweise je nach Breite des verwendeten Bildschirms), ab denen eine andere Darstellung erfolgt. Bei adaptiven Websites bleibt das Layout ansonsten aber statisch. Das kann zu unschönen, leeren Bereichen auf der Website oder dicht gedrängten Elementen an den Grenzen vor und nach einem dieser „Breakpoints” führen. Bei solchen Websites wird also je nach zugreifendem Gerät eine bestimmte, eigenständige Version der Seite aufgerufen (meist gibt es eine Version für den Desktop und eine für Smartphones). Der Pflegeaufwand im laufenden Betrieb ist bei dieser Lösung sehr hoch, da bei Änderungen immer sämtliche Website-Versionen angepasst werden müssen.
Beim fluiden Ansatz hingegen, wie er bei responsiven Websites meist zum Einsatz kommt, werden die Inhalte bei einem kleineren Browserfenster zunächst prozentual kleiner dargestellt und bei Erreichen einer Größen-Untergrenze umsortiert. Gelegentlich kommen auch sogenannte elastische Layouts zum Einsatz. Diese sorgen dafür, dass das Browserfenster immer vollständig gefüllt bleibt. Voraussetzung hierfür ist allerdings, dass alle Inhalte problemlos skalierbar sind – was bei Bildern und insbesondere bei Infografiken nicht immer der Fall ist.
Eine wirklich responsive Website passt sich in der Darstellung also dem jeweils zugreifenden Gerät möglichst gut an. Die technische Grundlage hierfür bilden sogenannte Media Queries, die innerhalb der Cascading Style Sheets (CSS) in der Version 3 eingeführt wurden. Dementsprechend folgt das responsive Design im wesentlichen drei Grundprinzipien:
Es gibt keine festen Schriftgrößen mehr: Diese werden je nach zugreifendem Gerät dynamisch angepasst.
Gleiches gilt für Bilder: Allerdings werden hier meist verschiedene Bildgrößen vorab gespeichert und je nach Gerät abgerufen.
Es gibt keine festen Layout-Gitter: Hier heißt das Zauberwort prozentuale Angaben. Die Gitter sind nicht in festen Pixelbreiten festgelegt, sondern werden je nach Gerät um einen gewissen Prozentsatz in der Breite (und somit auch der Höhe) skaliert.
Außerdem kommen auf mobilen Geräten häufig sogenannte Entscheidungspunkte zum Einsatz: Text, der in der mobilen Darstellung eine gewisse Höhe überschreiten würde, wird zunächst beschnitten und mit einem Hinweis versehen, der beispielsweise „Weiterlesen” lautet. So hat der Nutzer die Möglichkeit, den Inhalt der Seite mobil zunächst im Überblick zu erfassen und erst bei Bedarf durch einen längeren Text zu scrollen. Dieses Vorgehen hilft auch dabei, Ladezeiten einzusparen – insbesondere, wenn ein langer Text mit umfangreichem Bild- oder Videomaterial aufgelockert wurde.
