Responsive Webdesign - was ist das genau?

03. September 2013

Immer häufiger taucht in den Anforderungen eines neuen Projektes der Begriff „responsive" auf. Die Notwendigkeit, die eigene Website für mobile Endgeräte zu optimieren, ist in breiter Runde angekommen.

Der Begriff „responsive Webdesign" wird allerdings sehr unterschiedlich verstanden. Der folgende Artikel erläutert daher den Begriff in möglichst gemeinverständlicher Sprache. Er richtet sich an Kunden und verzichtet weitgehend auf Fachbegriffe.

Häufig ist mit „responsive" missverständlich ein speziell auf mobile Endgeräte optimiertes Design gemeint. Responsive Webdesign ist jedoch ein für alle Ausgabegeräte optimiertes Design – neben dem Smartphone also auch für Tablets, Desktop-PCs und noch größere Bildschirme. Es handelt sich hierbei also nicht um eine ausschließliche Maßnahme für mobile Endgeräte, sondern um eine umfassende Optimierung.

Eine responsive (zu deutsch etwa "reaktionsfähig") Website reagiert selbständig auf die ihr zur Verfügung stehende Bildschirmgröße und gibt ihren Inhalt optimiert für diesen Screen aus. Ein solches Verhalten ist zukunftssicher, denn der Inhalt kann sich auch neuen, bisher unbekannten Bildschirmgrößen anpassen.

Nicht responsive - funktioniert aber trotzdem auf dem iPhone?

Gut gestaltete und technisch hochwertig umgesetzte Websites sind per se mobilefähig: sie werden auf mobilen Endgeräten, wie zum Beispiel dem iPhone, korrekt angezeigt. Den Trick, den Endgeräte hierzu verwenden, ist einfach: Die Website wird als Ganzes verkleinert dargestellt. Der Besucher kann mit den Fingern zoomen und so die Website steuern. Allerdings bringt dieses Vorgehen einige Nachteile mit sich:

Schaltflächen sind zu klein
Klicken (drücken mit Finger) auf Links sind mühsam
Ein- und Auszoomen aus Textpassagen eine knifflige Angelegenheit
Individuelle Ausgabe der Inhalte je nach Ausgabegerät ist schwer zu realisieren

Schnell kann eine solche Bedienung zu Frust führen. Responsive Websites hingegen testen im ersten Schritt wie viel Platz ihnen zur Verfügung steht und reagieren entsprechend. Könnte die Website denken, könnte das so aussehen:

„Werde ich auf einem Desktop dargestellt? Prima, dann benutze ich die volle Breite!"
„Bin ich auf einem Tablet? Dann zeige ich zunächst nur zwei Drittel und verschiebe das etwas unwichtigere Drittel nach unten. Oh, mein Hauptmenü wird zu lang - dann gebe ich es als ausklappbare Schaltfläche aus."
„Ach, ich bin auf einem Smartphone? Dann vergrößere ich meine Schrift, zentriere das Logo und gebe meinen Inhalt gut lesbar untereinander in einer Spalte aus! Auf ladeintensive Grafiken verzichte ich lieber."

Diese bildhaften Überlegungen werden durch Abfrage der zur Verfügung stehenden Breite gesteuert. Der Inhalt bleibt dabei immer gleich (es sei denn, eine bewusste Entscheidung führt zu unterschiedlichen Inhalten) – lediglich die Darstellung ändert sich. So entsteht kein zusätzlicher Pflegeaufwand, wie es zum Beispiel bei einer zweiten mobilen Seitenversion der Fall wäre. Bei der Projekt-Planung stehen neben gestalterischen auch redaktionelle Überlegungen an:

Was sind die wichtigsten Inhalte (stehen also ganz oben auf einem Smartphone)? Welche Informationen erwartet der Besucher? Auf welche Inhalte können wir ggf. verzichten? Die Reduzierung auf die wesentlichen Inhalte kommt der Website auch in voller Breite zu Gute. Was nicht wichtig genug für das Smartphone ist, ist auch nicht wichtig genug für den Desktop-PC!

Fazit: Responsive ist kein vorüber gehender Trend, sondern die umfassende Optimierung und Zukunftssicherung einer Website. Die Herangehensweise kommt sowohl dem Inhalt als auch der Gestaltung zu Gute.