Blog:

„Mobile-First“ in der Praxisumsetzung - Clevere Strategien für das Shop-Design

Ein Gastbeitrag von Johannes W. Klinger

Mit der stetigen Zunahme der Nutzung mobiler Endgeräte im eCommerce stellt die Umsetzung des „Mobile-First“-Gedanken eine wichtige Anforderung dar. Dabei bleibt auch Responsive Design ein Trendthema. Es verspricht die beste Lösung, um Inhalte von Online-Shops, sowohl auf stationären PCs wie auch Handys und Tablets darzustellen. Meist wird hier aber daran gearbeitet die klassische Desktop-Darstellung auf mobile Endgeräte zu projizieren. Im Sinne von „Mobile-First“ geht es aber vielmehr darum, die mobile Usability in den Vordergrund zu stellen. Daher kann es ratsam sein, statt einem Responsive Design für alle Endgeräte eigenständig designte mobile Subshops für den mobilen Einkauf einzusetzen. 

Der Sammelbegriff „mobiles Endgerät“ selbst täuscht darüber hinweg, dass die User Experience auf dem Tablet durchaus anders ausfällt als auf dem Smartphone. Grob gilt, je größer das Display, desto mehr Zeit nehmen sich Nutzer für Recherche oder Surfen. Das wiederum hat Folgen auf die Inhalte, die bereitgestellt werden sollten. Da noch immer nicht überall LTE- oder W-LAN-Verbindungen zugänglichen sind, müssen in einem Responsive Design zahlreiche Inhalte zusätzlich angepasst bereitgestellt werden. Hinzu kommt der hohe Arbeitsaufwand beim Design durch eine gestiegene Vielfalt an mobilen Endgeräten, inklusive deren Bildschirmauflösungen und Browserversionen. 

Der Gesamtaufwand für Responsive-Shops liegt daher wesentlich höher als bei klassischen Webshops: Aufwendig zu erstellende und zu testende Steuerungen des Ladeverhaltens sind dann für einen guten Shop leider zwingende Voraussetzung für ein positives Suchmaschinen-Ranking oder ein hohes Einkaufserlebnis durch kurze Wartezeiten. Dadurch können in Responsive-Design-Projekten die Zeiten für die Erstellung eines guten Shops oftmals unerwartet hoch ausfallen. Auch die spätere Update- und Pflegearbeit an Design und Inhalten wird aufwendiger. Die Erfahrung zeigt, dass die investierte Arbeitszeit insgesamt um das Zwei- bis Dreifache gestiegen ist. Das wiederum macht komplexe Shops für mittelständische Händler schnell unwirtschaftlich. 

Doppelt gemoppelt hält auch im eCommerce besser 

Um eine effizientere Lösung zu gewährleisten, gibt es eine clevere Alternative. Sie ist ähnlich zu der Strategie die Google für statische Inhalte wie News oder Blogs favorisiert. Dort sollen nämlich parallel zu den Desktop-Seiten sogenannte AMP-Seiten für mobile Geräte erstellt werden. Auf Shops übertragen bedeutet dies, es werden zwei unabhängige, getrennte Basislayouts erstellt: Zum einen für die Endgeräte mit größeren Bildschirmauflösungen und stationärer Internetanbindung. Hier bedient ein großformatiges Layout die heutigen Anforderungen an Großansichten und Informationen. Zum anderen ein vereinfachtes responsives Layout nur für kleinere, mobile Geräte mit datensparsamen, angepassten Bildern und Inhalten. So wird eine erste Aufwandsersparnis allein durch das intelligente Konzept geschaffen: Bei keinem der beiden Layouts muss ein Kompromiss eingegangen werden. Zudem entfällt der Aufwand, einen fließenden responsiven Übergang zwischen den beiden Designvarianten praktisch umzusetzen und zu gewährleisten. 

