Technisch mobile-friendly optimal verkaufen

Kevin Jackowski
| 29.04.2015

Durch den technischen Fortschritt und die Möglichkeit heutzutage bequem mit dem Smartphone im Internet zu surfen, steigt bereits seit einigen Jahren die Anzahl der mobilen Zugriffe auf Websites und Online-Shops stetig an. Diese Entwicklung ist auch den Suchmaschinenbetreibern nicht entgangen, daher unterstützt Google bereits seit einigen Jahren Webmaster dabei ihre Internetpräsenz mobile-freundlicher zu gestalten. Seit dem 21.04.2015 hat Google nun das „mobile-friendly Update“ ausgerollt, doch diese Entwicklung kommt alles andere als überraschend. Bereits im Juni 2013 hat Google Webmaster auf schwerwiegende Fehler und Probleme bei mobilen Zugriffen auf die eigene Internetpräsenz hingewiesen und die Zeitabstände dieser Hilfestellungen zum Thema „Mobile Optimierung“ sind in den letzten Monaten immer kürzer geworden.

So wurden bereits im August 2013 die Ladezeiten auf mobilen Seiten thematisiert und im Dezember 2013 die Google Webmaster Tools Funktionen dahingehend erweitert, dass Webmaster nun Crawling-Fehler und Probleme auf ihren mobilen Websites bzw. Online-Shops leichter analysieren können. Mit diesen Schritten sollten Webmaster an das in Zukunft wichtige Thema „Mobile-Friendly“ herangeführt werden. Um diese Entwicklung noch transparenter zu machen, haben Webmaster Ende 2013 von Google noch eine Checkliste für die Mobile-Optimierung erhalten und auch die Webmaster Tools wurden knapp ein Jahr später im November 2014 noch weiter angepasst, sodass nun die Erstellung von „Mobile Usability Reports“ möglich ist.

Zudem wurde für Webmaster, die sich nicht sicher sind, ob ihre Website mobil optimal dargestellt wird, das „Mobile-Friendly-Testing Tool“ entwickelt, sodass die eigene Internetpräsenz sogar direkt getestet werden kann. Um diese technische Entwicklung noch intensiver zu verdeutlichen, wurden sogar Ende 2014 die Suchergebnisse dahingehend angepasst, dass User direkt im Snippet einen Hinweis erhalten, ob die hinter diesem Snippet gelistete Website für mobile Endgeräte optimiert ist. So können sich User noch in den Suchergebnissen entscheiden, ob sie bei spielsweise per Smartphone eine Website besuchen möchten, die nicht mobile-optimiert ist. Über zwei Jahre lang hat Google Webmastern die Möglichkeit gegeben sich der Mobile-Entwicklung anzupassen und geht nun mit dem neuen „mobile-friendly-Update“ den letzten Schritt in Richtung „verbesserte Qualität für Nutzer mobiler Endgeräte“.

Doch was genau bedeutet eigentlich mobile optimiert?

Google unterscheidet insgesamt in vier verschiedene Geräteklassen:

  • Mobilgerät (sind größtenteils in der Lage HTML5 Spezifikation zu rendern)
  • Tablets (durch die vergrößerte Darstellung eher „desktopähnlich“)
  • Multimedia Telefone (sind nicht in der Lage alle HTML5 Standards zu erfüllen)
  • Feature Phones (sind nicht in der Lage HTML zu rendern)

Wenn von „Mobilgeräten“ bei der Mobile-Optimierung die Rede ist, dann bezieht sich diese Aussage somit meist nicht auf Tablets, sondern eher auf Smartphones. Quelle: Interessant für alle Webmaster und SEOs ist noch mal festzuhalten, dass Google für Smartphones keinen mobilen Index führt, sondern dass die „mobile-friendly Version“ in dem bereits vorhandenen Index integriert ist. Während es in der Vergangenheit noch einen separaten Index für Feature-Phones Content gab, wird der Smartphone Content in den normalem Index integriert.

Welche Möglichkeiten gibt es Websites und Online-Shops mobile zu optimieren?

