Skip to main content

Responsive Design


PDF herunterladen

Was ist Responsive Design?

Als Responsive Design versteht sich laut Definition in der digitalen Branche die an verschiedene Bildschirmgrößen angepasste Darstellung einer Webseite. Durch die optimale Darstellung einer Webseite, egal auf welchem Endgerät, ergeben sich für den Webseitenbetreiber vielerlei Vorteile. Im digitalen Zeitalter wird das Responsive Webdesign dadurch nahezu unerlässlich.

Responsive Webdesign: Das optimale digitale Erlebnis

Wer den Launch einer Webseite oder deren Relaunch plant, muss eines bedenken: Nutzer greifen mit vielen verschiedenen Geräten auf digitale Inhalte zu. Zum Beispiel per Desktop-PC, Laptop, Tablet oder Smartphone. Wer mehrere Geräte benutzt und damit auf Webseiten zugreift, dem fällt vor allem eines auf: Das Layout auf einem Desktop-PC ist häufig horizontal aufgebaut, auf dem Smartphone liegen die Inhalte der Webseite jedoch untereinander und die Buttons sind zusätzlich vergrößert dargestellt. Das liegt daran, dass die Webseiten mit einem Responsive Design ausgestattet sind. Die Webseite ist dadurch in der Lage, sich in Echtzeit an die Bildschirmgröße des verwendeten Endgerätes anzupassen. Die Breite des Displays wird so optimal ausgenutzt, während gleichzeitig bedacht wird, dass auf mobilen Endgeräten statt mit Tastatur und Maus mit den Fingern gearbeitet wird – die vergrößerten Buttons ermöglichen eine vereinfachte Bedienung.

Grundlage für langfristigen Erfolg im digitalen Wandel?

Der Begriff des Responsive Design tauchte erstmals im Jahr 2010 in einem Webmagazin mit dem Titel “A list apart” auf. Das Webmagazin definierte Responsive Design so, dass es darum ginge sicherzustellen, dass Inhalte einer Webseite auf allen Endgeräten und Bildschirmgrößen korrekt dargestellt werden. Die Inhalte passen sich dafür dynamisch an die verschiedenen Bildschirmgrößen und -auflösungen an.

Im digitalen Zeitalter, das seit jeher einem Wandel unterliegt, ist das besonders wichtig: Immer mehr Nutzer konsumieren digitale Inhalte, statt über PC und Laptop, über mobile Endgeräte wie Smartphones oder Tablets.

Die Suchmaschine Google verzeichnete im Jahr 2015 erstmals mehr Suchanfragen, die über das Smartphone getätigt wurden als über den PC oder Laptop. In 2020 lag dieser Wert bereits bei 60 %. Google sieht das Responsive Design heute daher als einen der wichtigsten Rankingfaktoren an, den auch Webseitenbetreiber nicht vernachlässigen sollten.

Laut einer Studie des “Bundesverbands für digitale Wirtschaft” erfolgt zudem jeder zehnte Einkauf am PC nach einer dazugehörigen Recherche am Smartphone. Dazu kommen zwei Drittel der Einkäufe, die per Smartphone getätigt werden, und denen eine Vorbereitung in Form einer Recherche am PC vorangeht. Dadurch wird ersichtlich, dass die beiden Kanäle nicht getrennt voneinander, sondern einander ergänzend betrachtet werden sollten.

Responsive Webdesign oder Adaptive Webdesign?

Neben dem Responsive Design ergibt sich für das Layout einer Webseite sowie dessen Optimierung noch eine andere Möglichkeit: Das Adaptive Webdesign. Doch was genau ist unter diesem Begriff zu verstehen und wie unterscheidet es sich vom Responsive Design?

Responsive Webdesign

Beim Responsive Webdesign geht es um eine flüssige Anpassung aller Webseiten-Inhalte an den Bildschirm des jeweiligen Endgerätes. Bilder und Texte passen sich an die Bildschirmbreite an, wobei die gesamte Breite des Displays genutzt wird. Erkenntlich wird dies, wenn das Browserfenster auf dem Desktop-PC oder auf dem Laptop horizontal zusammengezogen wird. Die Webseite verkleinert sich proportional und ergibt nun die mobile Ansicht.

