Mobile Optimization

Mobiler Kundenfang

Zahlreiche Studien belegen, dass über Smartphones und Tablets im sogenannten M-Commerce immer mehr Waren verkauft werden. Dass deshalb die Optimierung mobiler Webseiten für die Anbieter von Webshops und -seiten Priorität haben sollte, um User dauerhaft auf der Webseite halten zu können und zum Kauf zu animieren, spricht sich auch allmählich herum.

Es gab Zeiten, da standen mobile Webseiten weitgehend im Schatten nativer Apps. Die zentrale Vermarktung über den jeweiligen Appstore war vor allem unter finanziellen Aspekten verlockend. Doch das Angebot ist unüberschaubar geworden, für jede Lebenssituation gibt es Apps – gleich in mehrfacher Ausführung. Irgendwann ist jeder Smartphone-Bildschirm voll von Anwendungen, die nur selten genutzt werden.

Hier schlägt die Stunde mobiler Webseiten: Für sie spricht die schnelle und unkomplizierte Erreichbarkeit, da sie ohne vorherige Installation und über die normale Websuche auffindbar sind. „Der Vorteil ist die generelle Unabhängigkeit von Betriebssystemen und Endgeräten, da im Grunde alle aktuellen Geräte mobile Browser standardmäßig bereitstellen“, erklärt Tim Neugebauer, Geschäftsführer von „Das Medienkombinat“. Vorbei sind die Zeiten ewigen Scrollens und Vergrößerns. Oder etwa nicht?

Webseiten müssen zunehmend dahingehend optimiert werden, dass sie auf den kleinen Smartphone-Bildschirmen – wenn diese bei den letzten Produktneuvorstellungen auch immer größer werden – gelesen und bedient werden können. Eine entsprechende Investition ist aus mehreren Gründen lohnenswert, denn lange Ladezeiten und schlechte Usability, wie sie bei Standardwebseiten der Fall ist, wenn sie über mobile Geräte aufgerufen werden, fördern nicht unbedingt die Kundenzufriedenheit. Da die Schnelligkeit der Datenleitung bei mobilen Endgeräten im mobilen Netz gegenüber einer DSL-Leitung deutlich hinterherhinkt, sind die Ladezeiten der regulären Webseiten auf diesen Geräten oft ausgesprochen lang. Das kostet den User unnötig Zeit und Nerven und bringt dem Webseitenbetreiber unzufriedene Kunden. Umrüsten ist angesagt.

Die Kreativität der Hardwareproduzenten, bei der Einführung neuer Formfaktoren (4-, 7-, 9-, 10-Zoll-Displays), lässt bei Web-designern wenig Freude aufkommen. „Die zunehmende Gerätevielfalt stellt Entwickler und Betreiber vor die Herausforderung, entsprechende Nutzungsszenarien, Interfaces und Bedienkonzepte für ein heterogenes Umfeld bereitzustellen“, weiß Neugebauer zu berichten.

Grundsätzlich folgen Mobilgeräte einer einfachen Strategie bei der Darstellung von Webseiten. Sie skalieren den Inhalt auf die zur Verfügung stehende Breite der Bildschirmfläche herunter. Der Nachteil: Bild- und Textelemente sowie die Menüleiste sind so klein, dass zoomen und scrollen nötig ist, um überhaupt etwas lesen zu können.

Responsive Webdesign (RWD)

Abhilfe soll das RWD schaffen. Bei dem „reaktionsfähigen“ Design handelt es sich um eine Technik, mit der Webinhalte mobil dargestellt werden können und die sich derzeit zum Standard entwickelt. Mobile Internetnutzer erwarten, dass ihnen auf dem eigenen Gerät ein verändertes Design und Layout angeboten wird, am besten maßgeschneidert. „Aufgeräumte Seiten, schnell auffindbare Suchfunktionen, schlanke Hierarchien und wenige Overlays sind hier die Stichworte“, weiß Karl-Heinz Maier, Director Central Europe bei WebTrends. RWD basiert auf HTML5 und der Cascading-Style-Sheets-(CSS)-Erweiterung Media Queries. Mit der erweiterten Funktionalität, insbesondere CSS3 und speziellen @-Media-Regeln, lassen sich die Eigenschaften und Fähigkeiten des jeweiligen Endgeräts abfragen. Schriftgröße und Bilder skalieren sich entsprechend der Breite und Höhe und auch die Position (Portrait oder Landschaft) wird automatisch erkannt.

