Die Internetnutzung ist vielfältig geworden. Privat surfen viele Menschen meist mit dem Smartphone oder Tablet. Im Büro hingegen sind Desktop- und Laptop-Nutzung oft die Regel. Entsprechend dieser vielfältigen Nutzung sind die Anforderungen an eine gute Gestaltung von Websites wesentlich gestiegen.
Vor rund 10 Jahren orientierten sich Webdesigner oftmals noch an einer Standard-Desktop-Auflösung. Heute muss die Gestaltung und Programmierung einer Internetseite unterschiedliche Bildschirmauflösungen und Seitenformate berücksichtigen.
Responsive Webdesign als bewährtes Gestaltungskonzept
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.
Dies kann über die rein optische Darstellung hinausgehen und auch inhaltliche Aspekte einschließen. Durch gezieltes Weglassen von Informationen, die in einem bestimmten Kontext nicht relevant sind, lassen sich die Darstellung und das Nutzererlebnis weiter verbessern. Entscheidend ist die Frage:
Welche Informationen/Angebote sucht der Nutzer in welcher Situation bzw. mit welchem Endgerät?
Um die Auflösungen der unterschiedlichen Endgeräte entsprechend zu berücksichtigen, werden beim Responsive Webdesign 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.
Tipps zur Entwicklung von Responsive Webdesign
Die Entwicklung eines variablen Webdesigns und User Interfaces mit verschiedenen Breakpoints und fließenden Elementen (Fluid Design) ist meist komplexer als das Entwerfen eines feststehenden Layouts. Folgende Überlegungen können dabei helfen:
- „Mobile-first“: Die Kunst liegt in der Reduktion auf das Wesentliche. 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. Daher ist es sinnvoll, die erste Konzeption an den Belangen der mobilen Internetnutzung auszurichten.
- Wichtige Menü- und Navigationselemente priorisieren: Die Interaktion mit dem Nutzer steht im Mittelpunkt, sei es, dass er eine Handlung tätigen soll (z.B. Online-Kauf) oder einfach nur schnell die gewünschten Informationen findet. Unnötiges Beiwerk, alles was visuell von den wesentlichen Inhalten ablenkt, ist zu hinterfragen.
- CTA (Call to Action): Hauptfunktion/Handlungsaufforderung der Website sind besonders herauszustellen, z.B. durch eine große, auffällige Schaltfläche/Button.
- Datenverzicht und einfachere Interaktion: Kürze Formulareingaben, indem z.B. auf nebensächliche Daten verzichtet wird, führen den Nutzer schneller ans Ziel und steigern die Konversionsrate (Conversion Rate, CVR).
- Bei umfangreichen Inhalten ist eine gut funktionierende Such- und Filterfunktion unumgänglich.
- Analyse des Nutzungsverhalten der Zielgruppe: Detaillierte Daten helfen bei einer zielgerichtet optimierten Websitegestaltung.
Weiterführende Informationen: https://www.formativ.net/glossar/responsive-webdesign/