Responsive Webdesign bezeichnet eine Praxis im Webdesign, bei der der grafische Aufbau von Webseiten, insbesondere die Strukturierung der einzelnen Elemente, wie z. B. Navigationen, Bilder und Texte, dynamisch und unter Berücksichtigung der Anforderungen des betrachtenden Gerätes und des zu bespielenden Kanals erfolgt. Die Darstellung von Webseiten wird an die Auflösung der Endgeräte angepasst. Wesentlicher Vorteil: Es müssen keine unzähligen Versionen und Apps einer Webseite erstellt werden, sondern nur eine, die sich automatisch anpasst.
Optimales Multi-Channel-Marketing
Deshalb wird für die Planung von Webseiten und Webshops durch Online-Marketing-Entscheider Responsive Webdesign großes Zukunftspotenzial bescheinigt. Dafür lassen sich vier Killerkriterien ausmachen: beste Darstellung auf allen Endgeräten, Effizient für Kosten und Timing, Hohe Investitionssicherheit und optimales Multi-Channel-Marketing.
Newsletter werden sowohl auf dem PC bei der Arbeit, unterwegs auf dem eigenen Smartphone als auch zu Hause auf dem Sofa vom Tablet aus geklickt. Das Gleiche gilt für Display-Werbung oder Social Postings. Daher ist es unabdingbar, dass das eigene Angebot auch auf allen Endgeräten zur Verfügung steht und benutzbar ist.
Die Produkte in Apps sind über externe Links aus Newslettern und Werbemaßnahmen nicht zu erreichen, sie scheiden für eine Multi-Channel-Kampagne aus. Alternative Links auf spezielle „Mobile Web“-Templates können hingegen auf dem falschen Endgerät geöffnet und zu Frustration beim Benutzer führen. Auf jeden Fall müssen diese zusätzlichen Templates inhaltlich gepflegt und extra für mobile SEO optimiert werden. Alles in allem sehr aufwendig und mit zusätzlicher Pflege verbunden. Von daher eine schlechte Voraussetzung für eine gelungene Multi-Channel-Kampagne.
Responsive Webdesign hingegen arbeitet mit nur einem identischen Template für alle unterschiedlichen Darstellungsgrößen. Das heißt, dass sich die URL nicht ändert. Die in den Werbemitteln verwendeten Links funktionieren immer und führen den Benutzer stets auf das richtige Ziel mit der optimalen Darstellung.
Doch welche Faktoren sollten bei der Planung eines Responsive-Webdesign-Projektes berücksichtigt werden?
Definition der Break-Points
Am Anfang ist es wichtig, sich mit seinen Nutzern und deren unterschiedlichen Bildschirmgrößen und -auflösungen zu beschäftigen. Anhand dieser Daten sollten die sogenannten Break-Points (unterschiedliche Auflösungsgrenzen, an denen sich das Design in seiner Darstellung grundsätzlich verändert) definiert werden. Zum Standardset sollten hier mindestens die folgenden vier Auflösungen definiert werden:
- Mobile Portrait (480)
- Tablet Portrait (768)
- Desktop Standard (1024)
- Desktop HighRes (>1024)
Nach oben ist der Anzahl der unterschiedlichen Break-Points natürlich keine Grenze gesetzt: The sky is the limit!
Mobile First & Progressive Enhancement
Als weitere wichtige Erkenntnis gilt die Regel „Mobile First“. Es macht aus vielerlei Hinsicht Sinn, in der Konzeption mit der kleinsten Darstellungsfläche zu beginnen. Es erzwingt in erster Linie eine sehr bewusste Fokussierung auf die wesentlichsten Inhalte und Funktionen der Website und allen anderen zu bespielenden Kanälen. Das wiederum macht es im weiteren Entwicklungsprozess einfacher, die Inhalte und die Funktionen der Website, mit zunehmender Darstellungsfläche, aufzuwerten. Diese Vorgehensweise lässt sich auch optimal auf die beteiligten Gewerke Design und IT anwenden.
Während das Design an der Mobile-Auflösung höchstes Augenmerk auf die Bedienbarkeit und die visuelle Priorisierung legt, baut die IT im Frontend die technische Basis des einfachsten Templates. Mit zunehmender Darstellungsgröße wird das Design komplexer und der Quellcode funktionsreicher. Dieses Vorgehen von Mobile über Tablet bis hin zu Desktop wird als Progressive Enhancement bezeichnet. Es ist ein wichtiger Faktor für die spätere Performance. Die einfachste Auflösung lädt auch nur den einfachsten Quellcode und die nötigsten Bilder, das spart Bandbreite und bringt Performance. Der Nutzer wird es dankend annehmen.
Frühe Entwicklung von Prototypen
In der Praxis hat sich gezeigt, dass es bei der Umsetzung von Responsive-Webdesign-Projekten umso wichtiger ist, sehr früh IT-seitig Prototypen zu entwickeln. Dies hilft enorm bei der Ausarbeitung unterschiedlicher Ausprägungen für die verschiedenen Darstellungsgrößen und -kanäle und die Bewertung der Machbarkeit von Responsive-Webdesign-Lösungen in bestehenden Shop-Umgebungen. Nicht immer ist alles ohne Weiteres umzusetzen. Ein frühes Erkennen von Einschränkungen spart Zeit und Geld. Zusätzlich hilft der Prototyp dem Kunden, ein schnelleres Verständnis für die finale Anwendung aufzubauen.
Fazit
Wer Webshops und Webseiten einschließlich Multi-Channel-Marketing-Aktivitäten auch in Zukunft erfolgreich betreiben will, muss dem Trend des stark wachsenden Mobile-Marktes Antworten liefern und die Vielzahl der Kanäle und Bildschirmauflösungen optimal bedienen. Responsive Webdesign könnte der Designtrend der Zukunft werden. Es liefert klare Vorteile, wie die Kostenminimierung von Maintenance und Content-Pflege. Denn wer weiß, welche Endgeräte und Bildschirmauflösungen sich in naher Zukunft noch auf dem Markt durchsetzen, und wer möchte schon ein Dutzend verschiedener Spezialversionen seines Webshops kontinuierlich pflegen?
Beispielseiten für Responsive Webdesign:
www.fossil.de
www.stellamccartney.com
www.zalando-lounge.de
Über den Autor:
Mit 12 Jahren Erfahrung im Webdesign leitet Martin Werner bei der Hamburger E-Commerce Agentur spot-media seit 2006 die Abteilung Design. Der staatlich geprüfte Kommunikationswirt und Bachelor of Multimedia Arts sucht seine Inspiration für neue Gestaltungsmöglichkeiten im interdisziplinären Austausch mit Konzeption und Entwicklung.
Mit 12 Jahren Erfahrung im Webdesign leitet Martin Werner bei der Hamburger E-Commerce Agentur spot-media seit 2006 die Abteilung Design. Der staatlich geprüfte Kommunikationswirt und Bachelor of Multimedia Arts sucht seine Inspiration für neue Gestaltungsmöglichkeiten im interdisziplinären Austausch mit Konzeption und Entwicklung.
