René
06.07.2015 von René

Mobile Themes - immer und überall shoppen

Gepostet in ,

Nahezu jeder Betreiber eines Onlineshops hat die Entwicklung der letzten Jahre aufmerksam verfolgt. Die Internetnutzung durch mobile Endgeräte ist rasant gestiegen und deren Einfluss im E-Commerce wächst immer weiter an. Mit einem angepassten Design lässt sich die Benutzung des Onlineshops mit den Handhelds optimieren und damit den Umsatz steigern.

Anstieg der Käufe über mobile Geräte

Viele Onlinehändler sind zufrieden mit Ihrem Internetshop. Seit mehreren Jahren läuft das System störungsfrei und alle Kollegen arbeiten damit reibungslos. Doch besonders ein in die Jahre gekommenes Frontend, also die Kundenansicht des Shops, muss an die veränderten Nutzungsarten der Besucher angepasst werden. Denn die Zeiten, in denen jeder am Schreibtisch vor dem Desktop-Rechner sitzt, sind schon lange vorbei. Auch dank schneller mobiler Internetverbindungen lässt sich ein spontaner Einkauf im Internet fix in der Bahn oder während des Fernsehens auf dem Sofa erledigen. Und genau an diesem Punkt nimmt der Marktanteil an Webshops mit statischen Layouts ab. Denn wegen der fehlenden Anpassung an die kleineren Bildschirme ist die Menge an angezeigten Informationen zu groß und damit die Darstellung des Inhalts zu klein. Eine Webseite, die ohne ein mobiles Template oder ohne einem responsiven, für alle Endgeräte dynamisch angepasstes Design auf dem Smartphone angezeigt wird, ist nur mit vielen Hürden bedienbar. Besondere Schwierigkeiten bereitet dabei die Navigation, da die Schaltflächen und Links der Webseite zu klein für die Finger der Benutzer sind und Wischgesten meist nicht interpretiert werden. Dann hilft es nur, vor jedem Klick die Ansicht auf dem Mobile Device zu vergrößern. Viel mehr ist aber davon auszugehen, dass der potentielle Kunde auf Grund der umständlichen Handhabung den Onlineshop wieder verlässt. Veraltete Onlineshops lassen hier viel Potential liegen. Eine Anpassung ist demnach im E-Commerce-Bereich unerlässlich und hilft, die mobile Kaufrate (Conversion Rate) zu steigern. Die Umsetzung eines mobilen Frontends lässt sich grundsätzlich auf drei verschiedenen Wegen lösen.

Eine Methode für mobile Endgeräte ist die Entwicklung einer eigenständigen nativen App, die aber mit dem Aufkommen von mobilen Versionen von Webseiten keinen nennenswerten Usability-Vorteil mehr bieten und auf Grund der geringen Flexibilität, der Vielzahl an mobilen Betriebssystemen und den hohen Entwicklungs- und Wartungskosten für Onlineshops nur bedingt geeignet sind. Den Vorteil, auf Hardware wie die Kamera oder den Ortungsdienst des Geräts zuzugreifen, bieten mobile Browser auch schon seit geraumer Zeit an und können nach einer Nutzerfreigabe von einer Webseite abgefragt werden. Die native App trägt zudem nicht zur Akquise von Neukunden bei, da sie im Gegensatz zu Webseiten nicht oder nur unzureichend in Suchmaschinen beworben werden kann. Man muss Ihren Onlineshop also schon kennen, um die entsprechende App herunterzuladen. Deshalb bieten sich die Apps hauptsächlich für bekannte Shops mit einem hohen Anteil an Stammkunden an. Damit verankern Sie Ihren Shop auf dem Startbildschirm der mobilen Geräte und laden den Kunden zum spontanen stöbern ein.

