Mobile First Only?
Mobile First Only? – websiteboosting.com
Mobile First und Mobile Only sind seit Jahren Schlagworte, die die Erstellung, Pflege und Optimierung von Websites ständig begleiten. Seit Google im April 2015 den „Mobile Friendly“-Rankingfaktor ausrief, hat sich viel getan. Die mobile Welt ist längst Realität, doch einige Mobile-Friendly-Probleme sind auch heute noch aktuell und neue Probleme wie die Cookie-Hinweise, Consent-Tools und die Core Web Vitals sind dazugekommen. Eine neue Mobile-Studie zeigt die häufigsten Probleme und die passenden Lösungswege auf.
Mobile Endgeräte sind heute nicht nur weit verbreitet, sie dominieren unseren Alltag. Immer mehr Websites bieten gezielte Lösungen für mobile Geräte. Und was 2015 vielleicht noch nicht vorstellbar war, ist heute Realität. Über Smartphones werden immer mehr Vorgänge abgewickelt. Das bedeutet aber nicht, dass der Desktop verschwinden wird. Laptops sind heute üblicher geworden und Tablets haben ihre Nische gefunden. War es das?
Nein, denn es gibt seitdem immer wieder neue Herausforderungen. Die neuen Core Web Vitals wurden in Heft 68 ausführlich erörtert, daher wird an dieser Stelle auf diesen Artikel verwiesen. In der aktuellen Studie hat sich aber gezeigt, dass einige typische Probleme auch heute noch bestehen. Bei einer Analyse der Top-500-Websites und einiger weiterer Sonderfälle überraschten große Websites mit altbekannten Fehlern, während Amazon wieder mit neuen Ansätzen einen Blick in die Zukunft zeigt. Die Ergebnisse der neuen Studie wurden mit einer Mobile-Studie aus 2016 verglichen. Konkrete Beispiele helfen zu verstehen, wie man alle diese Probleme vermeidet.
Der Desktop lebt!
Im Jahr 2015 hat Google verkündet: Zum ersten Mal wurden mehr mobile Anfragen gestellt als auf dem Desktop. Auf vielen Websites liegt der Anteil der mobilen Besucher über 50 %. In Deutschland zeigt sich aber laut statcounter: Mobile hat den Desktop nie überholt! Und der Tablet-Anteil ist nach einem ersten Hype wieder zurückgegangen.
Weltweit liegt der mobile Traffic laut statcounter tatsächlich über 50 %. Allerdings sollte man für die eigene Website die Gerätenutzung der Besucher ermitteln. Wer dabei Nutzer oder Besuche heranzieht, erhält unterschiedliche Zahlen. Auch die Chrome-User-Experience-Daten (CrUX) von Google ergeben oftmals andere Werte. Die Ursache liegt einfach darin, wie gemessen wird, was man auswertet und ob alle Seitenaufrufe auch erfasst werden. Bei Tools wie Google Analytics können Besucher, die schnell eine Seite wieder verlassen, möglicherweise nicht erfasst werden und fehlen in den Daten.
Da der Desktop in der Regel deutlich höhere Conversion-Raten hat, darf man ihn auf keinen Fall vernachlässigen. Mobile Only wird zwar irgendwann der Google-Index sein, aber Geld verdienen die meisten Websites mit ihren Nutzern. Und gute Nutzererfahrung ist gut für das Ranking, daher Vorsicht bei der Konzeption und beim Relaunch von Websites. Der Mobile-First-Ansatz bei der Gestaltung von Websites ist sicher nicht verkehrt, er ermöglicht aber nicht den Verzicht auf Gestaltung und Testen der anderen Bildschirmgrößen.
Verluste durch das Cookie-Problem
In einer Analyse der Auswirkungen des Consent-Usercentrics-Tools wurde bei einem Shop ein absoluter Umsatzverlust von 3,5 % gemessen. (Quelle: einfach.st/cprm6). Und auch wenn sich die Nutzer zunehmend an Cookie-Hinweise gewöhnen, sind die Auswirkungen durch die schlechtere Ladezeit nach wie vor je nach System deutlich zu spüren. Bei einer Auswahl eines Systems sollte man die Auswirkungen vorab prüfen. Manche Lösungen sind deutlich schneller als andere. In der Regel sind Lösungen auf dem eigenen Server deutlich überlegen.
Für die Core Web Vitals erzeugen die Cookie-Lösungen so gut wie immer einen neuen LCP-Zeitpunkt und damit deutlich schlechtere Core-Web-Vitals-Kennzahlen als ohne Cookie-Lösung. Daher sollte man bei der Wahl nicht nur die Funktion und Bedienbarkeit bewerten, sondern auch die Verschlechterung der Ladezeit. In fast allen Fällen führt ein langsamer Server oder gar ein Ausfall des Anbieters dazu, dass Ihre Website gar nicht lädt oder eben entsprechend langsam.
Überlagerte Elemente
Was in der ersten Mobile-Studie 2016 bei Kickstarter ein Problem war, zeigt sich auch fünf Jahre später.
Kickstarter hat zwar im Vergleich zu 2016 seine Navigation geändert, aber nach wie vor werden ähnliche Fehler gemacht. Je nach Bildschirmbreite werden Elemente der Navigation abgeschnitten. Im Bild sieht man die englische Website. Auf der deutschen Website sind die einzelnen Menüpunkte deutlich länger (aus „Food & Craft“ wird „Gastronomie & Kunsthandwerk“). Und Übersetzungen führen manchmal zu Problemen, die auf der primären Sprachvariante nicht gesehen werden. Bei internationalen Websites muss man ein wachsames Auge darauf haben, da sich beispielsweise die Breite der Navigationselemente nicht optimal an deutlich längere Texte anpasst.
Man kommt nicht umhin, die Website auf typischen Seiten in voller Breite bis hin zu kleinsten mobilen Geräten systematisch zu testen. Auch das Testen auf vielen Endgeräten, wie automatisiert durch Browserstack möglich, deckt nicht selten unerwartete Probleme auf. In einem Fall war die Darstellung exakt beim Übergang von zwei Varianten (Umbruch Desktop zu Tablet), also nur bei genau einer bestimmten Pixelbreite, völlig zerschossen. Da es aber genau die Breite einer populären iPad-Pro-Version war, fiel es dann doch auf. Die Absprungraten waren bei diesem Gerät natürlich extrem hoch.
Der Sonderfall zajac.de
Die Website zajac.de ist ein besonderer Fall, denn sie hat viel Traffic, ist aber nicht mobilfähig. Kann so eine Seite noch gute Platzierungen für generische Begriffe erzielen?
Schaut man sich die Sichtbarkeit von Desktop und Mobil im Vergleich an, erkennt man deutlich, dass sich die Sichtbarkeitsverläufe genau zum Zeitpunkt 1 im Februar 2017 im Bild 3 anglichen. Zu diesem Zeitpunkt gab es ein unbekanntes weltweites Update bei Google, was aber vermutlich mit dem Thema Mobile zu tun hatte. Von da an ist der Verlauf von Desktop und Mobil identisch.
Der letzte große Relaunch der Website war ebenfalls Anfang 2017 und fällt also mit diesem unbekannten Update bei Google zusammen. Zajac baute damals im Shop die Aquaristik aus mit dem Verkauf von Fischen, und die Aquaristik trieb die Sichtbarkeit des Shops nach oben bis zum April 2019. Danach ging es nur noch bergab und viele generische Begriffe fielen in den Rankings deutlich. Google macht also zunehmend ernst und die Mobilfähigkeit von Websites ist heute keine Option mehr.
Usability-Schub
Die Studie zeigt auch, dass das Thema User Experience heute sehr viel besser umgesetzt wird. Keine der Top-500-Websites weltweit setzt noch Captchas von Drittanbietern ein, egal welche Version. In wenigen Fällen sind sie noch für Log-ins und Registrierungen zu sehen. Dann sind es aber Lösungen, die von der Website selbst geladen werden.
Captchas sind wie ein „Du kommst hier nicht rein“-Türsteher, der das Spam-Problem auf Nutzer abwälzt. Nutzer mögen diese aber nicht, auf Smartphones können sie zu einer Zumutung werden. Abgesehen davon, dass Captcha-Lösungen wie reCAPTCHA von Google ein Datenschutzproblem sind, dienen sie vor allem der Abschreckung von Besuchern. Dabei gibt es deutlich bessere Lösungen, die dem Besucher weniger Hürden in den Weg legen, wie SVG-Captchas und Technologien, die im Backend laufen und Spam zuverlässig erkennen. Wenn Ihre Website noch Captchas einsetzt, sollten Sie diese jetzt verbannen.
Personalisierte Usability
Amazon ist bei den Analysen in der Studie aufgefallen, da sich die Usability der Website offensichtlich an die Nutzer anpasst. Eine personalisierte Usability ist neu, aber nützlich. Dass auf einigen Websites ein „Anstupsen“ von Elementen den Nutzer zur Interaktion animieren soll, wird vermutlich noch häufiger zu finden sein. Dass sich dies aber an die Nutzung durch die Besucher anpasst, zeigt ganz neue Möglichkeiten.
Bild 4 zeigt, wie Pfeile an Slidern nicht zu sehen sind, wenn eingeloggte Nutzer bei Amazon solche Slider häufig nutzen. Allerdings muss man darauf hinweisen, dass Amazon schon in der ersten Mobile-Studie ein Meister darin war, dem Nutzer klar zu zeigen, wenn es weitere Inhalte gibt. Auch heute ragen oft weitere Elemente in der mobilen Ansicht so in den sichtbaren Bereich hinein, dass der Nutzer sofort versteht: Hier gibt es noch mehr.
Weitere Beispiele sind auf einer Unterseite mit Videos zur Mobile-Studie unter einfach.st/cprm7 bereitgestellt. Dort finden Sie auch ein abschreckendes Beispiel für ein reCAPTCHA.
Das Daumen-Problem
Herausgestellt hat sich auch, dass das „Daumen-Problem“ heute deutlich besser gelöst ist. Mehr Websites machen Elemente groß genug, sodass man diese mit dem Daumen ohne Probleme antippen kann. Der bekannte Doppelpfeil für einen Klick zurück nach oben ist unten auf den Seiten zwar immer noch häufig zu weit rechts positioniert, um diesen bequem anklicken zu können. Einige große Websites wie z. B. Amazon verzichten komplett auf diesen Button. Möglicherweise hat dieser auch bald ausgedient, vor allem, wenn er kaum genutzt wird (was man messen kann).
Bedenken Sie bitte: Nutzer verwenden ihr Smartphone in der Regel einhändig und sollten mit der Seite möglichst mit einer Hand interagieren können. Die Positionierung von Buttons und Links ist daher nicht an den Rändern vorzunehmen. Schließlich müssen auch Linkshänder berücksichtigt werden, für die Bild 6 dann gespiegelt zu verstehen ist. Ein typisches Beispiel ist die Paginierung in Shops. Die Buttons sollten nicht am Rand kleben, da der Nutzer dadurch gezwungen wird, die Seite mit beiden Händen zu bedienen. Das erzeugt Frust und mehr Absprünge auf der Website.
Responsive dominiert
Wie zu erwarten, hat sich das responsive Design durchgesetzt. Bei den Top-500-Websites gibt es keine mehr, die nicht mobilfähig ist. Die Bereitstellung per dynamischem Quellcode (Vary Header wie bei Amazon) oder alternativen URLS (wie bei Aliexpress) ist deutlich zurückgegangen.
Letztlich ist die eingesetzte Technologie egal, responsive ist vom Aufwand her aber die günstigste Variante und findet heute eine breite Unterstützung. Was oft missverstanden wird: CMS- oder Shopsysteme können nicht unbedingt wegen responsiver Templates auch automatisch passende Bilder in verschiedenen Größen, passend zu den Templates, erzeugen. Ein funktionierender Weg ist, für jedes Bild automatisch eine Liste an unterschiedlichen Größen zu erzeugen und diese einzubinden. Der Browser pickt sich dann selbst das passende Bild heraus.
Die vollständige Studie mit weiteren Problemen und Beispielen können Sie unter einfach.st/mobfirst abrufen.
