Responsives Webdesign – ein Überblick

Intelligente Websites, einfach gemacht...

Werbung
Konzeptionelle Darstellung responsiven Webdesigns.
Konzeptionelle Darstellung responsiven Webdesigns.

responsive /rɪˈspɒnsɪv/ – (englisch für „schnell reagieren“) beschreibt ein Paradigma bei der Erstellung von Webinhalten, welches die besonderen technischen Eigenschaften der verwendeten Endgeräte berücksichtigt:

  • Bildschirmabmessungen (bzw. Größe des verfügbaren Darstellungsbereichs)
  • Bildschirmauflösung und -orientierung (Hoch-/Querformat)
  • Eingabemethoden (z.B. Maus, Tastatur, Stift, Finger)
  • Bandbreite der Internetanbindung und technische Gerätemerkmale

Die Idee des responsiven Webdesign überschneidet sich mit dem Konzept des barrierefreien Webdesigns – dieses orientiert sich allerdings mehr an den besonderen Eigenschaften der Benutzer.

Das Ziel beider Methoden ist jedoch vergleichbar: Die Anpassung des Inhalts einer Website an das jeweilige Endgerät unter ergonomischen Gesichtspunkten.


Werbung


Vorteile von responsivem Webdesign

  • Geräteunabhängige, stets optimale Darstellung der Inhalte.
  • Höhere Benutzerzufriedenheit, bessere Konversionsraten.
  • Geringerer Support- und Pflegeaufwand bei Updates.
  • Gute Grundlage für die Entwicklung eines barrierefreien Layouts.

Probleme und Herausforderungen

  • Darstellungsfehler auf älteren Webbrowsern (unzureichende oder fehlende Unterstützung von HTML5 und CSS3).
  • Mangelnde Eignung bestimmter Inhalte für kleine Bildschirme (z.B. lange Texte, detailreiche Bilder oder hochauflösende Videos).
  • Enttäuschte Erwartungshaltung der Benutzer (z.B. durch einen eingeschränkten Funktionsumfang auf mobilen Endgeräten).

Technische Realisierung

Mittels der in CSS3 implementierten „media queries“ (Medienabfragen) werden die gewünschten Eigenschaften der Endgeräte ermittelt. Anhand dieser Merkmale lassen sich dann weitergehende Designentscheidungen treffen.

Berücksichtigung findet vor allem der „viewport“ (Anzeigebereich), also der tatsächlich für die Darstellung von Inhalten vorhandene Platz.

Erreicht der Anzeigebereich eine solche definierte Marke, werden Layout und Inhalt der Seite angepasst. Diese Marken nennt man „breakpoints“ (Haltepunkte, Messpunkte).

Mögliche Maßnahmen an einem Breakpoint:

  • Entfernen nicht essentieller Inhalte, verkleinern von Bildmaterial.
  • Einführung eines Aufklapp-Menüs für Stift- und Fingerbedienung.
  • Neuanordnung von Textboxen (z.B. untereinander statt nebeneinander).
  • Kontrastreicheres Layout, ggf. anpassen von Schriftarten und -größen zur einfacheren Lesbarkeit (unter Wahrung der Corporate Identity).

Stichwort „adaptives Webdesign“

Die Gestaltung orientiert sich an festen Breakpoints, zwischen welchen das Layout der Website unverändert bleibt. Die Anordnung der Layoutelemente verändert sich bei Erreichen eines Breakpoints.

Stichwort „liquides Webdesign“

Das Layout nutzt den verfügbaren Anzeigebereich immer im gleichen prozentualen Verhältnis; es „fließt“ sozusagen. Die Anordnung der Layoutelemente ist grundsätzlich statisch.

Responsives Webdesign ist meist eine Kombination aus adaptiven und liquiden Designtechniken.


Werbung


Kein Platz für Kontrollfreaks…

Designer und Programmierer sind daran gewöhnt, mit festen Maßen und Proportionen zu arbeiten, also beispielsweise Textumbrüche und Bildgrößen exakt vorherzusagen.

Von diesen Vorstellungen muss man sich im responsiven Webdesign bis zu einer gewissen Grenze verabschieden, da fixe Bildschirmauflösungen faktisch nicht mehr existieren.

Responsives Webdesign und Suchmaschinenmarketing

Grundsätzlich beeinflusst responsives Design das Ranking einer Website in Suchmaschinen positiv, da alle Suchmaschinen ein solches Vorgehen als besonders benutzerfreundlich honorieren.

Der Grund liegt also weniger in der besseren Indizierbarkeit von Inhalten (dies ist ein positiver Nebeneffekt), sondern vielmehr in der Tatsache begründet, daß die meisten Suchmaschinen auf mobilen Endgeräten nur passende Treffer zeigen, die dort auch dargestellt werden können.

Merke: Selbst für responsives Webdesign gilt… auf die Qualität der Inhalte kommt es an !

Werbung