Bei bestehenden Shops ohne mobile Variante kann eine separate mobile Ansicht hinzugefügt werden. Dabei wird beim ersten Aufruf einer Seite des Shops der Typ des Geräts abgefragt, mit dem die Webseite angefordert wurde. Je nach Geräteart wird der Besucher danach auf das große oder mobile Template weitergeleitet und navigiert sich dann durch das für sein Endgerät angepasste Design des Shops. Bei dieser adaptiven Variante handelt es sich um eine vollständig von der Hauptansicht getrennten Ansicht, die unabhängig bearbeitet werden kann bzw. muss und in sich statisch ist. Da bei Auslieferung der Seite das empfangende Endgerät abgefragt wird, muss es auf dem Server für eine bestimmte Variante definiert sein. Weicht ein Endgerät den festen Definitionen ab, kann es unter Umständen zu Darstellungsfehlern kommen.

Mit dem Aufkommen moderner Webtechnologien hat sich im Webdesign zunehmend das responsive Design etabliert. Als weitere Variante der Ausgabemöglichkeiten auf mobilen Endgeräten verfolgt das responsive Design einen alternativen Lösungsweg. Dabei werden nicht jeweils unabhängige Webseiten mit festen Darstellungen ausgeliefert, sondern eine Seite mit allen Informationen ausgeliefert, die mit Hilfe der gestalterischen Möglichkeiten von CSS an die jeweilige Größe des Displays angepasst wird. Dabei wird permanent die Bildschirmbreite überwacht und relativ dazu die Elemente nach deren Relevanz eingeblendet und zusammengefasst, um die Übersichtlichkeit der Webseite zu wahren. Es ist auch möglich, die Inhalte innerhalb der Seite nachträglich laden zu lassen, wenn der Besucher sie auch tatsächlich sehen kann. Dieses Lazy Load genannte Vorgehen reduziert die übertragenen Daten, verkürzt die Ladezeiten der Webseite und schont somit das mobile Datenvolumen des Kunden. Der Vorteil des responsiven Designs liegt in der Dynamik der Anzeige und der Wartung der Shopseiten, da die Pflege eines eigenständigen Mobildesigns entfällt. Shopware hat das Design seines Shops mit der kürzlich erschienenen Version 5 vollständig auf responsiv umgestellt. Damit erreichen Sie alle Internetbenutzer mit einem übersichtlichen Design und bieten angepasste Navigationsmöglichkeiten und Darstellungen für jedes Endgerät. Aber theoretisch ließe sich dank der Verwendung standardisierter Technologien wie CSS und JavaScript jeder Onlineshop mit einem responsiven Frontend ausstatten, auch Systeme wie Oxid und andere. Da alle Informationen aber mit der gleichen Webseite ausgeliefert werden, kann es bei der Anpassung an die verschiedenen Darstellungen zu Problemen führen. Besonders bei der Erweiterung einer bestehenden Seite werden Sie immer wieder vor Kompromisse gestellt, wenn es darum geht, welche Informationen und Elemente der Seite bei geringem Platzangebot ausgeblendet werden. Eine saubere responsive Webseite erfordert also eine wesentlich komplexere Programmierung und Vorgaben wie Skizzen lassen sich nur schemenhaft erstellen. Die Neuerstellung eines Designs sollte auf jeden Fall mit Hilfe des “mobile first”-Prinzips umsetzt werden. Dabei wird auch in Hinblick auf die Bedeutung der mobilen Ansicht bei Google zuerst diese umgesetzt und den größeren Darstellungen sukzessiv weitere und ergänzende Informationen und Bilder hinzugefügt. Damit können Darstellungsfehler vermieden und Änderungen globaler durchgeführt werden. Allgemein passt dieses Verfahren zum modernen Ansatz des Webdesigns, klare und übersichliche Layouts zu erschaffen.

In den nächsten Jahren wird der Anteil der von Smartphones und Tablets getätigten Käufen weiter steigen und mindestens die Hälfte des gesamten Umsatzes betragen. Auch im Businessbereich setzen sich mobile und überall einsatzfähige Endgeräte durch. Die Erstellung einer mobilen Ansicht Ihres Webshops ist demnach unerlässlich und sollte nicht länger verschoben werden.

Haben Sie Fragen zu den Möglichkeiten einer mobilen Shopseite oder planen Sie den notwendigen Schritt mit einer Agentur? Dann kontaktieren Sie uns.