Setze User Experience-Standards mit unseren 3 neuen “Mobile UX-Reports”!

Inhaltsverzeichnis

• Rahmenbedingungen

• Die Ryte Reports

• Fehlender Viewport-Tag

• Sich überlagernde Touch-Elemente

• Nicht lesbarer Text

• Hilfestellung und Tipps

Die Rahmenbedingungen

Die Optimierung für Mobilgeräte zählt zu den wichtigsten Aspekten jeder Onlinepräsenz. In vielen Ländern gibt es heute mehr Smartphones als PCs. So suchen z.B. in den USA bereits 94% der Personen mit Smartphones nach Informationen im Netz. 77% der mobilen Suchen finden zu Hause oder im Büro statt - obwohl vermutlich ein Computer in der Nähe steht. Und schon 49% aller Personen surfen grundsätzlich mobil durch das Netz (Quelle). Diese Zahlen zeigen, dass die Bedeutung der mobilen Optimierung für Unternehmen keine Kür sondern vielmehr eine klare Notwendigkeit für zufriedene User und höhere Conversion Rates ist.

In diesen Kontext passen auch zwei zentrale und aktuelle Google-Maßnahmen - der "Mobile Index" (März 2021) und das "Page Experience Signal" (Mai 2021). Der "Mobile Index" bedeutet nichts weniger als das Google nur noch die mobile Version einer Website in den Suchindex aufnimmt. Und das "Page Experience Signal" als Rankingfaktor beinhaltet u.a. den Faktor "Mobile Friendly" und die Core Web Vitals. Beide Maßnahmen machen es unabdingbar, die mobile Optimierung zur Chefsache zu erheben, um über den Mai 2021 hinaus in den Rankings bestehen zu können.

Die Ryte Reports

Die neuen Reports "Fehlender Viewport-Tag", "Sich überlagernde Touch-Elemente" und "Nicht lesbarer Text" finden sich in "Website Success" unter dem Reiter "Mobile" und zeigen Dir auf, inwieweit Deine mobile Website Fehler in der Darstellung auf Smartphones aufweist. Mit unseren Reports kannst Du dabei einfach und schnell Deine gesamte Domain überprüfen, existierende Fehler finden und mit dem Fixen der Probleme die mobile User Experience ohne großen Aufwand verbessern. Wichtig dabei ist, dass Du in der Ryte Suite ein mobiles Projekt anlegst oder einen mobile Crawl startest, damit auch entsprechende Daten im Report angezeigt werden können.

• Nutze eine standardisierte Datengrundlage: Unser Report basiert auf echten Google Daten aus Lighthouse (Googles Open Source Tool für Website Audits), was für Dich den Vorteil hat, dass nur Probleme angezeigt werden, die auch für Google und somit Dein Ranking Relevanz haben.

• Priorisierte Fehlerbehandlung: Stelle Dir auf Basis verschiedener Filter und in der Kombination mit Google Analytics-Daten eine priorisierte Liste zusammen – für gezieltes Arbeiten und Ressourcenschonung.

• Hilfestellung zur Fehlerbehebung: Unsere Reports beinhalten eine Erklärung, wie die Fehler behoben werden können. So kannst Du direkt tätig werden oder diese Informationen an einen Web Developer weitergeben.

Die URLs in den Reports sind grundsätzlich auf Basis des OPR (OnPageRank, der die Anzahl der internen Links berücksichtigt) sortiert. Du kannst jedoch jederzeit auch auf Basis von Google Analytics-Daten filtern, um Deine wichtigsten Seiten zu identifizieren und zu priorisieren.

Fehlender Viewport-Tag

Dieser Report zeigt Seiten mit einem fehlenden oder nicht korrekt gesetzten Viewport-Tag. Der Meta-Tag Viewport ist wichtig für eine korrekte responsive Darstellung einer Webseite auf mobilen Endgeräten. Fehlt er, nutzen die meisten mobilen Browser einen Standard-Viewport von 980px, also Desktop-Breite. Dies kann zu schlechter Lesbarkeit oder abgeschnittenen Inhalten aufgrund der fehlenden Bildschirmbreite auf dem Smartphone führen.

