Was ist Responsive Webdesign?

Responsive Webdesign (RWD) ist eine Technologie der Programmierung von Inhalten bzw. Seiten im Internet. Mit Responsive Design lassen sich Texte, Bilder und andere Elemente automatisch so codieren, dass sie auf verschiedenen Geräten mit unterschiedlichen Bildschirmformaten und ­‑größen jeweils möglichst gut erkennbar und bedienbar dargestellt werden. „Responsive“ (englisch: reagierend) bezieht sich also darauf, dass die Software im Hintergrund einer Webseite aktiv auf den Screen des benutzten Endgerätes reagiert. Zum Beispiel ist die Ansicht auf dem Desktop anders als auf einem Tablet oder einem Smartphone. Dies kann man auch mit Adaptive Webdesign erreichen. Bei Adaptive Design passt sich das Layout allerdings nur ausgewählten Displaygrößen bestimmter Geräte an.

Die responsive, dynamische Form des Webdesigns ist eine Weiterentwicklung des ursprünglichen statischen Grid-Layouts für relativ einheitliche Querformat-Bildschirmgrößen und ‑Auflösungen. Solche Layouts werden auf Smartphones und anderen mobilen Endgeräten extrem klein dargestellt. Gezoomt wird dann der größte Teil des Inhalts erst durch horizontales Scrollen (etwa bei Texten) sichtbar. Wegen mangelnder Bedienfreundlichkeit auf den kleineren Bildschirmen veranlasst dies mobile Nutzer häufig zu Seitenabbrüchen.

Für die ersten mobilen Endgeräte wurden zunächst oft separate mobile Versionen von Websites erstellt. Da aber bereits im Bereich Smartphones keine einheitlichen Formate und Auflösungen vorlagen, uferte der Aufwand für Entwicklung und Wartung der mobilen Layouts ebenso wie für Aktualisierungen dieser Versionen schnell aus. Häufig war daher auch die Funktionalität der mobilen Webseiten gegenüber der Desktop-Version eingeschränkt.

Responsive Webseiten gehören zu den grundlegenden Faktoren für eine optimale Nutzung auf allen Endgeräten bzw. eine gute User Experience. Es ist inzwischen ein etablierter Standard für die Entwicklung von Websites. Außerdem ist es bereits seit 2015 ein wichtiger Ranking-Faktor von Suchmaschinen. Grund: Statt ausschließlich mit dem Desktop-PC gehen die Nutzer verstärkt mit mobilen Endgeräten online ins Internet.

Kostenfreie Online Marketing Beratung

Steigern Sie Ihre Reichweite und werden Sie sichtbar für Ihre Kunden!

Warum ist Responsive Webdesign wichtig?

Responsives Design passt Inhalte und Layout einer Webseite so an, dass der grafische Aufbau für verschiedene Endgeräte vorrangig entsprechend dem eingesetzten Bildschirm optimiert ist. Beim Design einer Webseite kann in der Regel kein bestimmtes Gesamt-Layout mehr entworfen werden, das auf eine Desktop-Ansicht abgestimmt ist. Somit sind auch layoutbezogene Hinweise wie „siehe unten“, Verweispfeile usw. oft hinfällig oder sogar irreführend.

Navigations-Menüs werden beim responsiven Layout für die Smartphone-Ansicht oft als Bar-Menüs oder in Form eines Menü-Buttons statt in einer Menüleiste dargestellt. Schriftgrößen passen sich flexibel an. Zeilenumbrüche sind verkürzt, Zeilenabstände angepasst, Spalten reduziert. In Textblöcke eingebettete Bilder erscheinen als eigene Blöcke über oder unter dem jeweiligen Absatz. Der Umgang mit interaktiven Elementen wie Buttons, kopierfähigen Texten oder Bildern und scrollbaren Inhalten funktioniert gerätespezifisch gleichermaßen über Tastatur, Maus oder Touchpad/Touchscreen. Bei der Darstellung von Buttons zum Beispiel werden diese für Touchscreens größer dargestellt, damit sie sich auf den mobilen Geräten leichter bedienen lassen.