Insgesamt gibt es aus technischer Sicht drei Möglichkeiten, wie die Inhalte mobile-freundlich dargestellt werden können:

Responsive Design

Wer besonders viel Wert auf die Empfehlung seitens Google zum Thema „Mobile-Optimierung“ legt, der sollte sich für die Responsive-Lösung entscheiden. Diese Mobile-Variante ist die von Google präferierte Version und bietet auch dem Webmaster mehrere Vorteile. Die beiden größten Vorteile bestehen wahrscheinlich darin, dass die URLs und der HTML Code gleich bleiben und lediglich die Inhalte an die Bildschirmgröße des jeweiligen Endgeräts angepasst werden. Ein Nachteil der Responsive-Lösung stellt allerdings die meist darunter leidende Performance dar.

Vorteile:

  • URLs und HTML Code bleiben gleich
  • Es werden keine Weiterleitungen benötigt
  • Es wird im Gegensatz zu den anderen Möglichkeiten Crawling Budget gespart
  • Keine Index-Probleme durch „mobilen Content“

Nachteile:

  • Ladezeiten können sich zum Teil erheblich erhöhen
  • Sehr aufwändig bestehende Websites und Online Shops responsive zu gestalten

Dynamic Serving

Bei der dynamischen Bereitstellung kommt es auf den User-Agent an. Anhand des User-Agents wird ermittelt, welcher CSS- und HTML Code vom Server übermittelt werden soll. Dadurch, dass die Inhalte allerdings je nach User-Agent anders ausgeliefert werden, sollte den Desktop-User Agents beim Crawling unbedingt ein Hinweis gegeben werden, dass auch eine mobile Version der Inhalte vorhanden ist. Mithilfe der Angabe des Vary-Http-Headers ist dies möglich.

Vorteile:

  • Nur eine URL trotz mehrerer Versionen
  • Teilweise leichter umzusetzen als die responsive Lösung

Nachteile:

  • URLs müssen ein weiteres Mal gecrawlt werden
  • Eher fehleranfällig, da User-Agent-basiert
  • Suchmaschinencrawlern muss unbedingt mitgeteilt werden, dass die Inhalte User-Agent basiert ausgeliefert werden und sich somit auch unterscheiden können (Vary-Http-Header)

Unterschiedliche URLs z.b: Subdomain

Bei dieser Mobile-Lösung werden sowohl unterschiedliche URLs, als auch unterschiedliche HTML Codes genutzt. Häufig wird eine Subdomain wie beispielsweise m.dasisteinebeispielseite.de genutzt und bei entsprechendem Mobile-User-Agent auf diese Version verwiesen. Sollte diese Lösung genutzt werden, dann sollte vor allem darauf geachtet werden, dass doppelte Inhalte vermieden werden. Hierzu müssen den Suchmaschinencrawlern im Quelltext ein Hinweis gegeben werden, dass noch eine alternative Version der Website bzw. des Dokuments vorhanden ist. Auch auf dem alternativen Dokument müssen die Crawler den Hinweis finden, wo sich die „Originalversion“ des Dokuments unter einer anderen URL befindet.

Beispiel:

Die Desktopversion zeigt den Crawlern mit dem „rel=alternate“ Tag an, dass eine Mobile-Version des Dokuments vorhanden ist.

Die Mobile-Version zeigt den Crawlern mit dem „rel=canonical“ Tag an, unter welcher URL die Originalversion vorhanden ist. Dadurch, dass die Mobile-Version mit dem Canonical-Tag auf die Originalversion verweist, wird die Mobile-Version nicht in den Index aufgenommen. Somit kommt es zu keinem „Duplicate Content“ Problem.

Vorteile:

  • Ladezeiten teilweise erheblich kürzer als bei der Responsive-Lösung
  • User sind bereits an die mobile Subdomain-Version gewöhnt:
    z.B: m.youtube.com
  • Technische Umsetzung meist einfacher als bei Responsive-Lösung