Der Nachteil: Bei sehr großen Bildschirmen kann es vorkommen, dass sich die Zeilen in Textblöcken horizontal verschieben und in langen Zeilen resultieren, die die Lesbarkeit des Textes verschlechtern.

Adaptive Webdesign

Das Adaptive Webdesign unterscheidet sich vom Responsive Design daher, dass sich das Webseiten-Layout nicht flüssig an die Bildschirmbreite anpasst. Stattdessen werden verschiedene Versionen einer Webseite für verschiedene Displaygrößen erstellt. Daraus ergeben sich je ein Layout für Desktop, Tablet und Smartphone. Auch hier kann die Probe gemacht werden, indem das Browserfenster horizontal zusammengeschoben wird. Das Layout verkleinert sich nicht proportional wie beim Responsive Design, sondern bleibt bis zu einer bestimmten Breite fix und springt dann auf das jeweilige Layout um.

Der Nachteil liegt bei dieser Version darin, dass mehrere Versionen einer Webseite erstellt werden müssen, die zudem nicht zwingend auf alle Endgeräte und Bildschirmgrößen optimiert sind.

Die Kernprinzipien des Responsive Webdesign

Um die eigene Webseite optimal auf alle Displaygrößen abzustimmen und sie für alle Endgeräte gleichermaßen nutzerfreundlich zu gestalten, ist das Responsive Layout ein wichtiger Schritt, der getan werden muss. Doch auch hier gilt es, einige Punkte zu beachten, um die Webseite für alle Nutzer bestmöglich zugänglich zu machen.

  • Dynamisches Layout

Das dynamische Layout setzt auf relative Werte statt auf genaue Angaben. Das bedeutet zum Beispiel, dass eine Spalte im Layout statt mit einer festen Breite von 200 Pixeln, mit einer relativen Breite von 20 % des Layouts bemessen wird. Dadurch lässt sich alles flexibel an verschiedene Displaygrößen anpassen, ohne Darstellungsfehler zu erhalten.

  • Relative Schriftgröße

Was für das Layout gilt, gilt auch für die Schriftgrößen. Relative Werte sind der Key-Faktor.

  • Variable Bildgröße

Bilder sind meist das zentrale Element einer Webseite und häufig deren Aushängeschild. Daher ist es wichtig, dass die Bilder richtig angezeigt werden und sowohl auf großen als          auch auf kleinen Bildschirmen gut zu erkennen sind. Auf fest definierte Bildgrößen sollte darum verzichtet werden. Stattdessen sollten die Bildgrößen angepasst werden, damit sie gerade bei mobilen Endgeräten richtig angezeigt, und lange Ladezeiten wegen zu großer Bilddateien vermieden werden.

Was bedeutet Responsives Webdesign für SEO?

Für Webseitenbetreiber dürfte ein (Re-)Launch der eigenen Webseite im Responsive Design nicht nur in Bezug auf Usability interessant sein, sondern auch mit Blick auf SEO.

Ist eine Webseite nicht responsiv, sinkt auch deren Nutzerfreundlichkeit, da sie zwar auf dem Desktop gut zu bedienen und zu lesen ist, auf dem Tablet oder Smartphone Inhalte jedoch verzerrt oder unvollständig angezeigt werden. Fehlt das Responsive Design im Layout, wirkt eine Webseite schnell unprofessionell und erhöht die Absprungrate von Nutzern mobiler Endgeräte. Ein schlechtes Nutzererlebnis und eine erhöhte Absprungrate liefern daher auch keine guten Ergebnisse in der Bewertung durch Suchmaschinen und haben ein schlechteres Google-Ranking zur Folge.

H3 Vorteile und Nachteile für Webseitenbetreiber

