Impressum / Datenschutz
Alexander Legge

Verbessern Sie die mobile Darstellung Ihres Shops mit kleinen Kniffen

Alexander Legge | 21.01.2015 | Usability

Responsive WebdesignSie haben die Chance erkannt, die mobil-optimierte Onlineshops haben aber befinden sich gerade erst am Anfang der Reise? Wir geben Ihnen kleine Tricks an die Hand, mit denen Sie Ihren Onlineshop in der Regel mit wenigen Kniffen besser auf Mobilgeräten aussehen lassen.

Das Aufsetzen eines responsive Online-Shops erfordert mehr als nur technische Anpassungen. Sicherlich kann man eine bessere Darstellung von Inhalten erreichen indem man Elemente ein- und ausblendet. Responsive Design ist jedoch mehr als das. Es beinhaltet die komplette Idee und erfordert eine gnadenlose Analyse jeder einzelnen Seite im Online-Shop. Eine komplette mobile Strategie braucht allerdings Zeit.

Das können Sie schnell und unkompliziert anpassen

Den richtigen Viewport wählen

Die erste Anpassungsmöglichkeit ist recht simpel und über einen kurzen HTML-Tag erledigt:

<meta name="viewport" content="width=1024, user-scalable=yes">

Der Viewport bezeichnet die Anziegebreite und -höhe des Browsers. Mobile Browser wie der des iPhones nutzen diese Anweisung um Websites skaliert anzuzeigen. Man kann diesen HTML-Tag also gezielt einsetzen damit die Website beim Laden komplett angezeigt wird. Standardmäßig ist der Viewport auf 980px gestellt. Ist Ihre Website allerdings breiter sollten Sie sicherstellen, dass Sie dem Browser die Breite über diesen Tag auch mitteilen.

Beachten Sie den Viewport für Desktop-Shops richtig zu setzen.

Wichtig: Den fixen Viewport sollten Sie nur dann verwenden, wenn Sie keine für mobile Endgeräte optimierte Seite anbieten. Haben Sie einen mobil-optimierten Shop orientieren Sie sich womöglich besser an der für diese Websites üblichen Notation:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

So teilen Sie dem Browser mit, dass er die zur Verfügung stehende Breite des Browsers komplett für die nutzen soll. „user-scalable“ gibt an, ob der Nutzer z.B. mittels Touch-Geste die Website auf seinem mobilen Endgerät vergrößern kann oder nicht.

Schriftendarstellung optimieren

Besonders der mobile Safari, also der Standardbrowser von iPhone und iPad versuchen aus einer Website das Optimum herauszuholen. Das kann allerdings ungewollte Nebeneffekte haben. Normalerweise wird eine Website so dargestellt, dass möglichst viel ohne scrollen dargestellt werden kann. Hin und wieder kommt es vor, dass der Browser gleichzeitig die Schriften so groß darstellen möchte, dass Sie das Design buchstäblich zerschießen. Weitere Infos dazu finden alle technik-interessierten bei praegnanz.de. Um die Schrift korrekt darzustellen, fügen Sie einfach diese Zeile in ihrer Stylesheet-Datei (.css) hinzu:

html {-webkit-text-size-adjust:none}

Selbstverständlich können Sie die Vergrößerung des Texts auch nur bei bestimmten Elementen verhindern.

Telefonnummern klickbar machen

Mobile Browser versuchen meist eigenständig herauszufinden, wenn auf einer Website eine Telefonnummer dargestellt wird und machen diese klickbar. Dann können Ihre Nutzer direkt auf die Nummer klicken um zum Beispiel Ihren Vertrieb oder Kundenservice zu erreichen. Dieses System ist allerdings bei weitem nicht perfekt. Häufig werden Telefonnummer in der Form „+49 (0) 221 123 456 78“ angegeben. Ein Browser wird damit Probleme haben und nicht die eigentliche Telefonnummer „+4922112345678“ erkennen. Dieses Problem können Sie einfach umgehen indem Sie bespielweise um Ihre Telefonnummer einen Link setzen:

<a href="tel:+4922112345678">+49 (0)221 123 456 78</a>

Eine kleine Änderung die Ihren Nutzern viel Aufwand erspart, wenn sie Sie telefonisch erreichen möchten. Besonders für Angaben im Impressum bietet sich eine solche Darstellung an.

Verkleinern Sie Ihre Bilder

Besonders, wenn Ihr Onlineshops mit großzügigen Bildern und Grafiken arbeitet, ist es sehr sinnvoll diese in der Dateigröße möglichst klein zu halten. Nutzen Sie Webdienste wie TinyJPG oder TinyPNG um Dateien zu verkleinern.

Komprimieren Sie Ihre Bilder und Grafiken für eine bessere mobile Performance

Ein Test in einem zufällig gewählten Onlineshop hat ergeben: Im Schnitt könnten knapp 60% der Dateigröße bei Produktgrafiken ohne Qualitätsverlust gespart werden.

Verlieren Sie nicht den Anschluss.

Kleine Anpassungen an Ihrem bestehenden Online-Shop geben Ihnen die Luft sich intensiver Gedanken über die mobile Strategie für Ihren Shop zu machen. Wägen Sie für sich ab, welche Lösung am Besten zu Ihnen passt: Mobile Website, responsive Site oder gar eine App?

3 Reaktionen zu “Verbessern Sie die mobile Darstellung Ihres Shops mit kleinen Kniffen”

  1. Dominik

    Eine schöne Zusammenfassung. Gerade die Telefonnummernverlinkung fehlt noch in vielen Onlineshops oder sind fehlerhaft eingebaut. Auch iOS, Android und Co erkennen nicht alle in der weiten Welt gültigen Formate und können diese fernab der manuell gesetzten Verlinkung korrekt wählen.

  2. iBeacon, Kitchen Stories, Wirecard.

    […] Mobile Commerce kann so einfach sein: Shopbetreiber können ihre Online-Shops nämlich mit wenigen Kniffen für Mobilgeräte optimieren. Durch ein paar Änderungen im Code werden Schriften, Telefonnummern und Bilder optimal auf dem Smartphone dargestellt. shopbetreiber.de […]

  3. Links der Woche: Steuerfalle Internethandel – die 5 wichtigsten Steuerfallen,die meistgesuchten Brands des Jahres » Take-me-to-auction

    […] Verbessern Sie die mobile Darstellung Ihres Shops mit kleinen Kniffen Via: Shopbetreiber-Blog […]

Einen Kommentar schreiben




1 von 11

Archiv

  • Juni 2016
  • Mai 2016
  • April 2016
  • März 2016
  • Februar 2016
  • Januar 2016
  • Dezember 2015
  • November 2015
  • © 2011 Trusted Shops GmbH | Powered by WordPress