Was bedeutet Responsive Webdesign?

Lesedauer: ca. 3min

Neue Beiträge

Themengebiete

“Das muss ich schnell googeln” – diesem Satz begegnen wir überall, egal ob zuhause oder unterwegs. Seit den Anfängen des Internets hat sich die Gestaltung einer Website an dem Design auf einem Computerbildschirm orientiert. Doch seit der Einführung mobiler Geräte, wie Smartphones oder Tablets, wurde die Internetnutzung zunehmend mobil. Seitdem hat sich auch Webdesign weiterentwickelt und die Wünsche und Anforderungen mobiler Internetnutzer stehen im Vordergrund. Denn Websites wirken auf kleinen Displays anders, als auf großen Bildschirmen. Auch mangelnde User Experience, wie überfüllte Seiten und ständiges Zoomen, ist sehr abschreckend für mobile Website-Besucher und reduziert die Conversion Rate. Doch was bedeutet Responsive Webdesign?

Was bedeutet Responsive Webdesign?

Der Begriff Responsive Webdesign bedeutet übersetzt “reagierendes Webdesign”. Dabei passen sich Inhalts- und Navigationselemente, sowie auch der strukturelle Aufbau einer Website flexibel an die Bildschirmauflösung des mobilen Endnutzers an. Somit reagiert und korrespondiert die responsive Website mit der Auflösung des mobilen Endgeräts. Durch das extra Design für mobile Geräte kann die User Experience auch auf diesen Endgeräten gewährleistet werden. Dies wird auch mobile User Experience genannt.

Doch was bedeutet Responsive Webdesign? Bei Responsive Webdesign gilt der Leitsatz “form follows function”. Das bedeutet, das Design und der Inhalt der jeweiligen Bildschirmauflösung folgt der Verwendung der Geräte. Klassisches Beispiel: Hochformat vs. Querformat am Tablet – Die Website wird jeweils unterschiedlich angezeigt. Das erhöht die Benutzerfreundlichkeit (Usability) maßgeblich.
Wenn sich sogar die Funktionalität einer Website an den technischen und grafischen Möglichkeiten des Endgeräts orientiert, spricht man auch von Progressiv Enhancement oder auch Progressive Webdesign.

Übliche Standard-Auflösungen von Smartphones und Tablets sind:

  • Smartphones: 320 px bis 480 px
  • Tablets: 768 px und 1024px
  • Computer-Desktop: 1024px+

Wie funktioniert Responsive Webdesign?

Responsive Webdesign wird mit HTML5 und CSS3 umgesetzt. Dabei müssen Inhalt und Layout einer Website strikt getrennt sein, damit Responsive Webdesign optimal funktioniert. Die Basis einer responsiven Website bildet ein flüssiges Raster. Demzufolge ist die Breite der Website durch Prozentwerte definiert. Dadurch passt sich die Seitenbreite in Relation zur Größe des Browserfensters an. Zusätzlich sind die einzelnen Elemente, wie Bilder, Videos oder Textpassagen, flexibel. Je nach zur Verfügung stehendem Platz werden diese größer oder kleiner angezeigt.

Des Weiteren werden im CSS-Code Break-Points gesetzt. Sie definieren bestimmte Auflösungen, an denen sich das Seitenlayout verändert. Beispielsweise kann eingestellt werden, dass eine Werbung, die seitlich angezeigt wird, automatisch unter das Textelement springt, sobald die Viewport Breite kleiner ist, als eine gewisse Pixelanzahl.

Um das Seitenlayout für jeden Bildschirm passend zu konfigurieren, fragen sogenannte Media-Queries den Gerätetyp, als auch die spezifischen Eigenschaften eines Gerätes ab. Zu den Eigenschaften gehören Displaygröße, Format und Auflösung. Aber auch Eingabemöglichkeiten wie zum Beispiel Tastatur und Sprache gehören dazu. Das ist sehr zeitaufwendig, der Mehraufwand beschränkt sich jedoch auf die Entwicklungs- und Einführungsphase. Responsive Webdesign ist aktuell die einzige Möglichkeit, eine Website für Desktop- oder Mobile-Endnutzer optimal nutzbar zu machen. Es ist also ein absolutes Muss bei der Erstellung oder Überarbeitung einer Website auf diese Details zu achten.