Nachteile:

  • Identifizierung des User-Agents häufig fehleranfällig
  • Es werden mehr Crawling-Ressourcen benötigt
  • Bei falscher Auszeichnung entsteht „Duplicate Content“ Problem

Mobile Conversion-Optimierung – Was sollten Online-Shop Betreiber beachten?

Das Surfverhalten auf dem Smartphone unterscheidet sich von dem auf dem Desktop erheblich, daher sollten Online-Shop Betreiber bei der Mobile-Optimierung einiges beachten. Hier finden Online Shop-Betreiber acht erhebliche Unterschiede, die bei der Umsetzung der Mobile-Strategie beachtet werden müssen:

Die kürzere Aufmerksamkeitsspanne

Wer mit dem Smartphone unterwegs ist und trotzdem einen Online-Shop besucht, der möchte in sehr kurzer Zeit genau das finden, was er sucht. Dadurch, dass Smartphones meist genutzt werden um Wartezeit zu überbrücken (z.B. in Bus, Bahn, oder auch während der Werbepausen) oder auch um kurzfristig etwas zu recherchieren, gilt es als Online-Shop Betreiber die eigenen Online-Shop Inhalte so zur Verfügung zu stellen, dass User sehr schnell genau das Produkt finden können, welches sie auch wirklich suchen. Je länger und je umständlicher diese Suche ausfallen muss, desto höher ist die Wahrscheinlichkeit, dass der User den Online-Shop wieder verlässt ohne etwas zu kaufen. Die Chance, dass der User abgelenkt wird bzw. den eigentlichen Kaufprozess unterbricht ist sehr hoch, daher ist es wichtig nur die wichtigsten Elemente zur Verfügung zu stellen, sodass Zeit gespart wird und in einem kurzen Zeitraum eine Conversion ausgeführt werden kann.

Die Ungeduld überwiegt

Lange Ladezeiten sind meist immer mit Problemen verbunden, vor allem in den Disziplinen Suchmaschinenoptimierung und Conversion-Optimierung. User, die mit dem Smartphone einen Online-Shop besuchen, sind allerdings noch ungeduldiger als die Desktop-Nutzer und auch die springen bei langen Ladezeiten sehr schnell ab und schauen sich nach Alternativen um. Dadurch, dass nicht jeder Smartphone-Nutzer auch über schnelles Internet verfügt, spielen Ladezeiten eine große Rolle bei Userzufriedenheit. Wenn der Aufbau einer Produktdetailseite zu lange dauert, oder das Bestellformular nicht schnell genug lädt, dann wird der User diesen Kaufprozess abbrechen und dem Online-Shop Betreiber entgeht relevanter Umsatz. Aus diesem Grund ist es wichtig, dass die Ladezeiten so gering wie möglich ausfallen, sodass User, die nur über langsamere Internetverbindungen verfügen, bestmöglich den eigenen Online-Shop besuchen können.

Orientierungslosigkeit erschwert den Online-Kauf

User, die zum ersten Mal den eigenen Online-Shop besuchen, wissen nicht, wo sich relevante Elemente wie beispielsweise der Warenkorb, die interne Suche oder der Kaufen-Button befinden. Dadurch, dass die Aufmerksamkeitsspanne sehr kurz ist und teilweise sogar schon Ladezeiten den eigentlichen Kaufprozess erschweren, führen Unübersichtlichkeit und Darstellungsprobleme dazu, dass keine Conversion ausgeführt wird. Online-Shop Betreiber sollten darauf achten, dass User in sehr kurzer Zeit die wichtigen Conversion-Elemente finden und bedienen können. Dadurch, dass User, die diese Conversion-Elemente suchen auch wirklich eine Kaufintention besitzen, sollte vor allem auch dieser Optimierung bei der Umsetzung der Mobile-Strategie in den Fokus rücken.

Schwer bedienbare Elemente

