Responsives Webdesign – wie geht das?

Eine Einführung...

Werbung
Screenshot des Quellcodes einer mit responsiven Designtechniken entwickelten Website. Der gerenderte Inhalt passt sich automatisch der vorhandenen Bildschirmbreite an.
Screenshot des Quellcodes einer mit responsiven Designtechniken entwickelten Website. Der gerenderte Inhalt passt sich automatisch der vorhandenen Bildschirmbreite an.

Das responsive Web oder die intelligente Website

responsive – (englisch für „schnell reagieren“, gesprochen rɪˈspɒnsɪv) beschreibt ein Paradigma bei der Erstellung von Websites und mobilen Apps, welches die technischen Eigenschaften der für die Anzeige 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 „Besonderheiten“ der Benutzer.

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

Umsetzung responsiver Designkonzepte im Web

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).

Mithilfe von Medienabfrage lässt sich auch die Art des Ausgabegeräts ermitteln und so beispielsweise eigene Layouts für Drucker und Bildschirmlesegeräte realisieren.

Schematische Darstellung responsiven Webdesigns: Das Layout passt die Inhalte den Anforderungen unterschiedlicher Bildschirmgrößen an. Ziel ist ein gutes Nutzererlebnis bei allen Endgeräten.
Schematische Darstellung responsiven Webdesigns: Das Layout passt die Inhalte den Anforderungen unterschiedlicher Bildschirmgrößen an. Ziel ist ein gutes Nutzererlebnis bei allen Endgeräten.

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. Nicht jedes Pixel ist kontrollierbar.

Frei nach dem Motto „Der Feind des Guten ist die Perfektion“.

Vorteile von responsivem Webdesign

Geräteunabhängige, stets optimale Darstellung der Inhalte

Webdesigner besitzen zu jeder Zeit die vollständige Kontrolle über die Art und Weise der Wiedergabe von Inhalten und können diese in Abhängigkeit der Bildschirmbreite sowie weiterer Faktoren steuern.

Höhere Benutzerzufriedenheit, bessere Konversionsraten

Die optimierte Ausgabe von Inhalten macht diese für den Leser leichter zugänglich. Responsive Websites erzielen daher bessere Werte hinsichtlich ihrer Nutzerfreundlichkeit. Dies hat wiederum positive Effekte auf die Effizienz einer Website.

Geringerer Support- und Pflegeaufwand bei Updates

Bei strikter Trennung von Inhalt und Layout (HTML = Inhalt, CSS = Layout) wird der Aufwand für Wartung minimiert, da sich das Erscheinungsbild von den Inhalten unabhängig verändern und neuen Erfordernissen anpassen lässt.

Gute Voraussetzungen für ein barrierefreies Layout

Responsive Inhalte können häufig mit wenig zusätzlichem Aufwand barrierefrei (auf alle Fälle barrierearm) gemacht werden. Dies verbessert das Nutzererlebnis für Zielgruppen mit speziellen Anforderungen.

Herausforderungen von responsivem Webdesign

  • Mangelnde Eignung bestimmter Inhalte für kleine Bildschirme (z.B. lange Texte, detailreiche Bilder oder hochauflösende Videos). Nicht alle Arten von Content lassen sich auf jedem Bildschirm optimal darstellen.
  • Enttäuschte Erwartungshaltung der Benutzer durch den eingeschränkten Funktionsumfang auf mobilen Endgeräten. Abhilfe schafft hier sicherzustellen, dass alle Funktionen auch auf Smartphones und Tablets zur Verfügung stehen.
  • Darstellungsfehler auf bestimmten Webbrowsern aufgrund fehlerhafter Implementierung von HTML5 und CSS3. Ausführliche Testläufe auf unterschiedlichen Umgebungen (mehrere Kombinationen aus verschiedenen Endgeräten und Webbrowsern) sind daher auch bei responsivem Webdesign unbedingte Voraussetzung.

Stand der Informationen: März 2022
Wichtig: Bitte beachten Sie die Nutzungsbedingungen und rechtlichen Hinweise für diesen Beitrag!