Der Anteil der E-Commerce-Branche, die 2014 Waren im Wert von 42 Milliarden Euro umgesetzt hat, am deutschen Einzelhandel nimmt kontinuierlich zu. Für Internet- und Multichannel-Händler ist das einerseits erfreulich, andererseits bringt die zunehmende Digitalisierung die Herausforderung mit sich, dass die Informations- und Kaufprozesse der Konsumenten immer häufiger über verschiedene Endgeräte erfolgen. Webshop-Betreiber sollten deshalb für ein unterbrechungsfreies Einkaufserlebnis sorgen - unabhängig davob, ob der Kunde per Desktop-PC, Laptop, Smartphone oder Tablet einkauft.
Warum E-Commerce-Anbieter eine Digital- und insbesondere Mobile-Strategie benötigen, welche Rolle das Mobile Web während der Customer Journey spielt und wie Händler ihr Multichannel-Angebot weiter optimieren können, erklärt der Bundesverband Digitale Wirtschaft (BVDW) im Leitfaden "Responsive Design im Digital Commerce"
Die Entwicklung neuer mobiler Endgeräte, insbesondere von Smartphones, steigert auch zusehends die Komplexität des Multichannel-Geschäfts für Händler: Derzeit wird beispielsweise rund jeder zehnte Einkauf, der mit einem Desktop-PC getätigt wird, durch eine Recherche per Smartphone vorbereitet. Umgekehrt geht drei von fünf Bestellungen per Smartphone eine Informationssuche mit dem PC oder Laptop voraus.
Für Webshop-Betreiber bedeutet dies, dass sie die Präsentation ihrer Produkte sowie die Usability für die vorherrschenden Betriebssysteme und Bildschrime optimieren müssen, um ihren Kunden auch ein unterbrechungsfreies und angebotsumfassendes Kauferlebnis zu ermöglichen. Dabei nehmen die technischen Anforderungen und Erwartungen der Konsumenten bezüglich Optik und Bedienfreundlichkeit beständig zu. Händlern bieten sich verschiedene Möglichkeiten zur Mobile-Optimierung ihrer Online-Auftritte und Webshops: adaptives und responsives Layout, native und hybride Apps, iOS und Android - sowie eine Kombination aus den jeweiligen Alternativen
Unter Static-Webdesign wird ein statisches und vor allem unbewegliches Layout verstanden, das Websites mit festgelegter Breite und fixem Content nach sich zieht. Die Ansicht der Website ändert sich demnach nicht, wenn die Größe des Browser-Fensters variiert oder mit einem anderen Endgerät darauf zugegriffen wird. Ist das Fenster zu klein, muss - vertikal oder horizontal - gescrollt werden, um den gesamten Umfang des Contents betrachten zu können. Für mobile Endgeräte gibt es bei diesem Design meist einen Verweis auf eine Extra-Site, die dann für die entsprechende Bildschirmgröße angepasst ist
Die Bezeichnung Liquid- oder Fluid-Webdesign beschreibt Websites, bei denen für die Breite der einzelnen Bestandteile Prozentwerte als Maßstab genutzt werden, die sich auf die jeweilige Bildschirmgröße beziehen. Damit ist die Größe der Bestandteile zueinander und zum Browser relativ, sodass sich die Größe der Bestandteile stufenlos verändern lässt, wenn sich die Größe des Browser-Fensters ändert. Das Layout selbst sprich die Anordnung der Bestandteile ändert sich allerdings nicht, sodass das Layout der Website auf sehr kleinen Screens nicht optimal dargestellt werden kann
Die Besonderheiten des Adaptive-Webdesigns lassen sich für eine bestimmte Anzahl von definierten Layouts für unterschiedliche, definierte Bildschirmauflösungen respektive Geräte herunterbrechen. Wird dabei die Auflösung einer Seite unter einen festgelegten Wert gesenkt, ändert sich das Layout der Seite, um sich an die veränderte Auflösung anzupassen. Innerhalb eines Layouts bewirkt die Änderung der Bildschirmgröße keine Veränderung des Layouts. Das funktioniert in etwa so, als seien verschiedene statische Websites für unterschiedliche Endgeräte entwickelt worden - allerdings mit dem Vorteil, nur eine Seite verwalten zu müssen
Unter dem Begriff Responsive-Webdesign versteht man eine Mischung aus Liquid- und Adaptive-Webdesign. Die Website-Bestandteile passen sich on-the-fly der verfügbaren Bildschirmauflösung an. Wenn der Bildschirm für die Anzeige eines Layouts zu klein ist, werden die Bestandteile in einem angepassten Layout angezeigt. Das heißt, es gibt definierte Layouts für unterschiedliche Auflösungen, aber innerhalb eines Layouts passt sich das Design der Website-Bestandteile (Breite, Höhe, Inhalt etc.) stufenlos der Größe des Bildschirms entsprechend an.
Responsive-Layouts können auch als eine Reihe von miteinander verknüpften Liquid-Layouts verstanden werden. Solche Websites werden auf einem fluiden Grid (Vernetzungsstruktur) erstellt und verwenden Media Queries, um die Bildschirmgröße zu ermitteln und damit das Design und die Inhalte anzupassen. Der Umfang der dargestellten Elemente zwischen den verschiedenen Auflösungen kann abweichen, das heißt Funktionen können auf kleinen Auflösungen ausgespart werden. Alle Breitenangaben erfolgen hier fluid respektive flexibel, also in Prozentwerten. Welcher der möglichen Design-Grundsätze verwendet wird, ist dabei abhängig vom jeweiligen Anwendungsfall sowie der Zielgruppe, die erreicht werden soll. Neben
gründlicher Analyse und dem Abwägen der Vor- und Nachteile ist insbesondere auch das bestehende Design einer Website ausschlaggebend für eine objektive Kosten-Nutzen-Analyse
Künftig werden die Grenzen zwischen den Kanälen immer mehr verschwimmen, und der Kunde wird so zum Nutznießer einer "No-Line-Welt", in der alle Vertriebsformen miteinander im Einklang stehen. Je intelligenter sprich reibungsloser die einzelnen Kontaktpunkte miteinander vernetzt sind, desto höher werden auch die Conversions ausfallen - und damit die Gesamtumsätze des Händlers, prognostiziert der BVDW.
Im Verlauf des Informations- und Kaufprozesses nehmen die diversen Endgeräte auch unterschiedliche Rollen ein, das Tablet beispielsweise dient als Substitut zum Notebook, die Werbewirkung ist hier zudem wesentlich höher als bei Geräten mit geringerer Bildschirmgröße. Die Verknüpfung der einzelnen Kanäle schafft die Grundlage für mehr effizienz innerhalb der Customer Journey, wobei sich das Kundenverhalten auf mobilen Geräten stark von dem auf stationären Rechnern unterscheidet.
Eine mobile Website muss also nicht zwangsläufig alle Funktionalitäten einer nativen Website erfüllen - und erst recht nicht genauso bedient werden können wie Anwendungen am Desktop-PC. Deshalb lohnt eine ganzheitliche, über die gesamte Laufzeit der Anwendung gerichtete Betrachtung. Responsive Design hieße hier, von Anfang an alle maßgeblichen Endgeräte mit einer abhängig vom Nutzungskontext idealen Gestaltung zu versehen. Der Mehraufwand während der Konzeptions- und Umsetzungsphase kann dabei durch die langfristigen Vorteile durchaus ausgeglichen werden. Auf lange Sicht lassen sich damit sogar deutliche Einsparungen in der technischen Wartung und redaktionellen Pflege realisieren, so der BVDW. Der allgemeine Trend heißt Responsive Design - unabhängig davon, ob sich der einzelne Web-Händler aufgrund einer individuellen Analyse der Nutzungsszenarien und langfristigen IOnvestitionsplanung für eine native oder hybride Mobile-Anwendung oder einen responsiven Design-Ansatz entscheidet.