Für Webseitenbetreiber liefert Responsives Webdesign mit Blick auf eine suchmaschinenoptimierte Webseite demnach einige Vorteile, doch gleichzeitig auch Aspekte, die mitbedacht werden müssen:

Vorteile

  • positiver Eindruck und Professionalität, auch bei unterschiedlichen Displaygrößen
  • benutzerfreundlich auf allen Endgeräten
  • positiver Einfluss auf Rankings in Suchmaschinen

Nachteile

  • nicht für jede Art von Webseite geeignet
  • bei Relaunch bzw. Umstellung der Webseite auf Responsive Design fallen Mehrkosten für den Webseitenbetreiber an

Fazit: Durch den klaren Trend zur Nutzung von mobilen Endgeräten ist es für Webseitenbetreiber nahezu unerlässlich, die eigene Webseite im Responsiven Design zu gestalten, um die Grundlage für einen langfristigen Erfolg zu schaffen.

Quellenangaben

Quellenangaben

Jetzt den SEO-Küche-Newsletter abonnieren

Ähnliche Artikel

Release Management

Release Management einfach und verständlich erklärt Der Begriff Release Management beschreibt die Planung, Umsetzung und das Controlling von Softwareentwicklungsprozessen und der angewendeten IT-Infrastruktur. Release Management – Definition Durch das Release Management wird es möglich, einen Überblick über den gesamten Entwicklungsprozess von Softwares, Web-Anwendungen und deren Updates sicherzustellen. Das Release Management […]

Google Doodle

Was ist Google Doodle? Als Google Doodle (deutsch: Kritzelei, Gekritzel ) bezeichnet der US-amerikanische Suchmaschinenbetreiber Google die unterschiedliche Darstellung seines Firmenlogos auf der Startseite und in den Suchergebnisseiten (kurz: [a href=https://www.seo-kueche.de/lexikon/serp-search-engine-result-page/]SERP[/a]). Seit 1998 ist es bei dem Tech-Unternehmen Tradition, zu besonderen Anlässen wie Geburtstagen wichtiger Persönlichkeiten aus Kunst und Wissenschaft, […]

Data Warehouse

Was ist ein Data Warehouse? Bei einem Data Warehouse (manchmal auch Datenlager genannt, kurz: DWH) handelt es sich um ein zentrales Datenbanksystem, das sich in Unternehmen zu Analyse- und Prognosezwecken einsetzen lässt. Für diesen Zweck sammelt und verdichtet das System relevante Daten aus verschiedenen heterogenen Datenquellen wie zum Beispiel dem Customer Relationship Management (CRM), Human Resources (HR) oder Enterprise Resource Planning (ERP) und stellt diese nachgelagerten Anwendungen zur Verfügung. […]

Search Engine Marketing SEM

Search Engine Marketing einfach und verständlich erklärt Der Begriff Search Engine Marketing (SEM) ist ein Teilbereich im Online-Marketing und beschreibt alle Maßnahmen, die getroffen werden können, um eine prominente Positionierung einer Webseite innerhalb der Suchmaschinen in den Suchergebnissen (englisch: Search Engine Result Pages, kurz SERPs) und damit Besucher für eine […]

bit.ly

Was ist Bit.ly? Bitly (auch bitly oder bit.ly geschrieben) ist ein 2008 von Peter Stern gegründetes Tech-Unternehmen mit Sitz in New York. Kerngeschäft der SaaS-Firma ist der Betrieb des gleichnamigen Kurz-URL-Dienstes. Dieser lässt sich wahlweise über die Website bit.ly (oder bitly.com), mittels API oder über die für iOS und Android […]

TYPO3

TYPO3 einfach und verständlich erklärt TYPO3 ist ein freies und webbasiertes Content Management System (WCMS) auf PHP-Basis, welches sowohl für private als auch kommerzielle Zwecke lizenzkostenfrei verwendet werden kann. Begriffsdefinition TYPO3 ist ein lizenzfreies Content Management System (CMS), welches 1997 vom dänischen Webdesigner Kasper Skårhøj entwickelt wurde. TYPO3 zählt neben […]