Heute ist es für uns normal, auf dem Smartphone oder Tablet eine Website zu öffnen, die übersichtlich dargestellt und einfach zu navigieren ist. Vor rund zehn Jahren war das noch nicht flächendeckend der Fall. Was sich seitdem getan hat? Responsive Webdesign ist in der Breite angekommen.
Worum es sich dabei genau handelt, wie das Webdesign für mobile Endgeräte funktioniert und welche Vorteile es bietet, erklären wir euch in diesem Artikel.
deine Website
mit Jimdo
Jedes Business braucht eine eigene Homepage. Mit Jimdo gestaltest du deine in nur wenigen Schritten.
- Ohne Programmieren
- Mobile-optimiert
- Social-Media-Integration
- Abmahnsichere Rechtstexte
Definition: Was ist Responsive Webdesign (RWD)?
Responsive Webdesign ist eine Form des Webdesigns, bei dem eure Website so programmiert wird, dass sie sich automatisch an verschiedene Bildschirmgrößen und Geräte anpasst – egal ob Smartphone, Tablet oder Desktop. Der Begriff wurde vom US-amerikanischen Webdesigner Ethan Marcotte erstmals 2010 verwendet.
Wie funktioniert Responsive Webdesign?
Das Herzstück von Responsive Webdesign (oft auch mobiles Webdesign genannt) sind flexible Layouts und sogenannte fluid grids, die sich dynamisch und automatisch an die Größe des Bildschirms anpassen. Wenn ihr etwa über Jimdo eine mobile Website erstellen möchtet, greifen diese Mechanismen im Hintergrund.
Ein einfaches Beispiel: Wenn ihr ein Bild auf eurer Responsive Website einsetzt, das auf eurem Laptop 600 Pixel breit ist, wird es auf eurem iPhone ggf. nur 300 Pixel breit sein – bleibt aber scharf.
Ein weiterer wichtiger Bestandteil dessen sind CSS Media Queries. Damit lassen sich verschiedene Stile für unterschiedliche Bildschirmgrößen definieren. So wird sichergestellt, dass eure Website oder euer Onlineshop immer optimal dargestellt wird – egal, welches Gerät eure Besucher*innen verwenden.
Elemente einer Responsive Website: Wie ist die Funktionsweise?
Gehen wir etwas tiefer ins Detail. Dazu ist es wichtig, dass ihr vor allem die folgenden drei Elemente im Responsive Webdesign kennt:
-
Breakpoints: Diese legen fest, ab welchen Bildschirmgrößen sich das Layout der Responsive Website anpasst. Dadurch wird das Design bei verschiedenen Geräten – von Smartphones über Tablets bis hin zu Desktops – immer korrekt dargestellt. Meist liegen die Breakpoints bei 480, 800, 1.024 und 1.280 Pixeln. Diese Größen sind die gängigsten bei heutigen Endgeräten.
-
Flexible und lesbare Schriftarten: Schriften sollten skalierbar sein, um sowohl auf Desktop-Bildschirmen als auch einem Tablet oder Smartphone gut lesbar zu bleiben. Das verhindert, dass Nutzer*innen auf kleineren Bildschirmen zoomen müssen.
-
Intuitive, responsive Navigation: Menüleisten sollten sich an verschiedene Bildschirmgrößen anpassen – typisches Beispiel ist ein Dropdown-Menü. Auf Smartphones wird es manchmal als ausklappbares Menü angezeigt, auf dem Laptop hingegen als horizontale Leiste.
Technische Basis: HTML und CSS sind die Grundbausteine für Responsive Design. HTML strukturiert den Inhalt der Seite, während CSS als Programmiersprache dafür sorgt, dass Layout und Design an verschiedene Bildschirmgrößen angepasst werden.
Responsive vs. Adaptive Design: Vorteile und Nachteile
Ein Responsive Design passt sich flexibel an jede Bildschirmgröße an, indem es wie beschrieben fließende Layouts und CSS Media Queries nutzt. Es gibt allerdings auch noch einen anderen Ansatz: Das Adaptive Design verwendet feste Layouts, die nur für bestimmte Bildschirmgrößen optimiert sind.
Hier passt sich euer Design also nicht dynamisch an, sondern es gibt vordefinierte Versionen eures Onlineshops oder eurer Website für verschiedene Geräte.
Vorteile des Responsive Webdesigns:
-
Eine einzige Website für alle Geräte
-
Flexibilität und Skalierbarkeit
-
Bessere Nutzererfahrung durch ein konsistentes Design
Ein Nachteil des Responsive Webdesigns ist jedoch die teils etwas längere Ladezeit einer Seite. Zudem kann es vorkommen, dass eine Seite auf einem bestimmten Gerät mit außergewöhnlicher Größe nicht perfekt angezeigt wird.
Vorteile des Adaptive Designs:
-
Schneller auf spezifischen Geräten
-
Perfekt zugeschnitten auf gängige Bildschirmgrößen
Der klare Nachteil des Adaptive Designs: Es ist deutlich mehr Programmieraufwand. Zudem kann es auch hier das Problem geben, dass bestimmte Größen nicht abgedeckt sind.
Warum ist Responsive Webdesign so wichtig?
Vor rund zehn Jahren lag der Anteil der Internetnutzung mit mobilen Endgeräten bei knapp einem Drittel. Die meisten Onlineshops und Websites wurden also von einem Desktop-PC aus aufgerufen. Heute sieht das deutlich anders aus, weshalb Responsive Webdesign heute unverzichtbar ist – der Anteil liegt mittlerweile weltweit bei 57 Prozent, in Asien sogar bei 70 Prozent.
Ein weiterer Grund, warum ein Responsive Design für eure Seite(n) wichtig ist: Google setzt auf die sogenannte Mobile-First-Indexierung – das heißt, mobile-optimierte Websites werden in den Suchergebnissen bevorzugt behandelt.
Zusätzlich verbessert eine Responsive Website oder ein Responsive Onlineshop die Benutzererfahrung, indem es alle Grafiken, Bilder, Schriften & Co. über alle Geräte hinweg gleich darstellt und euren Besucher*innen eine einfache Navigation ermöglicht. Das sorgt dafür, dass potenzielle Kund*innen länger auf eurer Seite verweilen und eher kaufen oder euch kontaktieren.
Tipp: Letztlich spart ihr beim Responsive Webdesign auch bares Geld. Schließlich müsst ihr nur eine Responsive Website pflegen und nicht wie beim Adaptive Webdesign gleich mehrere.
3 Beispiele für gelungene Responsive Webdesigns
Fast alle Websites sind mittlerweile responsiv und passen sich auf verschiedene Desktop-Bildschirme und digitale Geräte an. Wir zeigen euch beispielhaft drei Responsive Webdesigns.
1. Jimdo
Unsere eigene Website macht es vor. Egal, ob auf dem iPhone, einem anderen Smartphone, Tablet oder einem Laptop: Die Seite funktioniert immer und lässt sich einfach navigieren.
2. Zalando
Vor allem große Unternehmen haben überzeugendes Responsive Webdesign – auch der Onlineshop von Zalando zählt dazu. Er besticht durch eine sehr übersichtliche Darstellung auf allen Geräten.
3. 13 6
Es muss aber nicht immer ein großes Unternehmen sein. Die Kreativagentur 13 6 setzt ihr Responsive Design sehr gut um – was aufgrund der verwendeten großflächigen Animation gar nicht so einfach ist.
Tipp: Ihr könnt testen, wie eure Website auf verschiedenen Endgeräten aussieht. Dafür gibt es jede Menge Tools und Websites, etwa die von Be Responsive.
Fazit: Eine responsive Darstellung ist heutzutage Pflicht
Wenn ihr eine Website für euer Unternehmen erstellt (hier geht’s zum Leitfaden für Anfänger*innen), ist Responsive Webdesign Pflicht. Ihr verärgert ansonsten Kund*innen, die mobil auf eure Seite zugreifen – und das könnt ihr euch im Wettbewerb nicht leisten. Auch Google legt immer mehr Wert auf responsives Design und indexiert Seiten, die diesen Ansatz gut umsetzen, mit Vorliebe.