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

CSS

Was ist CSS? CSS ist die Abkürzung für Cascading Style Sheets, was sich am besten mit „gestufte Stilvorlagen“ übersetzen lässt. Dabei handelt es sich um ei-ne Gestaltungs- und Formatierungssprache, mit deren Hilfe sich das optische Erscheinungsbild elektronischer Dokumente (z. B. HTML-Websites) bestimmen lässt. Anhand einfacher Anweisungen im Quelltext ist es so möglich, gestalterische Elemente wie das Layout, die […]

Google Groups

Was ist Google Groups? Google Groups ist ein kostenloser Dienst von „Google Inc.“, welcher einen kombinierten Zugang zu Usenet, Diskussionsforen und Social Communitys ermöglicht. Durch den Online-Dienst können Internetforen durchsucht sowie eigene „Groups“ (deutsch = Gruppen) erstellt werden. Geschichte von Google Groups Google Groups wurde 2001 im Rahmen einer Übernahme […]

Entitäten

Was ist eine Entität? Der von dem lateinischen Wort „ens“ (deutsch: „Ding“ oder „Seiendes“) abgeleitete Begriff Entität findet sich in der Philosophie, Informatik und Semantik. Er beschreibt ein Objekt, das sich eindeutig identifizieren lässt und Informationen beinhaltet. Entitäten können sowohl in der realen Welt existierende Dinge (auch „Benannte Entitäten“ genannt) […]

Datenbank

Was ist eine Datenbank? Eine Datenbank ist ein elektronisches System, in dem sich größere Datenmengen zentral speichern lassen. Ein Datenbanksystem (DBS) setzt sich aus zwei Teilen zusammen: einem Datenbankmanagementsystem (DMBS) und der Datenbank (DB) im eigentlichen Sinne, in der die Menge der zu verwaltenden Daten (auch Datenbasis genannt) gespeichert ist. Heute verwenden nahezu alle IT-Anwendungen wie ERP-, CRM- und Warenwirtschafts-Systeme, aber auch Suchmaschinen […]

Google Alerts

Was ist Google Alerts? Google Alerts ist ein seit 2014 existierender kostenloser Dienst der Suchmaschine Google. Jeder Nutzer kann Benachrichtigungen für beliebige Keywords oder Begriffe einrichten und Google benachrichtigt per E-Mail oder über seinen RSS-Feed, wenn die Suchmaschine einen passenden neuen Eintrag in ihrer Ergebnisliste findet. Alerts informieren Benutzer automatisch, […]

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 […]