Als CSS-Erweiterung bearbeiten Webdesigner das bereits vorhandene Stylesheet für Desktopbrowser um zusätzliche Media-Queries-Anwendungen, sodass der Inhalt nur ein einziges Mal angelegt werden muss. Werden die Eigenschaften eines Mobilgerätes erkannt, überschreiben die Media Queries die Anweisung für Desktopbrowser, mithilfe separater CSS-Dateien wird der Inhalt für jedes Gerät unterschiedlich dargestellt. Mit dieser Methode lassen sich derzeit die eigentlichen Webinhalte jedoch nur bedingt an mobile Geräte anpassen: Theoretisch lassen sich Bilder zwar auch per CSS verkleinert darstellen, allerdings wird im Hintergrund immer die Originalgröße geladen. Besser wäre es, Bilder direkt in geringerer Dateigröße hinterlegen und laden zu können.

Die M-Variante

Eine Alternative zur CSS-Methode ist eine spezielle M-Webseite, die vor allem Nachrichtenportale zur Verfügung stellen. Die Adresse der Mobilseite entspricht meist der Desktopvariante, da sie über eine Subdomain verfügbar ist. Einziger Unterschied: Ein „m“ (oder „mobil“) ersetzt das gewohnte www. Über eine Browserweiche wird zudem ein automatischer Wechsel zur Mobilversion ermöglicht, falls die Standardadresse eingegeben wird, sodass immer das richtige Seitenlayout angezeigt wird. Oft handelt es sich bei der mobilen Version jedoch um eine „abgespeckte“ Variante im Vergleich zur Desktopausgabe. Sie enthält weniger Features, meist einen gekürzten oder geänderten Inhalt und größere Bedienelemente, beispielsweise in der Navigationsleiste. Dies soll vorrangig schnelle Ladezeiten und eine bessere Steuerung per Touchscreen möglich machen. Problematisch ist jedoch die Auswahl der reduzierten Inhalte. Denn die mobile Internetnutzung ist nicht gleichbedeutend mit der Nutzung von unterwegs – vor allem Tablets werden häufig nicht-mobil genutzt. Ein angepasster, eingeschränkter Inhalt darf sich nicht zum Nachteil der Nutzer auswirken. Denn wer von Zuhause aus das Tablet nutzt, möchte meist nicht auf den ausführlichen Inhalt verzichten. Vor allem in Webshops ist es wichtig, dass die gleiche Angebotspalette zu sehen ist. Nutzer müssen daher immer die Möglichkeit haben, auch mit einem mobilen Endgerät auf die „normale“ Version wechseln zu können, um so gegebenenfalls alle Informationen zu erhalten.

Soll eine mobile Webseite genau an bestimmte Gerätetypen angepasst werden, etwa an die Pixelzahl oder Displaygröße, benötigen Entwickler zahlreiche Informationen über das jeweilige Gerät. Hilfreich dabei ist die WURFL-Datenbank – Wire­less Universal Resource File – ein Open-Source-Projekt. Es handelt sich um eine frei verfügbare XML-Datei, die für über 400 Mobilgeräte Informationen zur Auflösung des Displays sowie zu unterstützenden Bildformaten enthält. Michael Bark, Geschäftsführer der Evodion GmbH gibt zu Bedenken, „dass das WURFL-Projekt für die kommerzielle Nutzung inzwischen nicht mehr als Open Source zur Verfügung steht“. Durch die Weiterentwicklung von CSS3, HTML5 und insbesondere den Media Queries mit dem Viewport-Konstrukt steht seiner Meinung nach aber eine weniger komplexe und gradlinigere Technik zur Verfügung. Anstatt bei einer explodierenden Anzahl von Devices jedesmal das Profil konkreter Modelle zu erfragen, orientiert man sich damit schlicht an der Auflösung bzw. Bilddiagonalen des Gerätes. Michael Bark geht daher davon aus, dass dedizierte Webseiten – etwa für einzelne Smartphone-Typen – in Zukunft verschwinden werden.

Warum Webshops eine mobile Webseite brauchen

