Responsive Webdesign

Der Begriff Responsive Webdesign bezeichnet einen modernen Ansatz im Webdesign, der darauf abzielt, die Ausgabe einer Website so variabel zu gestalten, dass sie möglichst auf allen Displaygrößen und Endgeräten optimal dargestellt wird.

Was ist Responsive Webdesign?

Hierbei kann der Ansatz des Responsive Webdesign über die rein optische Darstellung hinausgehen und auch inhaltliche Aspekte mit einschließen.

Welche Informationen/Angebote sucht der Nutzer in welcher Situation bzw. mit welchem Endgerät?

Durch gezieltes Weglassen von Informationen, die in einem bestimmten Kontext nicht relevant sind, lassen sich die Darstellung und das Nutzererlebnis weiter verbessern.

Um den unterschiedlichen Displaygrößen unterschiedlicher Endgeräte wie Desktop-PC, Laptop, Tablet, Phablet, Smartphone etc. Rechnung zu tragen, werden bei Responsive Webdesign in der Regel sogenannte Breakpoints festgelegt. An diesen Breakpoints ändert sich das Aussehen der Website. Zum Beispiel werden Spalten nun untereinander anstatt nebeneinander angezeigt oder bestimmte Elemente der Website verschwinden ganz.

Hintergrund für die Entwicklung des Responsive Webdesign-Ansatzes ist ein Wandel des Nutzerverhaltens. Immer mehr Menschen nutzen das Internet mobil und mit neuen, unterschiedlichen Endgeräten. Auch in Deutschland wird das Smartphone inzwischen häufiger zum Surfen verwendet als Laptop oder Desktop-Computer.

Tipps zur Entwicklung von Responsive Webdesign

Die Entwicklung eines variablen Webdesigns und User Interfaces mit verschiedenen Breakpoints und fließenden Elementen (Fluid Design) ist in aller Regel deutlich komplexer als das Entwerfen eines feststehenden Layouts. Hinzu kommt die notwendige Reduzierung für eine optimale Bedienbarkeit auf kleinen Bildschirmen. Folgende Überlegungen können dir dabei helfen.

1. Entwickle „mobile-first“: Es ist sehr viel einfacher, die reduzierte mobile Ansicht einer Website für höhere Auflösungen zu erweitern, als ein komplexes Desktop-Design für die Mobile View zu reduzieren. Das Unterbringen der gewünschten Inhalte und Funktionen auf dem kleinen Smartphone-Bildschirm stellt eine besondere Herausforderung dar. Du konzentrierst dich von Beginn an darauf, den Umfang der Website auf das Wesentliche zu reduzieren.
2. Wenn du mit einem reduzierten Design startest, werden die grafischen Elemente und die Code-Basis meist auch deutlich schlanker ausfallen, als wenn du erstmal „aus dem vollen schöpfst“. Dies verringert die Ladezeiten und kann den Gesamtaufwand für das Coding minimieren. Von beiden Aspekten wird deine Website profitieren.
3. Mit „mobile first in mind“ wird dir die notwendige Priorisierung leichter fallen:
   Welche Elemente und Funktionen sind unbedingt notwendig?
   Welche Elemente müssen auf welchem Endgerät wie angeordnet bzw. erreichbar sein (z.B. Suchfunktion)?
   Welche unterschiedlichen Bedienkonzepte müssen bei der Ausgestaltung der einzelnen Views beachtet werden (z.B. Toucheingabe vs. Tastatur und Maus)?

Weitere Hinweise und Anregungen

1. Priorisiere wichtige Menü- und Navigationselemente.
2. Vermeide alles, was visuell von den wesentlichen Inhalten ablenkt.
3. Reduziere Formulareingaben, indem du z.B. auf nebensächliche Daten verzichtest.
4. CTA (Call to Action): Stelle die Hauptfunktion/Handlungsaufforderung der Website besonders heraus, z.B. durch eine große, auffällige Schaltfläche/Button.
5. Stelle bei umfangreichen Inhalten eine gut funktionierende Such- und Filterfunktion zur Verfügung.
6. Analysiere das Nutzungsverhalten deiner Zielgruppen und berücksichtige dies bei der Festlegung der Breakpoints.
7. Füge Breakpoints ein, wenn es die Art deiner Inhalte verlangt. Beachte dabei nicht nur die Gerätegattungen, sondern generell das Darstellungsverhalten deiner Seiteninhalte.