Problematisch können Links in Fließtexten auf Webseiten sein, wenn sie dicht zusammen liegen. Wo sich solche Links per Maus noch verwechslungsfrei ansteuern und anklicken lassen, kann es bei Touchscreens auf kleineren Bildschirmen mit dem Finger bereits zu Fehlbedienungen kommen. Da Mobile Friendlyness (Benutzerfreundlichkeit auf mobilen Geräten) für Suchmaschinen wie Google zu den Rankingkriterien zählt, wirken sich zu eng liegende Links negativ aus.

Wie funktioniert Responsive Webdesign technisch?

Die technische Umsetzung von responsiven Websites entwickelt sich stetig weiter. Die technischen Möglichkeiten und Alternativen können hier nur stichwortartig angedeutet werden.

  • HTML5: Mithilfe des HTML-Codes werden Inhalte, Struktur und einzelne Elemente einer Seite definiert.
  • CSS3: Die Cascading Style Sheets (CSS) definieren Design und Layout der Elemente. Media Queries (Medienabfragen) sind ein Teil von CSS3. Die Media Queries ermitteln dabei Hoch- bzw. Querformat, Bildschirmgröße und ‑auflösung sowie Features wie Eingabemodus (Tastatur, Screen, Sprache), um mit sogenannten Breakpoints entsprechende Anpassungen zu ermöglichen.
  • Fluid Layout und Flexbox Layout sind weitere Techniken, um Responsive Design auf unterschiedliche Elemente anzuwenden.

Mehr über Webanalyse lernen!

Nehmen Sie an unseren Webinaren teil oder sehen Sie sich eine Aufzeichnung an.

Was gibt es beim Responsive Webdesign zu beachten?

Aus Effizienzgründen werden responsiv designte neue Webseiten meist nach einem Bottom-up-Ansatz entwickelt. Das bedeutet, dass die Elemente entsprechend dem Prinzip „Mobile First“ bzw. „Progressive Enhancement“ zuerst für kleine und leistungsschwächere Geräte gestaltet und strukturiert werden. Denn die flexible und dynamische Umgestaltung aller Elemente hin zu mehr Platz und Auflösung ist einfacher zu erreichen als umgekehrt.

„Graceful Degradation“ (würdige Herabstufung) heißt die Vorgehensweise, wenn man responsives Design auf eine bestehende Website mit statischem Design anwendet. Dabei werden stufenweise Elemente verkürzt, beseitigt oder in den Hintergrund bzw. nach unten verschoben, die vorher am Desktop-Bildschirm in einer Randspalte standen. Die wichtigsten Elemente bleiben dabei aber an prominenter Position stehen.

Ein weiteres durchgehendes Prinzip des Responsive Webdesign ist „Content first“. Das bedeutet, dass bei der Optimierung des Webdesigns Gesichtspunkte des Nutzerinteresses an den jeweiligen Inhalten im Zweifelsfall Vorrang gegenüber ästhetischen Aspekten haben.

Vor allem bei Bildern und Grafiken, aber auch bei wichtigen Inhalten wie Headlines sind der Responsivität Grenzen gesetzt. Große Bilder mit vielen kleinen Details etwa oder detaillierte Diagramme verursachen nicht nur lange Ladezeiten. Sie sind mitunter auch weder in Totalansicht noch durch Zoomen befriedigend darstellbar. Das gleiche gilt für Headlines, die mehr als zwei Zeilen beanspruchen, weil die Schrift aus Lesbarkeitsgründen keine weitere Verkleinerung erlaubt.

Ein entscheidendes Kriterium bei der Umsetzung von responsivem Design ist, eine hohe Ladegeschwindigkeit auch bei komplexen Inhalten zu gewährleisten. Andernfalls sind bereits nach zwei Sekunden spürbare Absprungraten der Nutzer zu erwarten.

Der erhöhte Aufwand beim Erstellen von responsiven Webseiten zahlt sich meist bei der späteren Pflege und Wartung aus. Mitunter wird die Mehrarbeit für verschiedene Seitenversionen aber in Kauf genommen, wenn bestimmte Seiteninhalte überhaupt nur auf großen Bildschirmen zur Geltung kommen, etwa bei künstlerischen Abbildungen, planlichen Darstellungen u. Ä.

Der Erfolg von Responsive Webdesign sollte stets getestet werden. Um responsive Websites zu überprüfen, bietet sich zum Beispiel der Mobile Friendly Test von Google an.

Zurück zum Glossar