Unter responsive (Design) versteht man die Fähigkeit von Websites und Applikationen, sich an die Bildschirmgröße anzupassen. Ziel ist es, die bestmögliche Darstellung auf verschiedensten Endgeräten zu gewährleisten (z.B. Smartphones, Tablets und große Bildschirme). Da es unmöglich ist, das Design für alle auf dem Markt befindlichen Endgeräte zu optimieren, wird meist auf sogenannte Breakpoints zurückgegriffen:
Mithilfe von Breakpoints, die in CSS definiert werden, lässt sich die Darstellung in „von/bis“ Angaben für viele Geräte gruppieren. Sollen z.B. die gängigsten Smartphones abgedeckt werden, ist ein Breakpoint von 0px bis 576px sinnvoll. Obwohl diese Methode seine Schwachstellen hat (es gibt immer „Ausreisser“ bei Endgeräten), ist es nach wie vor der effizienteste Weg um ein vorhandenes Design auf eine Website zu übertragen. Zu diesem Zweck erstellt der Designer z.B. drei Ansichten pro Seite (Mobil, Tablet & Desktop), welche dann vom Entwickler als Basis für die Erstellung der Website verwendet wird.
In den Anfängen von HTML und CSS musste man noch auf diese Methode verzichten: Websites wurden so skaliert, dass der komplette Inhalt (in der Breite) in die Bildschirmgröße eingepasst wurde. Folglich sah die Website zwar auf allen Endgeräten gleich aus, musste aber auf kleinen Bildschirmen händisch hochskaliert werden, was die User experience enorm beeinträchtigte.
