Was ist Responsive Design?

Responsive Design: Definition und Herkunft

Der Begriff Responsive Web Design wurde 2010 von dem Webdesigner Ethan Marcotte geprägt. Die Idee: Statt für jedes Gerät eine eigene Version zu bauen, gibt es eine einzige Website, deren Layout flexibel auf den verfügbaren Platz reagiert.

Heute ist Responsive Design Standard. Ein großer Teil der Besuche erfolgt über Smartphones, und Google bewertet Websites überwiegend anhand ihrer mobilen Darstellung (Mobile-First-Indexierung). Eine Seite, die nur am Desktop gut aussieht, verschenkt daher Reichweite und Anfragen.

So funktioniert Responsive Design technisch

Drei Bausteine bilden die Grundlage: flexible Raster, die sich in relativen Einheiten statt in festen Pixeln aufteilen, flexible Bilder, die nie breiter als ihr Container werden, und CSS-Media-Queries, die ab bestimmten Bildschirmbreiten – sogenannten Breakpoints – das Layout umstellen.

Moderne Techniken wie CSS Grid, Flexbox und Container Queries machen Layouts noch anpassungsfähiger. Wichtig ist zudem das Viewport-Meta-Tag, damit mobile Browser die Seite nicht als verkleinerte Desktop-Ansicht darstellen.

• Mobile First: zuerst für kleine Bildschirme gestalten, dann erweitern
• Ausreichend große Schaltflächen für die Bedienung per Finger
• Gut lesbare Schriftgrößen ohne Zoomen
• Bilder in mehreren Auflösungen ausliefern
• Navigation, die auch einhändig erreichbar bleibt

Vorteile und Grenzen

Eine responsive Website bedeutet eine Codebasis, eine URL pro Inhalt und einen Pflegeaufwand. Das spart Kosten gegenüber separaten Mobilversionen und vermeidet doppelte Inhalte. Besucher erhalten auf jedem Gerät dieselben Informationen. Auch Änderungen an Inhalten oder Funktionen müssen nur einmal umgesetzt werden und stehen sofort auf allen Geräten zur Verfügung.

Grenzen gibt es dort, wo sich Nutzungssituationen stark unterscheiden. Eine komplexe Tabelle oder ein umfangreiches Dashboard lässt sich nicht einfach auf Handybreite stauchen. Hier braucht es eigene mobile Lösungen – etwa aufklappbare Karten statt Tabellen – oder ergänzend eine Progressive Web App.

Praxisbeispiel: Wann Responsive Design besonders zählt

Ein Restaurant erhält viele Besuche von unterwegs: Gäste suchen Öffnungszeiten, Speisekarte und Telefonnummer – meist auf dem Smartphone. Eine responsive Seite zeigt diese Informationen mobil ganz oben, mit Anruf-Button und Route per Fingertipp, während am Desktop mehr Raum für Bilder und Atmosphäre bleibt. Bei Onlineshops gilt dasselbe Prinzip für Warenkorb und Checkout: Die wichtigsten Schritte müssen mobil mühelos funktionieren.

So wurde etwa die Website von Oki's Knusperhähnchen in Germersheim mobil optimiert umgesetzt. Wichtig ist, nicht nur im Browser-Simulator zu prüfen, sondern auch auf echten Geräten mit unterschiedlichen Bildschirmgrößen. Nano Concepts entwickelt Websites und Web-Apps grundsätzlich responsiv und testet sie auf gängigen Geräten und Browsern.