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.
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.
Autor: Tobias Eichner | Datum der Veröffentlichung: März 2022
Wichtig: Bitte beachten Sie die Nutzungsbedingungen und rechtlichen Hinweise für diesen Beitrag!
