Shop fürs Handy optimieren

Das die Optimierung für Handys heute wichtiger den je ist, dürfte jedem Websitenbetreiber bewusst sein (mobile first). Nach neusten Erhebungen nutzen in Deutschland bereits weit über 50% aller User ihr Handy, um im Internet zu browsen. Es wäre also schade, wenn ein User ihre Seite erreicht und diese nicht optimal für das Handy gestaltet wurde. Denn dann besteht das Risiko, dass der User ihre Seite ohne einzukaufen wieder verlässt.

Um User auf Ihre Website ein angenehmes Erlebnis zu bieten und auch Suchmaschinen von ihrer Seite zu überzeugen, sind neben einem reibungslosen Bestellvorgang auch folgende 3 Punkte wichtig:

	Wichtig für Ihre mobile Website:
	1. Optimierte Banner und Bilder
	2. Gute Lesbarkeit
	3. Bestes Usability

Auch über Anpassungen für Tablets sollte nachgedacht werden. Da der Nutzeranteil aber weit unter dem von Handy-Nutzern liegt, dürfte der Mehrwert im Moment vermutlich eher eine Nebenrolle spielen.

1. Banner

Banner sollte immer responsiv gestaltet werden. Das hat 2 Gründe:

1. Die Datenmenge wird deutlich verringert was zu schnelleren Ladezeiten führt

2. Für dem PC wird ein Banner i.d.R. im Querformat erstellt. Da ein Handy aber im Gegensatz zu einem PC-Bildschirm immer im Hochformat gelesen wird, muss dafür ein 2. Banner gebaut werden, dass für Hochformat optimiert wurde. Sonst würde das Banner sehr schmal und klein werden, wodurch das Banner nicht mehr hervorstechen und seine Wirkung verloren geht.

Ein grafischer Banner ohne Overlay für den PC:

Derselbe Banner ohne Overlay für das Handy:

Man kann deutlich den Unterschied erkennen. Um im Bsp. Die Schriften so gut wie möglich lesbar darzustellen, wurden die Bild als PNG erstellt. Das bedeutet aber leider auch mehr Daten als die Erstellung des Banner im JPG Format.
Deshalb ist es besser, Banner mit Overlays zu gestalten.

Hier ein Banner mit Overlay (d.h. die Texte und Button sind nicht im Bild, sondern mit CSS über das Bild gelegt:

Ein Banner mit Overlay in CSS für den PC

Und hier das Banner optimiert für Handys

Der Vorteil neben einer deutlichen Datenreduktion sind auch gestochen scharfe Schriften, die frei platziert werden können. Außerdem können die so eingebauten Texte von Suchmaschinen gelesen werden.

Buttons

Auch bei den Buttons muss zwischen Desk und Mobile unterschieden werden. Buttons auf dem Handy müssen so gestaltet sein, dass sie problemlos mit dem Finger angeklickt werden können.

Hier ein Beispiel der Buttonreihe für die Markenauswahl, die verbessert werden sollte (Die Buttons können mit den Fingern nur sehr schwer ausgewählt werden)

Dieses Beispiel zeigt ebenfalls die Markenauswahl eines anderen Shops, wo die Buchstaben problemlos mit den Fingern auf dem Handy ausgewählt werden können.

2. Lesbarkeit

Ein weiterer wichtiger Aspekt ist de problemlose Lesbarkeit. Die Schrift muss so gross sein, dass auch die ältere Generation sie ohne zoomen lesen kann. Auch sollte ein gewisser Randabstand vorhanden sein und auf keinen Fall Blocksatz verwendet werden.

Schlecht lesbar (Blocksatz fürt zu riesigen Lücken, sehr dünne Schrift, Abstand zu den Überschriften zu gering)

Hier wurde die Lesbarkeit deutlich optimiert.

Artikel-Container

Vielmals kommt es vor, dass Artikel-Container in einigen Shops noch eine Nachbesserung nötig haben. Hier 2 Beispiele, die noch optimiert werden sollten:

Container werden abgeschnitten. Schrift ist schwer lesbar. Umrandung zu dünn.

Die Artikel-Container sind hier schon ganz gut. Lediglich die Sterne überdecken teilweise den Text. Die Artikelabgrenzungen sind durch einen Schatten deutlich.

Bitte prüfen Sie Ihren Shop auf dem Handy ob zumindest die aufgeführten Punkte in Ordnung sind. Denn es wäre doch ärgerlich, wenn Sie durch ein unschönes Design Kunden verlieren bzw. keine neue Kunden gewinnen könnten.

3. Usability und Optimierungen

Auch der Artikel,- Kassen- und der komplette SSL -Bereich sollte überprüft werden. Nur so lassen sich Stolpersteine aufspüren, die u.U. dazu führen, dass Kunden ihren Einkauf fustriert abbrechen.

Bei Interesse überprüfe ich gerne Ihren Shop, baue Ihre Wunsch-Banner und führe alle Optimierungsarbeiten durch. Meine Kontaktdaten finden Sie weiter unten.

Powergap Shop Referenzen

Spirituosen-Superbillig.com | Hausschuh.com | Haflingerversand.de | Hausschuhexperte.de | German-Slippers.com | AS-Torantriebe.de | Schaumstoffnachmass.ch | Gummistiefelprofi.de | Barfish.de | Grappa.de | Obstler.de | Unterthurner.de | Shop.Underberg.de | Lightkontor.de | Riemax.de | u.v.w.

Für weitere Informationen können Sie mich jederzeit über die E-Mail fs@powergap.de bzw. info@frasche.de sowie im Internet unter www.frasche.de erreichen.
Gerne auch telefonisch mit einen kostenlosen Anruf über WhatsApp unter +66 8100 27805.
Frank Scheuber