Um sicherzustellen, dass jede Seite einen korrekten Viewport-Tag aufweist, musst Du jeweils <meta name="viewport" content="width=device-width, initial-scale=1"> in den Header integrieren. Solltest Du keinen Bearbeitungszugriff auf Deine Seiten haben, setze Dich dringend mit einem Web Developer in Verbindung, um dieses Problem zu lösen.

Abbildung 1: Report: "Fehlender Viewport-Tag"

Sich überlagernde Touch-Elemente

Touch-Elemente bezeichnen die Bereiche einer Website, mit denen User auf Geräten mit Touch-Funktionalität (Smartphone oder Tablet) interagieren können. Dazu gehören z.B. Verlinkungen, Eingabefelder oder Bestätigungsboxen. Es ist wichtig, dass diese Touch-Ziele ausreichend groß und abgegrenzt voneinander erscheinen, um eine benutzerfreundliche und leicht zugängliche Website sicherzustellen.

Dieser Report zeigt Dir, auf welchen Seiten Deiner Website die Touch-Elemente zu eng beieinander liegen. Das heißt, diese Seiten beinhalten Elemente, die entweder kleiner als 48x48 px sind oder weniger als 8px auseinander liegen. Du kannst fehlerhafte Touch-Elemente fixen, indem Du die CSS-Eigenschaft "padding" auf mindestens 48dp sowie die Abstände zwischen einzelnen Touch-Elementen erhöhst. Es sollten mindestens 8px Abstand zwischen den Elementen liegen. Du kannst hier die CSS-Eigenschaft "margin" nutzen, um die Abstände zu vergrößern.

Liegen die Touch-Elemente aufgrund einer fehlenden Viewport-Konfiguration zu eng beisammen (wie z.B. in dem Report unten aufgeführt), musst Du jeweils <meta name="viewport" content="width=device-width, initial-scale=1"> in den Header jeder Seite integrieren.

Solltest Du nicht in der Lage sein, das "padding" über Dein CMS zu ändern, starte einen Download der Liste und teile diese mit einem Web Developer.

Abbildung 2: Report: "Sich überlagernde Touch-Elemente"

Nicht lesbarer Text

Der Report "Nicht lesbarer Text" beinhaltet Seiten auf denen 40% der Texte eine Schriftgröße kleiner als 12px aufweisen, was für das Lesen auf einem Smartphone als zu klein angesehen wird. Der Hintergrund ist hier, dass kleinere Schriftgrößen von den Usern einen "zoom in" (sprich das Vergrößern des Bildschirmausschnitts) verlangen, was sich wiederum negativ auf die Usability der mobilen Website auswirkt.

Dieses Problem kann beseitigt werden, indem Du die Schriftgrößen über Dein CSS (Cascading Style Sheets) überprüfst. Das Ziel muss sein, für mindestens 60% des Textes pro Seite eine Schriftgröße von mindestens 12px festzulegen. Solltest Du hier nicht selbst tätig werden können, ist auch dies eine Aufgabe, die Du einem Web Developer weitergeben solltest, damit die User Experience nicht unnötig leidet.

In unserem Report heben wir den entsprechenden "Selector"/Abschnitt rund um zu kleine Texte hervor, so dass Du feststellen kannst, wo genau das Problem liegt.

Abbildung 3: Report: "Nicht lesbarer Text"

Hilfestellung und Tipps

Solltest Du keine Daten im Report vorfinden, lege ein neues, mobiles Projekt an oder starte direkt einen mobile Crawl!

Wir empfehlen Dir, mit dem Report "Fehlender Viewport-Tag" zu starten. Hintergrund ist hier, dass die Reports "Sich überlagernde Touch-Elemente" und "Nicht lesbarer Text" immer auch URLs aufführen, die keinen Viewport-Tag aufweisen, da dies automatisch zu Problemen bzgl. zu eng beieinander liegenden Elementen und zu schlecht lesbaren Texten führt.

Du interessierst Dich für mehr Hintergrundinfos rund um die Reports? Dann schau Dir unser kostenloses Ryte Insights Webinar an.