Für welche Variante sich die Webseiten-Anbieter auch entscheiden, notwendig ist es allemale etwas in Richtung Mobile zu verändern, denn Mobile Commerce ist auf dem Vormarsch. Die Zugriffe auf Onlineshops und Webseiten über mobile Geräte steigen ständig an, nicht zuletzt wirkt sich dies auch auf den Umsatz aus, der über den mobilen Kanal gemacht wird. Anbieter müssen auf diese Entwicklung zeitnah reagieren. Inzwischen erwartet die Hälfte der deutschen Internetnutzer, dass ein Onlineshop nicht nur mobil erreichbar ist, sondern vor allem auch einfach und komfortabel genutzt werden kann, wie eine Untersuchung von Fittkau & Maaß Consulting im Januar dieses Jahres ergab. Viele Anbieter müssen in diesem Zusammenhang noch gründlich nachrüsten und scheinen die Reichweite der mobilen Nutzung und die Ansprüche der Nutzer zu verkennen. Denn: Je komfortabler ein Nutzer zwischendurch und unterwegs zu gewünschten Informationen oder etwa dem Warenkorb gelangt, desto mehr Zeit verbringt er auf dieser Seite und schließt den Kaufprozess auch ab.

Der Warenkorbprozess beispielsweise muss für den mobilen User speziell gestaltet sein und darf keine Barrieren aufweisen – sonst wird mögliches Umsatzpotential verschenkt. Shopper schrecken nicht davor zurück, einen Vorgang mit vollem Warenkorb aufgrund Unzufriedenheiten mit der entsprechenden Seite abzubrechen. Zudem besteht die Gefahr, dass der User das Shopping-Erlebnis als negativ wahrnimmt, abspeichert und deshalb nicht wieder zurück auf die Webseite kommt.

Der mobile Auftritt muss schnell und übersichtlich funktionieren und sollte im Hinblick auf mobile Anforderungen auch ortsbezogenen Nutzen bieten. Gerade im Web ist ein realitätsnaher visueller Eindruck des Produktes wichtig, zunehmend setzen Shop-Betreiber deshalb auf Produktvideos oder 360-Grad-Ansichten, die einen besseren Eindruck vermitteln sollen als rein zweidimensionale Bilder.

Mobil wird aber nicht nur eingekauft, auch Produktinformationen und Angebote des stationären Einzelhandels werden abgerufen. Daher sind nicht nur Online-, sondern auch stationäre Händler gefordert, ihr Angebot und ihren Service den mobilen Anwendern auf komfortable Weise nutzbar zu machen.

Zurück in den Laden

Besonders hartnäckig hält sich das Gerücht, dass Onlineshops eine Gefahr für lokale und stationäre Einzelhandelsgeschäfte seien und sowohl um Umsatz als auch Kunden konkurrieren. Vor allem das „Showrooming“, bei dem Kunden die Ware vor Ort anschauen und testen, später den Artikel aber im Internet bei einem günstigeren Anbieter kaufen, nimmt zu. Mit der richtigen M-Commerce-Strategie und „Mobile“ als einem von mehreren Vertriebskanälen lassen sich Umsatzeinbußen sowie auch Kundenverlust vermeiden. Nicht nur Internetseiten speziell für mobile Nutzer sind eine Möglichkeit, Kunden dauerhaft an ein Unternehmen zu binden. Auch das „Mobile Couponing“ hat volle Fahrt aufgenommen und sich als sinnvolle Ergänzung im Marketingmix von Einzelhändlern erwiesen.

Mobile Couponing ist die konsequente und digitale Weiterleitung bisheriger Rabattcoupons. Dank Geo-Targeting und Location-based-Tracking bekommen Kunden auf ihrem Weg durch die Stadt relevante Coupons und andere Angebote per Push-Nachricht auf ihr Smartphone geschickt. Diese können dann durch Vorzeigen und Abscannen vor Ort eingelöst werden. Für den Anbieter geht es vor allem darum, dass Kunden ohne große Umstände und genau dann den richtigen Rabattgutschein bekommen, wenn sie ihn brauchen. Couponing ist eine Methode, reine Online-Einkäufer wieder zurück in die lokalen Ladengeschäft zu holen. 

Bildquelle: Thinkstock/ iStockphoto

©2019Alle Rechte bei MEDIENHAUS Verlag GmbH

Unsere Website verwendet Cookies, um Ihnen den bestmöglichen Service zu bieten. Durch die weitere Nutzung der Seite stimmen Sie der Verwendung zu. Weitere Infos finden Sie in unserer Datenschutzerklärung.

ok