Sie 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.
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.
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?
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.