Was ist Responsive Design?

Responsive Design bezeichnet technisch gesehen ein Zusammenspiel aus drei Bausteinen: flexiblen Rastern, die sich in Prozentwerten statt in festen Pixeln definieren, skalierbaren Bildern, die nie breiter werden als ihr Container, und CSS-Media-Queries, die je nach Bildschirmbreite unterschiedliche Stylesheets aktivieren. An bestimmten Schwellenwerten, den sogenannten Breakpoints, ändert sich das Layout: Eine dreispaltige Desktop-Ansicht wird auf dem Tablet zweispaltig und auf dem Smartphone einspaltig. Der zugrunde liegende Code bleibt dabei derselbe, nur seine Darstellung passt sich an das jeweilige Gerät an.

Entscheidend beim Responsive Design ist nicht die Technik allein, sondern die Reihenfolge, in der Inhalte gedacht werden. Beim Mobile-First-Ansatz entwirft man zuerst die kleinste Ansicht und erweitert sie schrittweise nach oben - das zwingt dazu, Inhalte nach Wichtigkeit zu sortieren, statt eine überladene Desktop-Seite nachträglich zusammenzustauchen. Häufig wird Responsive Design mit einer separaten mobilen Version verwechselt, wie sie früher unter eigenen Subdomains ausgeliefert wurde. Das ist ein anderes Konzept: Dort existieren zwei getrennte Codebasen, bei echtem Responsive Design dagegen nur eine, die sich selbst anpasst.

Ein zweites Missverständnis betrifft die Bedienung: Ein Layout, das zwar die Bildschirmbreite berücksichtigt, aber Buttons und Klickflächen in Desktop-Größe belässt, ist nicht wirklich responsiv, sondern lediglich verkleinert. Zu echtem Responsive Design gehört deshalb auch, Abstände, Schriftgrößen und Klickflächen für Finger statt für einen Mauszeiger auszulegen - und die Darstellung nicht nur am Browserfenster des Rechners, sondern auf tatsächlichen Geräten zu prüfen.

Responsive Design wird in der Praxis häufig mit Adaptive Design verwechselt, obwohl beide Ansätze technisch unterschiedlich funktionieren: Adaptive Design liefert für festgelegte Bildschirmbreiten mehrere fertige Layout-Varianten aus, während Responsive Design ein einziges Layout mit flexiblen Rastern fließend an jede beliebige Bildschirmgröße anpasst. Auch die Abgrenzung zu einer separaten mobilen Website oder zum Mobile-First-Ansatz sorgt regelmäßig für Verwechslungen – Mobile-First beschreibt lediglich die Reihenfolge der Gestaltung, nicht die zugrunde liegende Technik. Bei der Umsetzung von Responsive Design zeigen sich zudem drei wiederkehrende Fehler: Unternehmen übernehmen Breakpoints unreflektiert aus Vorlagen statt sie am eigenen Inhalt auszurichten, sie spielen auf mobilen Geräten dieselben großformatigen Bilder wie am Desktop aus und verschenken damit Ladezeit, und sie testen die Umsetzung nur am verkleinerten Browserfenster, statt sie auf echten Smartphones und Tablets zu prüfen.

Responsive Design lässt sich von einigen verwandten Konzepten klar abgrenzen: Reines Fluid Design streckt oder staucht ein Layout proportional zur Fensterbreite, ohne dass sich die Anordnung der Inhalte an Breakpoints grundlegend ändert – bei echtem Responsive Design springt das Layout dagegen an definierten Schwellenwerten in eine neue Struktur. Auch mit einer separaten mobilen Website unter eigener Subdomain wird Responsive Design oft gleichgesetzt, obwohl dort zwei getrennte Codebasen gepflegt werden müssen statt einer einzigen anpassungsfähigen. In der Praxis unterlaufen Unternehmen beim Umsetzen von Responsive Design typischerweise dieselben Fehler: Sie entwerfen zuerst die Desktop-Version und verkleinern sie nachträglich, statt Inhalte von der kleinsten Ansicht aus zu priorisieren, sie liefern auf dem Smartphone dieselben schweren Bilddateien wie am Rechner aus, und sie prüfen die Umsetzung nur im geschrumpften Browserfenster statt auf tatsächlichen Geräten mit echter Touch-Bedienung.