Was ist Responsive Design und warum ist es wichtig?

Grafik zu Blogartikel "Warum Responsiv-Design"

Wir alle kennen das ja: Man ist mit dem Tablet oder Smartphone auf Websites unterwegs, will nur kurz Kontaktdaten suchen oder sich über ein Angebot informieren. Doch leichter gesagt als getan. Internetseiten, die auf dem Desktop-PC noch super aussehen, sind mobil eine Unzumutbarkeit. Da gestaltet sich sagen wir die Navigation zur richtigen Telefonnummer meines Ansprechpartners schon wie ein Kamelritt durchs Nadelöhr. Mir selbst fallen spontan zig solcher Momente ein und gerade wer zum Beispiel schon einmal unterwegs auf Wohnungssuche war, kann meinen Unmut wohl gut verstehen.

Dabei könnte es so einfach sein: optimierte Websites für mobile Nutzer (Google nennt das „mobile-friendly“). Doch viele Firmen haben diesen Punkt in den letzten Jahren schlichtweg vernachlässigt. Das hinterlässt bei ihren Kunden einen ziemlich schlechten Eindruck. Um nicht in die Bredouille zu geraten, bessern viele jetzt nach.

„Mobile-friendly“ – Brauche ich das wirklich?

Ja. Dass diese Nachbesserung längst überfällig ist, zeigt eine repräsentative Studie im Auftrag des ARD/ZDF zur Onlinenutzung in Deutschland. Laut Befragung ist die Anzahl der täglichen Internetnutzer im Jahr 2015 auf 44,5 Millionen Menschen gestiegen. Interessant ist dabei, dass davon mittlerweile 55 Prozent mobil auf Netzinhalte zugreifen. Kein Trend, sondern eher zunehmende Standardisierung. Gleichermaßen steigen auch die Anforderungen an eine gute Webpräsenz. Websites, die bei der Programmierung allein für große Desktop-Bildschirme optimiert werden, sind auf Smartphones und Tablets oft unbedienbar.

Gut beraten sind also diejenigen, die von Anfang an auf optimale Darstellung ihrer Website auf jedem Gerät setzen. Immerhin ist sie das digitale Aushängeschild einer jeden Institution. Ohne mobilfreundliches Design geht heute kaum noch etwas, auch weil die großen Internet-Unternehmen, allen voran Google, die mobile Internet-Nutzung fördern wollen. Als weltweit wichtigste Suchmaschine macht Google „mobile-friendly“ inzwischen zur Pflicht: Seit dem im Frühjahr 2015 erschienenen „Mobile Update“ des Suchmaschinenanbieters werden Websites, die nicht für mobile Nutzung geeignet sind, beim Suchmaschinenranking abgestraft.

Die Lösung: Responsive Design

Responsive Design passt eine Website flexibel an das jeweilige Endgerät an. Eine so optimierte Website sieht auf einem 24-Zoll-Bildschirm also genauso gut aus wie auf einem Smartphone oder Tablet. Was heißt das genau?

Größe und Auflösung des darstellenden Gerätes, an die sich eine Website anpassen muss, variieren heute stärker denn je. Die kleinsten Smartphones haben Bildschirmdiagonalen von weniger als 3 Zoll, während auf der anderen Seite auch Monitore und webfähige Fernseher mit weit mehr als 30 Zoll Diagonale keine Seltenheit mehr sind. Daher ist es notwendig, dass Internetseiten die Anforderungen des jeweiligen Endgerätes kennen und berücksichtigen.

Besteht das Layout einer Website beispielsweise aus mehreren Spalten, so müssen diese auf Smartphone-Displays untereinander angezeigt werden, weil sonst nicht mehr viel zu erkennen ist. Funktionen wie „Mouseover“ wiederum, die bei Mausbedienung Informationen oder Navigationshilfen liefern, funktionieren nicht mit Touchscreens. Für mobile Nutzer müssen dafür Alternativen angeboten werden.

Eine mögliche (und früher häufig praktizierte) Lösung wäre die Erstellung und Pflege einer Version des Internetauftritts, die speziell für Mobilgeräte gestaltet wird und über eine eigene URL erreichbar ist. Aber responsive Design löst das Problem noch wesentlich eleganter: An die Stelle einer starren Gestaltung von Websites tritt nun eine dynamische Reaktion bzw. „Antwort“ (englisch: response) auf wechselnde Anforderungen.

Die Funktionsweise von Responsive Design

Für die Gestaltungsaspekte von Webseiten ist beim Webdesign die Auszeichnungssprache CSS (Cascading Style Sheets) zuständig. Mit CSS können Gestaltungsanweisungen (Stylesheets) erstellt werden, welche zusammen mit HTML und DOM den Kern einer jeden Website bilden. Stylesheets (Dateien mit der Endung „.css“) bestimmen das Aussehen meiner Seite. Ich kann also für unterschiedliche Endgeräte jeweils eigene Stylesheet anlegen (z. B. „smartphone.css“ und „all.css“, wenn ich nur Smartphones ein angepasstes Design anbieten möchte).

Woher aber weiß eine Webseite, welches Endgerät gerade zu bedienen ist? Mit der aktuellen Version CSS3 wurde das Konzept der sogenannten Media Queries eingeführt. Diese Queries (z. Dt. Abfragen) erlauben es, verschiedene Ausgabe-Geräte zu erkennen. Die Website fragt eine vorher definierte Liste von Kriterien ab, die ein Ausgabemedium erfüllen muss, damit ein bestimmtes Stylesheet zur Verarbeitung eingebunden wird. Diese Medienabfragen bestehen meistens aus der Kombination von Medientyp und Medienmerkmalen. Kriterien für die Darstellung einer Website auf verschiedenen Endgeräten sind zum Beispiel die Breite und Höhe von Browserfenster oder Gerät, die Bildschirmauflösung, die Orientierung (Hoch- oder Querformat) oder verfügbare Eingabemöglichkeiten.

Mithilfe dieser Kombinationsmöglichkeiten können verschiedene Klassen von Ausgabemedien definiert werden, denen ich dann maßgeschneiderte Stylesheets zuweise. Erfüllt das verwendete Ausgabemedium alle Kriterien einer Medienabfrage, so wird das verknüpfte Stylesheet eingebunden – und voilà: Sie haben responsive Design.

WordPress Cookie Hinweis von Real Cookie Banner