Die Bedeutung von Responsive Webdesign für Suchmaschinen

Die Größe, Komplexität und der Funktionsumfang der Website sind Indikatoren für den Entwicklungsaufwand einer responsiven Website. Bei der ersten Entwicklung wird das Design erarbeitet und so können neue Inhalte sehr einfach eingepflegt werden. Doch was bedeutet Responsive Webdesign für die Suchmaschinenoptimierung? Der Aufwand lohnt sich defintiv für das Suchmaschinenranking, denn Responsive Webdesign erhöht die User Experience der Nutzer. Vor allem greifen Nutzer immer vermehrt (inzwischen ca. 70%) über ein mobiles Endgerät auf die Website zu.

Durch die Optimierung für mobile Endgeräte steigt die Verweildauer der Nutzer, was sich wiederum positiv auf das Ranking der Website auswirkt. Im Gegensatz dazu wird die Bounce Rate (Absprungrate) gesenkt, da mobile Nutzer die Webinhalte mit allen Funktionen nutzen können. Somit können diese besser mit den Inhalten interagieren.

Google legt übrigens zunehmend mehr Wert auf die User Experience als kritischen Ranking Faktor! (Quelle)

Vorteile von Responsive Webdesign

Die Vorteile von Responsive Webdesign sind klar! Statt zwei oder mehr Versionen für die Desktop- und Mobile-Ansicht, die beide mit redaktionellem Content und Bildmaterial gepflegt werden müssen, reicht eine Seite mit der entsprechenden URL. Dies ermöglicht großes Zeitersparnis und sorgt für Einheitlichkeit der Website. Das wiederum erhöht den Wiedererkennungswert einer Website auf jedem Gerät. Auch sind responsive Websites durch Ihre Werte deutlich interessanter für Suchmaschinen und haben so bessere Chancen auf eine Positionierung auf Googles Seite 1.

Was bedeutet Responsive Webdesign für das Layout?

In der untenstehenden Grafik sehen Sie von links nach rechts das Layout unserer Elephant Website für Desktops, Tablets und Smartphones.

Zusammenfassung - Was bedeutet Responsive Wedesign?

Responsive Webdesign ist Pflicht und gehört inzwischen zu jedem modernen Internetauftritt dazu. Schließlich sind ca. 70% aller User auf mobilen Endgeräten unterwegs. Das kann je nach Zielgruppe und Branche variieren.

  • Inhalts- und Navigationselemente sowie auch der strukturelle Aufbau einer Website passen sich flexibel an die Bildschirmauflösung des (oft mobilen) Endnutzers an.
  • Die Größe der einzelnen Elemente, wie Bilder, Videos oder Textpassagen, sind variabel. Somit passt sich die Seitenbreite in Relation zur Größe des Browserfensters an.
  • Responsiveness kann sich für das Suchmaschinenranking lohnen, denn responsive Webdesign erhöht die User Experience mobiler Nutzer und die damit verbundenen KPIs.
  • Weiterer Vorteil: Redaktioneller Content und Bildmaterial muss nur einmal gepflegt werden. Dadurch ist eine Seite mit der entsprechenden URL ausreichend.

Ihre Website ist noch nicht fit fürs Handy?

Unser Team freut sich auf das Gespräch mit Ihnen. Nehmen Sie jetzt unverbindlich Kontakt auf.

Elephant Marketing Agentur Beratung

Ihre Website ist noch nicht fit fürs Handy?

Unser Team freut sich auf das Gespräch mit Ihnen. Nehmen Sie jetzt unverbindlich Kontakt auf.

Scroll to Top

Kontakt aufnehmen.