Im mobilen Layout wird sinnvollerweise ein Responsive Design erstellt, um den verschiedenen Displaygrößen der Mobilgeräte Rechnung zu tragen. Dabei entsteht eine zweite Aufwandsersparnis: Dieses Responsive Design kann deutlich einfacher umgesetzt werden. Denn: Im Wesentlichen müssen Inhalte nur noch verkleinert oder vergrößert dargestellt werden. Größere Layout-Anpassungen beziehungsweise komplexe Ladesteuerungen für unterschiedlich große Grafiken je nach Zielsystem sind kaum noch notwendig. Dadurch kann das Responsive Design die Fülle unterschiedlich großer mobiler Endgeräte effektiver unterstützen. Das Layout für Kunden, die von einem Desktop, Laptop oder größerem Tablet mit W-LAN-Verbindung auf den Shop zugreifen, muss dagegen aufgrund der größeren Darstellungsfläche, wenn überhaupt, nur in sehr geringem Umfang responsive programmiert werden. Das wiederum reduziert die Arbeitszeit für die Erstellung deutlich. Für Händler, die bereits einen Onlineshop betreiben, heißt das, eine zusätzliche Mobile-Shop-Variante zu erstellen, die gezielt für die mobile Anwenderfreundlichkeit konzipiert ist, anstatt den gesamten Shop in eines der häufig zu sehenden Kompromiss-Designs zu zwingen. 

Subshops: benutzer- und SEO-freundlich 

Damit ein solches Konzept funktioniert, muss der Shop-Server lediglich erkennen, ob der Besucher von einem stationären oder mobilen Gerät aus zugreift und welche Anzeigegröße benötigt wird. Nutzt der Händler eine SaaS (Software-as-a-Service) Shop-Plattform, ist diese Erkennung bei guten Anbietern als Option verfügbar. Ein weiterer Vorteil von SaaS-Anbietern ist die Erfahrung aus Entwicklung und Betrieb von Shopsystemen, die in diesem Fall für den erfolgreichen Einsatz einer Subshop-Technologie für mobile Shops genutzt werden kann. Solche cleveren Konzepte von zwei parallelen Shop-Layouts erlauben es zudem, beliebige textliche und sonstige Inhalte, auch SEO-Inhalte, in den einzelnen Subshops bedarfsgerecht anzupassen und exklusiv für den jeweiligen Subshop bereitzustellen. 

So entfällt die für Suchmaschinen unvorteilhafte Bereitstellung teils gleicher Inhalte in mehreren Varianten im HTML-Code auf einer einzigen Seite – zum Beispiel eines langen Textes für Desktop und eines kurzen Textes für Mobile oder eines Bildes sowohl in Groß- als auch Kleinformat. Wenn übliche Kennzeichnungen stationärer und mobiler Inhalte für die beiden alternativ erstellten, unterschiedlichen Seiten verwendet werden, unterscheiden Suchmaschinen ganz explizit zwischen den Inhalten für die zwei verschiedenen Zielgruppen. Das Ranking bleibt für beide Subshops erhalten, da die Inhalte suchmaschinenkonform gekennzeichnet sind und so nicht als konkurrierender Duplicate Content abgewertet werden. Durch Subshops kann die SEO-Optimierung bei Bedarf sogar noch feiner gesteuert werden als über einen einzigen (Responsive-) Shop, in dem alle Inhalte für alle Zielgruppen zusammengefasst werden. 

Fazit 

Die mobile Nutzung wird im Onlinehandel auch zukünftig weiter steigen. Die Anpassung mobiler Shops an die Anforderungen des mobilen Shoppings ist unausweichlich und sollte bei Onlinehändlern fest in ihrer Strategie verankert sein. Die Einführung mobiler Subshops, die den „Mobile First“-Gedanken von Grund auf berücksichtigen, stellt dabei für Onlinehändler einen wichtigen Baustein für den erfolgreichen Handel der Zukunft dar. 

Über den Autor: Johannes W. Klinger ist Vorstandsvorsitzender der Websale AG. Das Unternehmen entwickelt und betreibt seit 1996 die gleichnamige Shop-Plattform „Websale“ für Online-Händler und gilt als First-Mover für SaaS-Shopsysteme in Deutschland. Es hat jede Station in der Entwicklung des eCommerce gestaltet und passte die Shopsoftware immer wieder den neuen Anforderungen an. Aktuell wird es unter dem Namen „V8s“ in der achten Version betrieben.