Angenommen der eigene Online-Shop ist sehr performant und übersichtlich, dann können immer noch schwer bedienbare Elemente die Conversion verhindern. Während auf dem Desktop einfach und gezielt mit der Maus navigiert werden kann, ist es auf dem Smartphone meist wesentlich anspruchsvoller genau die Elemente anzuwählen, die auch wirklich ausgewählt werden sollen. Aus diesem Grund ist es wichtig den Abstand zwischen den einzelnen Elementen groß genug zu halten, sodass per Touch-Klick nicht aus Versehen in der Nähe befindliche Elemente geklickt werden können.

Die Lesbarkeit als Herausforderung

Ob Produktbeschreibung, oder Produktrezensionen, auf der Produktdetailseite ist in den meisten Fällen der Textanteil sehr hoch. User wollen sich über das Produkt bestmöglich informieren, daher ist es wichtig, dass der Text auch wirklich leicht lesbar ist. Text, der nicht korrekt dargestellt werden kann, oder nur schwer lesbar ist, verschlechtert das Kauferlebnis erheblich und kann dafür sorgen, dass der Kaufprozess abgebrochen wird. Als Online-Shop Betreiber sollte daher ausführlich getestet werden, ob der Text auch auf jedem mobilen Endgerät optimal und lesbar dargestellt wird. Zudem sollte auch die Textmenge beachtet werden. Während bei Desktop-Version mehr Text dargestellt werden kann, sollte auf der mobilen Version nur der wirklich essentielle Text dargestellt werden.

Ein negatives Kauferlebnis bleibt stärker in Erinnerung

Während auf dem Desktop eher mal aus Langeweile gesurft wird, wird auf dem Smartphone häufiger gesurft, wenn es schnell gehen muss. Wenn nun der eigene Online-Shop aus Sicht des Users mobile nicht optimal performt, dann wird dieses negative Erlebnis stärker in Erinnerung bleiben, als wenn auf dem Desktop etwas nicht zur vollsten Zufriedenheit stattfindet. Da das Surfen auf dem Smartphone mühsamer ist als das Surfen auf dem Desktop, fällt die „Enttäuschung“ schwerer aus, sodass zumindest in Zukunft die mobile Version des Online-Shop eher gemieden wird.

Anpassung der E-Mails

Jede E-Mail sollte sowohl auf dem Desktop, als auch auf dem Smartphone optimal lesbar sein. Bei den E-Mails, die durch den mobilen Online-Shop ausgelöst werden, gibt es allerdings ein paar Besonderheiten zu beachten. Die Optimierung dieser E-Mails ist besonders wichtig, da diese ausschlaggebend sein können, ob eine Conversion ausgeführt wird, oder nicht. Damit diese E-Mails auch möglichst schnell auf den mobilen Endgeräten empfangen werden können, sollte auf unnötige Signaturen, Bilder und andere Elemente verzichtet werden, sodass diese schneller verschickt und empfangen werden können.

Auswahlmöglichkeiten statt Eingaben

Während bei der Desktop-Version Formulare dahingehend optimiert werden sollten, dass nur die relevantesten Eingaben getätigt werden müssen, sollten in der mobilen Version Auswahlmöglichkeiten genutzt werden. Je häufiger der User auf der Tastatur eine Eingabe machen muss, umso höher die Chance, dass sich dieser vertippt, die Eingabe falsch abgeschickt wird, eine Fehler auftritt und die Seite neu geladen werden muss. Dieser Prozess kostet dem User Zeit und genau das sorgt schnell für Unzufriedenheit. Aus diesem Grund sollten Auswahlmöglichkeiten genutzt werden, die sehr einfach per Smartphone angewählt werden können. Je einfacher es der User hat und je weniger dieser auf der kleinen Tastatur eingeben muss, desto mehr Zeit wird er in dem eigenen Online-Shop verbringen.

Author

Kevin Jackowski
Kevin Jackowski ist Online Marketing Experte und kann mittlerweile auf über 12 Jahre Online Marketing Erfahrungen zurückblicken. Er entwickelt zusammen mit z.T. internationalen Unternehmen nachhaltige und ganzheitliche Online Marketing Strategien, hält eigene SEO Seminare und veröffentlicht regelmäßig Fachartikel rund um das Thema "Strategisches Online Marketing".