Responsive Webdesign
Erklärung, Hintergründe und Tipps zur Umsetzung
Das kennt sicher Jeder: Man sucht mit dem Smartphone etwas im Internet und gelangt auf eine Seite, die man erst einmal "groß ziehen" muss, um auch nur ansatzweise etwas lesen zu können. Andersherum ist es genauso ärgerlich, wenn der offensichtlich vorhandene Button nicht klickbar ist, weil die eine Hälfte auf dem Smartphone Bildschirm verschwindet und egal, wie man das Gerät hält und dreht, einfach nicht in den Sichtbereich kommen möchte. Nutzerfreundlichkeit oder zu englisch Usability - Fehlanzeige! Der Grund hierfür ist schnell identifiziert: fehlende responsibility bzw. mobile Optimierung.
"Damals" als es nur wenige Bildschirmgrößen gab und von Tablets und Smartphones noch keine Rede war, war es noch kein Thema, dass sich Websites automatisch den Bildschirmgrößen hätten anpassen müssen. Man hat einfach verschiedene feste Designs für die gängisten drei Bildschirmgrößen entworfen und diese wurden dann eben Pixel für Pixel genauso umgesetzt. Heute aber, mit einer nahezu unendlichen Vielfalt an Geräten und Bildschirmgrößen, ist ein solches Vorgehen nicht nachhaltig oder praktikabel. Heute muss die Website oder der Online Shop selbst so "intelligent" sein, die Bildschirmgröße des Endgeräts zu erkennen und automatisch die bestmögliche Darstellung zu wählen. Bestmöglich bedeutet hierbei alle notwendigen Funktionen müssen auch auf dem Smartphone verfügbar sein und die Website oder der Online Shop sollte dabei noch gut aussehen. Schafft man dies nicht oder hat die Umstellung verpasst, wird man den Nutzer wahrscheinlich verlieren oder - im besten Fall - zumindest verärgern.
Die Herausforderung ist neben diversen Eingabegeräte wie Tastatur und Maus, Touchscreen oder Touchpad vor allem unterschiedliche Bildschirmgrößen von 300 bis 6.000 Pixel Breite bei bspw. Desktop-Rechner, Laptop, Netbook, Smartphone, Tablet oder Fernseher. Die Website bzw. der Online Shop muss sich also anpassen. Diese Anpassung ist insbesondere eine Technische mit flexiblem Raster, flexiblen Medien und Breakpoints, an denen sich die Darstellung ändert. Darüber hinaus sollte bei einem umfassenden professionellen responsive Webdesign aber nicht nur die äußere Darstellung betrachtet werden, sondern auch sich anpassende Inhalte und Designs berücksichtigt werden.
Seit einigen Jahren ist der Ansatz nun bereits "mobile first", da die Anzahl der mobilen Nutzer stetig wächst und der klassische PC immer weniger zum Einsatz kommt. Dies bedeutet, dass die Erstellung in erster Linie auf Smartphones ausgerichtet wird und erst im Nachgang die Anpassung auf größeren Bildschirmen betrachtet wird.
Nahezu jedes einfache Template beherrscht die technisch korrekte Umsetzung einer responsive Website. Die Inhalte, Architektur und den Content Design bestmöglich anzupassen für ein erfolgreiches Nutzungserlebnis mit gewünschtem Ergebnis ist jedoch komplex und schwierig. Hier kommen daher meist Expertenteams zum Einsatz, die jede dieser Disziplinen in Perfektion beherrschen und entsprechende Erfahrungswerte aufweisen.
Das Wichtigste in Kürze
- Responsive Webdesign bezeichnet die automatische Anpassung einer Website an unterschiedliche Endgeräte und Eingabegeräte
- Inhalte, Design und Technik müssen zusammen gedacht und umgesetzt werden
- für unterschiedliche Benutzeranforderungen, Nutzungssituationen und Endgeräte muss das Ziel die bestmögliche Darstellung und User Experience sein
- Konzeption, Design und Entwicklung arbeiten in einem agilen Prozess und entwickeln Prototypen, die regelmäßig getestet und angepasst werden
- es gilt in der Regel "mobile first", bei der die Entwicklung in erster Linie auf Smartphones ausgerichtet wird und erst im Nachgang die Anpassung auf größere Bildschirme erfolgt
- Inhalte, Architektur und Content Design bestmöglich anzupassen, ist komplex und schwierig, hier kommen meist Expertenteams zum Einsatz
Tipps zur Umsetzung eines responsive Webdesign
- kaufmännische, zeitliche und inhaltliche Rahmenbedingungen klären
- eine Content Strategie entwickeln (Inhalt sollte immer Priorität haben!)
- Erstellung der Wireframes (Anordnung der Inhalte ohne Design)
- Parallel dazu Entwicklung des Designs mit Hilfe von bspw. Moodboards
- Erstellung eines Prototyps / Entwurfs
- Erstellung eines Look & Feel mit Design
- stetiges Testen und Korrigieren der Zwischenstände
- mobile first und schrittweise Erweiterung für größere Auflösungen
- Go Live und stetige Weiterentwicklung nach aktuellem Stand der Technik und Nutzertrend