Responsive Design

Was ist responsive Design?

Unter responsiven Webdesign versteht man die Anpassung des Layouts einer Webseite an das Ausgabemedium (Computer-Desktop, Tablet- und Smartphone-Bildschirm).
Über sogenannte Media Queries (z. B. HTML5 und CSS3 Media-Queries) kann das Ausgabemedium analysiert und eine entsprechende Darstellung angezeigt werden. So passen sich Inhalts- und Navigationselemente einer Webseite der Bildschirmauflösung des (mobilen) Endgeräts an.
Aus dem Englischen übersetzt bedeutet das Adjektiv „responsive“ etwa „ansprechbar“, „empfänglich“, „zugänglich“ oder „antwortend“. Demnach kann „responsive Webdesign“ als „reagierendes Webdesign“ verstanden werden. Es passt somit die Darstellung an und „reagiert“ folglich auf entsprechende Endgeräte.
Die mobiloptimierte Darstellung von Webseiten hat ein Umdenken in der Konzeption von Webseiten zur Folge. Der Fokus liegt nun weniger auf der Präsentation, sondern vielmehr auf der effizienten Informationsvermittlung. Folgendermaßen kann sich deshalb die Darstellung der Inhalte je nach Endgerät verändern:

Ist responsives Webdesign oder mobiles Design wichtig für SEO?

Ganz einfach. Die Antwort lautet ja. Hierfür gibt es verschiedene Gründe:

1. Responsive Design erhöht die Usability
   Durch die vermehrte Nutzung von mobilen Endgeräten, steigt auch die Erwartung der Nutzer an eine responsive, an das Endgerät angepasste Darstellung der Seite. Eine responsive Seite erhöht nicht nur die Anzahl der Besucher, sondern führt auch zu einer verbesserten Usability und somit zur erhöhten Verweildauer und Conversionrate (zumindest auf Mobilgeräten). Das wiederum wird von Google als ein positives Signal gewertet.
2. Eine eindeutige Version der responsiven Webseite verringert das Problem von möglichem Duplicate Content
   Da beim Responsive Webdesign nur eine URL verwendet und immer der gleiche HTML-Code gesendet wird, entstehen keine Probleme mit möglichem Duplicate Content. Dieser könnte andernfalls über mehrere Versionen des gleichen Inhalts entstehen, da es zu der ursprünglichen Desktop-Variante auch eine mobiloptimierte Seite gäbe.
   Zudem kann Google durch die einheitliche URL die Inhalte viel einfacher in den Index aufnehmen. Dies sind mögliche Indikatoren für ein besseres Ranking auf Google.
3. Mobilfreundliche Websites haben in Google bessere Rankings
   Spätestens ab 2015 sollte jedem Webseitenbetreiber klar geworden sein, dass „mobile-friendly-sites“ in den Suchergebnissen von Google bevorzugt werden. Dies wurde von Google so auch offiziell bestätigt und man spricht von „significant impact in our search results“ – also von „erheblichen Auswirkungen“ – für Websites mit responsive Webdesign.

Für welche Homepages ist Responsive Webdesign geeignet?

Websites, die mit den Jahren in ihrer Struktur immer komplexer geworden sind und deren Unterbau veraltet ist, eignen sich nicht ganz so gut für die Umsetzung eines responsiven Designs, weshalb Du über eine generelle Modernisierung Deiner kompletten Webseite nachdenken solltest, bevor Du das responsive Design ansteuerst.

1. Bei hoher Anzahl an Besuchern über mobile Endgeräte
   Da das Design der Website ein Aushängeschild ist und für den ersten Eindruck bei Deinen Besuchern und potenziellen Kunden sorgt, sollte das responsive Design zum Standard des Webauftritts gehören. Nicht responsive Seiten wirken auf mobilen Geräten veraltet und sind keineswegs nutzerfreundlich ausgelegt. Deshalb sollten sich insbesondere Unternehmen, deren Kunden über mobile Endgeräte auf die Webseite gelangen, auf eine responsive Darstellung ihrer Webpräsenz achten. Ob die Seite häufig von mobilen Geräten aufgerufen wird, kann mit Web-Controlling-Tools wie etracker oder Google-Analytics überprüft werden.
2. Bei neuen Webseiten oder Launches
   Der absolut richtige Zeitpunkt für den Einsatz von responsivem Design ist definitiv beim Aufsetzen komplett neuer Webseiten oder beim Website-Relaunch.
   Sicherlich muss mehr Zeit für die Entwicklung eingeplant werden. Aber die bereits angesprochenen Vorteile überwiegen doch sehr und kompensieren den höheren Zeitinvest.
3. Bei Webseiten mit hoher Änderungshäufigkeit
   Wenn Webseiten öfter verändert oder aktualisiert werden müssen, sind responsive Webseiten klar im Vorteil. Denn hier muss die Änderung lediglich in einer Ausführung, nämlich in der Desktop-Variante vorgenommen werden. Dies verringert zum einen den Aufwand, zum anderen aber auch die Fehlerwahrscheinlichkeit bzw. Unstimmigkeiten in den beiden Varianten.

In welchem Rahmen bewegen sich die Preise bei Responsive Webdesign?

Ein fester Preisrahmen kann bei Projekten, die das responsive Design betreffen, oft nicht bestimmt werden. Meist hängt der Preis vom gewünschten Projektumfang ab, wobei das Budget des Kunden auch eine entscheidende Rolle spielt.

In der Regel sind Seiten im responsiven Design ca. 30 bis 40 % teurer, als eine herkömmliche Seite. Allerdings spart man sich die Kosten für die Webentwicklung von Versionen, die für mobile Endgeräte ausgelegt sind. Der Mehraufwand für die responsive Seite beschränkt sich i.d.R. auf die Entwicklungs- und Einführungsphase. Die Vorteile werden im späteren Verlauf, nämlich in der Content-Pflege, in der Durchführung von Updates, sowie bevorstehenden Veränderungen der Webseite deutlich. Denn in solchen Angelegenheiten müssen nicht mehrere Versionen für Desktop- und Mobile-Ansichten gepflegt werden. Dies sorgt zum einen für eine enorme Zeit- und somit Geldersparnis, zum anderen schafft dies aber auch ein einheitliches Erscheinungsbild über alle Endgeräte hinweg.