Mobile Optimierung Magento

Responsive Design als Standard im E-Commerce

Die Ausrichtung von Online-Angeboten auf mobile Endgeräte ist längst mehr Pflicht als Kür. Der Trend zum mobilen Shopping hat allein in Österreich um gute 20 Prozent zugenommen, wie die e-Commerce Studie 2018 zeigt. Für Onlineshops gilt stärker als je zuvor, das Angebot in Design und Funktion anzupassen – Tendenz steigend. Ansonsten sind Ausstiege potentieller Käufer an Smartphone und Tablet vorprogrammiert.

Was bedeutet „responsive“?

Bei einer responsiven Website bleibt das dahinterliegende HTML für alle Endgeräte unverändert. Die grafische Darstellung wird über CSS queries jedoch flexibel an die unterschiedlichen Bildschirm-Größen angepasst. Obwohl hier bereits ganz gern von mobiler Optimierung gesprochen wird, schafft dieser Schritt jedoch meist nur ein Grundgerüst. Mit diesem wird die Website auf unterschiedlichen Geräten wie Tablets oder Smartphones zumindest korrekt angezeigt.

Darüber hinaus aber zeigen sich häufig diverse Mängel. So kann die Bedienung aufgrund schlechten Empfangs unterwegs langsam oder schlecht möglich sein. Vielleicht ist auch der Checkout, der am Desktop wunderbar glatt läuft, mobil kompliziert und steinig. Damit werden oft Conversion-Punkte verschenkt – und damit wertvolle Aufträge.

Für echte mobile Optimierung gibt es daher umfangreicheren Handlungsbedarf – weit hinaus über die bloße Erstellung einer korrekten mobilen Variante.  Unsere folgenden Praxis-Tipps zeigen Möglichkeiten für funktionale Responsive Web Onlineshops auf.

E-Commerce: Nachhaltige mobile Optimierung von Webshops

Intelligente Reduktion von Inhalten

Gut zu wissen: Mobil werden häufig Links von Suchmaschinen oder auch Newsletter angeklickt. Bei Onlineshops landet man dabei meist auf beworbenen Produkt-Seiten. Wie auch bei den Kategorie-Seiten sollen hier sowohl Produkt-Bild als auch der wichtigste Text sofort angezeigt werden – ohne langes Scrollen. Für die relevantesten Seiten wie Kategorien oder Produktdetails ist zu definieren, auf welche Elemente (Bilder, Texte, Grafiken) ab welcher Bildschirm-Größe verzichtet werden kann und soll, um den Benutzer nicht zu überfordern. Die Optimierung beginnt daher schon bei der Auswahl von Header-Grafiken. Sind diese zu groß, muss der mobile User nämlich häufig scrollen. Und das kann bei der Ansicht mehrerer Produkte schnell mühsam werden.

Größe von Elementen vs. Zoom

Ein Grundsatz für alle Elemente wie Links, Texte, Menüs oder Produktbilder ist die problemlose Ansicht ohne notwendiges Zoomen. (Ausnahme: Bilder.) Zu kleine Schriftgrößen sind ein besonders häufiger Fehler im Sinne mobiler Optimierung.

Bilder-Zoom

Für Bilder auf mobilen Geräten wird eine Zoom-Funktion empfohlen. Da Mouse-over und Co. auf Tablets und Smartphones nicht funktionieren, bieten sich eigene Zoom-Buttons an.

Links

Der Abstand zwischen mehreren Links soll so gewählt sein, dass keine Probleme beim Anklicken entstehen.

Menüs

Menüs sollten klar erkennbar sein – und groß genug, um sie auch via Smartphone sauber bedienen zu können. Darüber hinaus soll auf Hover-Menüs verzichtet werden.

Flash

Nach wie vor sind Websites online, die Flash einsetzen. Flash kann aber auf einem nicht unbeträchtlichen Teil mobiler Endgeräte – nämlich Apple – nicht dargestellt werden.

Geschwindigkeit

Mobile User bewegen sich oft in Bereichen ohne perfekten Empfang. Darum ist aus Gründen der Lade-Geschwindigkeit auf die Reduktion unnötiger Grafiken und Multimedia-Elementen – wie Töne und Animationen – zu achten. Auf diesen Aspekt legt auch Google großen Wert – für den Ranking-Faktor der mobilen Suche.

Responsive Design_pexels-photo-rawpixel.com

Mobiler Checkout

Gerade bei den letzten Schritten bis zum Kauf-Abschluss ist maximale Effizienz angesagt.

Schließlich müssen wir dem mobilen Käufer zumuten, eine verhältnismäßig große Menge an Daten mit dem Finger auf kleiner Tastatur einzugeben. Auch und vor allem hier gilt also: Disziplinierte Reduktion auf das Wesentliche, Förderung schneller Ladezeiten – und möglichst wenig Schritte.

Warenkorb

Wichtiger Faktor ist ein mobil guter Überblick über alle relevanten Warenkorb-Informationen. Die wichtigsten Produkt-Details und Versandkosten sollen angezeigt werden.

Daten-Eingabe

„Geburtsdatum“ oder andere Felder für Marketing-Zwecke haben im mobilen Checkout nichts verloren. Schließlich tippt unser Besucher hier alles verhältnismäßig mühsam ein. Die Lösung ist es, viele Datenfelder, sofern möglich, vorauszufüllen – und bei Eingabefeldern gleich die richtige Smartphone-Tastatur zu öffnen. Häufig muss für die Eingabe von Telefonnummer oder Kreditkarten-Nummer für jede Zahl auf den Ziffernblock umgeschaltet werden. Das stellt einen doppelten Aufwand dar, der mehr Zeit braucht – was ein hohes Risiko für Abbrüche birgt. Auch die immer häufiger gern eingesetzte Möglichkeit, als nicht-registrierter Gast zu bestellen, bietet sich an: Dabei müssen von Haus aus weniger Daten eingegeben werden.

Vertraulichkeit

Symbole oder Informationen zum Thema Datenschutz sind unverzichtbar. Gerade mobil möchte der Besucher die Gewissheit haben, dass sich seine Daten in sicheren Händen befinden.

Bestell-Übersicht

Neben gesetzlichen Kriterien – Stichwort „Button-Lösung“ – werden dem mobilen Käufer alle relevanten Informationen nochmals gut und schlüssig angezeigt: Produkt-Daten, Rechnungs- und Lieferanschrift, gewählte Zahlungsart und Versandkosten. Rechtskonform sollte der Button „Jetzt kaufen“ heißen.

Ihr Onlineshop wartet auf umfassende mobile Optimierung?

Als zertifizierte Magento Agentur für den deutschsprachigen Raum sind wir gerne Ihr Ansprechpartner. Wir freuen uns auf Ihre unverbindliche Kontaktaufnahme.

Foto-Credit: Pexels-rawpixel.com