Ungelöste Probleme mit der mobilen Benutzerfreundlichkeit können einen erheblichen Einfluss auf den Traffic deiner Webseite haben. Ein häufiges Problem, vor dem dich die Google Search Console warnen kann, ist der Fehler „Anklickbare Elemente liegen zu dicht beieinander“, was wahrscheinlich bedeutet, dass deine Webseite für mobile Nutzer kompliziert zu navigieren ist.
Mehr als 4,32 Milliarden Menschen greifen über ihre mobilen Geräte auf das Internet zu. Daher ist es wichtig, dass du den Fehler mit den klickbaren Elementen so schnell wie möglich behebst. Zum Glück gibt es mehrere Möglichkeiten, wie du deine Webseite mobilfreundlich gestalten kannst.
In diesem Artikel erklären wir dir, was es mit dem Problem „Anklickbare Elemente liegen zu dicht beieinander“ auf sich hat, warum es auftritt und wie du es mit drei Methoden beheben kannst. Wir erklären auch, was der Fehler „Inhalt breiter als der Bildschirm“ ist und wie du ihn beheben kannst.
Lass uns an die Arbeit gehen!
Was der „Anklickbare Elemente liegen zu dicht beieinander“ Fehler ist
In aller Kürze: Mobile Usability Fehler können deine WordPress Seite unzugänglich machen und die Navigation für mobile Nutzer erschweren. Du kannst den Mobile Usability Bericht der Google Search Console nutzen, um deine Webseite zu testen.
Es gibt sechs Haupttypen von mobilen Usability-Problemen, die dir begegnen können:
- Verwendet inkompatible Plugins
- Viewport nicht gesetzt
- Viewport nicht auf „device-width“ gesetzt
- Text zu klein zum Lesen
- Inhalt breiter als der Bildschirm
- Anklickbare Elemente liegen zu dicht beieinander
Im Rahmen dieses Berichts prüft die Google Search Console alle klickbaren Elemente deiner Webseite, wie z.B. Buttons und Links. Damit soll überprüft werden, ob mobile Nutzer bequem mit den Elementen deiner Webseite interagieren können, indem sie sie nur antippen, anstatt eine Tastatur oder Maus zu benutzen.
Wenn die Google Search Console feststellt, dass deine anklickbaren Elemente eine Herausforderung für mobile Nutzer darstellen, wird sie den Fehler „Anklickbare Elemente liegen zu dicht beieinander“ in deinen zusammenfassenden Bericht aufnehmen.
Wenn du auf den Fehler klickst, bringt er dich zur Detail- und Statusseite. Auf dieser Seite kannst du mehr über das Problem erfahren, einschließlich der betroffenen Seiten.
Im Wesentlichen ist der Fehler der klickbaren Elemente eine Warnung, die darauf hinweist, dass die tappbaren Elemente auf deiner WordPress Seite zu klein sind, damit mobile Nutzer bequem damit interagieren können.
Alternativ kann es auch bedeuten, dass sie zwar groß genug sind, aber zu nah an benachbarten Elementen positioniert sind. Wenn Buttons, Links und andere klickbare Elemente zu nah beieinander liegen, besteht die Gefahr, dass die Nutzer auf die falschen Elemente tippen, was die User Experience (UX) beeinträchtigt.
Obwohl anklickbare Elemente zu dicht beieinander liegen, kann die Behebung dieses Problems auch die Zugänglichkeit deiner Webseite verbessern. Zum Beispiel können Menschen mit Geschicklichkeitsproblemen etwas zusätzlichen Platz zwischen interaktiven Elementen schätzen. Im Gegensatz dazu können Nutzer mit Sehproblemen es einfacher finden, mit großen, klar definierten Buttons und Links zu interagieren.
Warum der Fehler „Anklickbare Elemente liegen zu dicht beieinander“ auftreten kann
Verschiedene Faktoren können zu dem „Anklickbare Elemente liegen zu dicht beieinander“-Problem führen. Manchmal liegt es einfach daran, dass Google beim Rendering nicht die nötigen Ressourcen anfordern konnte. Wenn das der Fall ist, dann kannst du versuchen, den Mobile-Friendly-Test zu verwenden und zu sehen, ob er besteht. Wenn es das tut, kannst du es wahrscheinlich ignorieren.
Dieses Problem kann auch durch das Design deiner Webseite entstehen. Wenn du zum Beispiel versuchst, zu viele interaktive Elemente auf eine einzige Webseite zu quetschen, kann es sein, dass du diesen Mobile Usability Fehler siehst.
Ein weiterer Grund für den Fehler der klickbaren Elemente ist, dass es ein Problem mit der mobilen Responsivität des Designs deiner Webseite gibt. Deine Webseite sollte flexibel sein und sich automatisch an das jeweilige Gerät des Besuchers anpassen, um die bestmögliche UX zu bieten. Wenn deine Webseite jedoch nicht responsive ist, kann das zu Usability-Problemen führen.
Genauer gesagt, wenn deine Webseite nicht responsive ist, können Teile davon auf bestimmten Bildschirmen gestreckt, geschrumpft oder verzerrt erscheinen. Auf Geräten mit kleineren Bildschirmen können antippbare Elemente verkrampft oder verzerrt erscheinen.
Die Identifizierung einiger Standard- und möglicher Gründe für das Auftreten dieses Fehlers kann dir helfen, besser zu verstehen, warum deine Webseite Probleme mit der mobilen Benutzerfreundlichkeit hat. Es wird dir auch helfen, das Problem zu beheben.
Wie man den Fehler „Anklickbare Elemente liegen zu dicht beieinander“ behebt (3 Methoden)
Wenn mobile Nutzer Schwierigkeiten haben, auf deiner Webseite zu navigieren, was hält sie davon ab, von ihr weg zu navigieren? Die Vermeidung dieses Problems ist essentiell, um alle mobilen Usability-Probleme so schnell wie möglich zu beheben. Lass uns einen Blick auf drei Methoden werfen, mit denen du den „Anklickbare Elemente liegen zu dicht beieinander“-Fehler beheben und deinen mobilen Nutzern eine bessere UX bieten kannst.
1. Nutze das YellowPencil Visual Customizer WordPress Plugin
YellowPencil Visual Customizer ist ein Frontend WordPress Plugin, das es dir ermöglicht, die CSS und Theme Dateien deiner Webseite ohne jegliche Programmierung zu bearbeiten.
Dieses Plugin ist praktisch, um die Größe deiner tappbaren Ziele zu verändern, z.B. um deine Buttons größer zu machen. Du kannst auch mehr Platz zwischen klickbaren Elementen schaffen, indem du die Ränder und Abstände zwischen ihnen veränderst.
Du kannst das YellowPencil Plugin kostenlos herunterladen oder eine reguläre oder erweiterte Lizenz erwerben. Um es zu nutzen, installiere und aktiviere es zunächst auf deiner WordPress Seite, indem du zu Plugins > Neu hinzufügen gehst, nach dem Plugin suchst und dann auf Jetzt installieren > Aktivieren klickst.
Als nächstes navigierst du zu YellowPencil > Anpassungen. Unter dem Reiter Anpassungen wähle Let’s start!
Das visuelle Customizer Interface wird geladen und fordert dich auf, die Seite auszuwählen, die den Mobile Usability Fehler auslöst.
Du kannst deine Änderungen entweder auf diese spezielle Seite oder auf deine gesamte Webseite anwenden. Wenn viele Seiten den Fehler mit den klickbaren Elementen aufweisen, solltest du Global auswählen.
Triff deine Auswahl und klicke dann auf Weiter. Du kannst dich nun durch deine Webseite arbeiten und jedes klickbare Element auswählen. YellowPencil zeigt dir ein Panel mit Bearbeitungsoptionen für dieses Element an.
Zum Beispiel haben wir im unteren Screenshot Padding ausgewählt und 10 Pixel auf allen Seiten hinzugefügt, um den Abstand zwischen den tappbaren Zielen zu vergrößern:
Die Einstellungen für Größe und Position helfen auch, den Fehler „Anklickbare Elemente liegen zu dicht beieinander“ zu beheben. Auch wenn es nicht notwendig ist, kannst du den CSS-Code direkt über das linke Panel bearbeiten.
Dann kannst du zum nächsten Element übergehen, das Probleme mit der mobilen Benutzerfreundlichkeit verursacht und den Prozess wiederholen. Wenn du mit deinen Änderungen zufrieden bist, klicke auf den grünen Speichern-Button.
2. Sicherstellen, dass alle tappbaren Ziele mindestens 48px groß sind
Es ist unmöglich, ein einziges, statisches Design zu erstellen, das auf allen Geräten gut aussieht und korrekt funktioniert. Stattdessen wäre es am besten, wenn du ein flexibles Layout erstellen würdest, indem du alle deine tappbaren Ziele mit geräteunabhängigen Pixeln (dpi) definierst. Elemente, die mit dpi definiert sind, können sich automatisch an die Bildschirmgröße des Nutzers anpassen.
Auf einem mobilen Gerät ist das minimal empfohlene Touch-Ziel 48×48 Pixel. Es entspricht etwa 9 mm, was für die Fingerauflage einer durchschnittlichen Person ausreichend ist.
Wenn du also nicht genau herausfinden kannst, welche Elemente die Ursache für das Problem sind, kann es helfen, die dpi der einzelnen Elemente zu überprüfen. Wenn es unter dem empfohlenen Touch-Zielwert liegt (z.B. 24px), kannst du das Padding erhöhen, um es auf 48px zu bringen.
Du kannst den berechneten Wert eines tappbaren Bereichs mit Chrome DevTools oder Firefox DevTools überprüfen, je nachdem welchen Browser du bevorzugst. Wir werden Chrome als Beispiel verwenden.
Um den dpi-Wert eines der klickbaren Elemente auf deiner WordPress Seite zu überprüfen, öffne es in einem Chrome Browser Tab und navigiere zu der Seite, die den Fehler „Anklickbare Elemente liegen zu dicht beieinander“ anzeigt. Klicke mit der rechten Maustaste auf die Seite und wähle Untersuchen.
Klicke auf Inspect, um Chrome DevTools zu öffnen. Oben klickst du auf das Symbol für mobile Geräte, was dich zum Bildschirm Toggle device toolbar bringt.
Im linken Vorschaubereich siehst du eine Emulation deiner Webseite für mobile Geräte. Wenn du mit dem Mauszeiger über eines der tappbaren Elemente fährst und darauf klickst, kannst du den berechneten Wert auf der rechten Seite sehen:
Bei Bedarf kannst du dann die Größe eines Elements anpassen, indem du deine CSS- und Webseite-Dateien direkt bearbeitest oder ein Plugin wie YellowPencil verwendest.
3. Überprüfe die Eingabemethode
Wenn du versuchst, den Fehler „Anklickbare Elemente liegen zu dicht beieinander“ zu beheben, kann es helfen, die Eingabemethode zu überprüfen. Es bezieht sich auf die Methode oder das Gerät, das ein Nutzer verwendet, um deine Webseite anzusehen und mit ihr zu interagieren. Genauer gesagt, kannst du sehen, ob sie ein Smartphone, ein Tablet oder ein anderes Gerät benutzen.
Zum Beispiel wird Touch als eine ungenaue Eingabemethode angesehen. Wie wir gerade besprochen haben, kann die Verwendung von CSS, um die Größe deiner Touch-Ziele zu erhöhen oder zusätzliche Polsterung hinzuzufügen, tippbare Ziele einfacher für Besucher machen, die Touch-Geräte zur Interaktion mit deiner Webseite verwenden.
Allerdings ist die Bestimmung des Geräts eines Nutzers keine exakte Wissenschaft. Diese Technik nutzt den sogenannten „Pointer“, um die primäre Eingabemethode des Nutzers zu überprüfen, die einen von zwei Werten haben kann:
- Grob: Die primäre Eingabemethode des Geräts ist Touch.
- Fein: Die Eingabemethode ist eine Maus und ein Trackpad.
Wenn der Touchscreen die primäre Eingabemethode des Nutzers ist, deutet dies darauf hin, dass die Person deine Webseite auf einem Smartphone oder Tablet ansieht.
Allerdings ist das Vorhandensein eines Touchscreens keine Garantie dafür, dass jemand ein mobiles Gerät benutzt. Es könnte sein, dass die Person deine Webseite mit einem großen, touchscreenfähigen Laptop aufruft oder ein Bluetooth-Gerät mit ihrem Smartphone verbunden hat.
Wenn der Zeiger einen groben Wert zurückgibt, kannst du die Größe des tappbaren Ziels mit CSS anpassen. Dazu kannst du das Folgende in der CSS-Datei deines WordPress-Themes platzieren (oder ein Plugin wie YellowPencil verwenden):
.container a {
padding: .2em;
}
@media (pointer: coarse) {
.container a {
padding: .8em;
}
}
Nachdem du dein CSS angepasst hast, kannst du Google bitten, deine Webseite erneut zu crawlen, um festzustellen, ob dies das Problem behoben hat.
Alternativ kannst du Google bitten, einzelne URLs mit dem URL Inspection Tool neu zu crawlen. Nachdem du deine URL über dieses Tool eingereicht hast, wähle Indexierung anfordern. Das Inspection Tool wird dann die URL auf offensichtliche Probleme bei der Indexierung prüfen.
Angenommen, Google findet keine Probleme, dann wird die Seite für die Indexierung qualifiziert.
Wenn du eine große Anzahl von URLs hast, kannst du alternativ eine Sitemap einreichen. Für jede Seite, die neu indiziert werden muss, aktualisierst du den <lastmod> Tag mit dem Datum der letzten Änderung. Diese Sitemap kannst du dann über das Google Sitemap Report Tool einreichen.
In den meisten Fällen wird deine Sitemap sofort freigeschaltet. Es kann jedoch einige Zeit dauern, bis Google alle URLs in deiner Sitemap gecrawlt hat, abhängig von Faktoren wie der Größe deiner Webseite, dem Traffic und der Aktivität. Es gibt auch keine Garantie, dass Google jede einzelne URL in deiner Sitemap crawlen wird.
Was der „Inhalt breiter als der Bildschirm“-Fehler ist
Wie du dich vielleicht erinnerst, warnt dich die Google Search Console vor verschiedenen mobilen Usability-Fehlern. Zusätzlich zu „Anklickbare Elemente liegen zu dicht beieinander“ könnte dein zusammenfassender Bericht auch das Problem „Inhalt breiter als der Bildschirm“ beinhalten.
Dieses Problem erscheint an der gleichen Stelle in deiner Google Search Console wie der Fehler „Anklickbare Elemente“. Auch hier gibt es eine Vielzahl von möglichen Ursachen.
Warum der Fehler „Inhalt breiter als der Bildschirm“ erscheinen kann
Dieser Fehler tritt auf, wenn sich das Design deiner Webseite horizontal ausdehnt und mobile Nutzer dazu zwingt, seitlich zu wischen, um den „Offscreen“-Inhalt zu sehen. Um ein gutes Nutzererlebnis zu bieten, solltest du horizontales Scrollen wo immer möglich vermeiden.
Es ist wahrscheinlicher, dass das Problem „Inhalt breiter als der Bildschirm“ auftritt, wenn du absolute Werte in deinen CSS-Deklarationen verwendest. Da unflexible Layouts zu dem Fehler „Anklickbare Elemente“ führen können, ist es nicht ungewöhnlich, dass diese beiden Fehler im selben Mobile Usability Bericht auftauchen.
Wie du den Fehler „Inhalt breiter als der Bildschirm“ behebst (5 Methoden)
Wenn dein Bericht den Fehler „Inhalt breiter als der Bildschirm“ enthält, kannst du einige einfache Methoden anwenden, um es zu beheben. Lass uns einen Blick auf fünf der häufigsten Möglichkeiten werfen.
1. Vermeide die Verwendung von absoluten Variablen in CSS-Deklarationen
Eine der besten Möglichkeiten, um den Fehler „Inhalt breiter als der Bildschirm“ zu beheben, ist es, absolute Variablen in deinen CSS-Deklarationen zu vermeiden. Dein Inhalt sollte keinen bestimmten Viewport benötigen, um korrekt angezeigt zu werden und zu funktionieren.
Anstatt absolute Werte zu verwenden, solltest du dich daher für relative Breiten- und Positionswerte für deine CSS-Elemente entscheiden. Wenn du relative Werte verwendest, wo immer es möglich ist, kannst du flexible Layouts erstellen, die sich an eine Reihe von Bildschirmgrößen anpassen.
2. Weise Bildern eine maximale Breite zu
Ein Bild mit festen Abmessungen kann größer als der Viewport erscheinen und damit den Fehler „Inhalt breiter als Bildschirm“ auslösen. Um sicherzustellen, dass deine Bilder entsprechend der Bildschirmgröße skaliert werden, ist es am besten, allen Bildern eine maximale Breite von 100% zuzuweisen.
Es zwingt das Bild zu schrumpfen, damit es auf den verfügbaren Platz passt. Auch wenn du max-width verwendest, solltest du immer noch die Attribute width und height in deinem <image>-Tag verwenden, da moderne Webbrowser diese Informationen nutzen, um Platz für Bilder zu reservieren, wenn sie geladen werden. Durch die Verwendung des <image>-Tags kannst du Layout-Verschiebungen vermeiden, wenn deine Bilder schließlich auf dem Bildschirm erscheinen.
3. Verwende Meta Viewport Tags
Standardmäßig rendern mobile Browser die Seite in der Desktop-Bildschirmbreite, die normalerweise etwa 980px beträgt. Der Browser wird dann versuchen, deine Seite zu optimieren, indem er die Schriftgröße vergrößert und deinen Inhalt skaliert, damit er auf die aktuellen Bildschirmabmessungen passt.
Leider kann dieses Standardverhalten zu Ungereimtheiten führen. Einige Nutzer müssen möglicherweise zoomen, um deine Inhalte zu lesen und mit ihnen zu interagieren, weshalb du diesen Fehler sehen könntest.
Anstatt dich auf dieses Standardverhalten zu verlassen, solltest du dem Browser Anweisungen geben, wie er die Abmessungen und den Maßstab der Seite kontrollieren kann. Du kannst dies tun, indem du ein Meta-Viewport-Tag in den Kopf deines Dokuments einfügst.
4. Verwende moderne CSS-Layout-Techniken
Du kannst den Fehler „Inhalt breiter als Bildschirm“ auch beheben, indem du das Layout deiner Webseite änderst. Um dir dabei zu helfen, flexiblere Layouts zu erstellen, solltest du Techniken wie Flexbox, CSS Grid Layout oder Multiple-Column Layout (Multicol) in Betracht ziehen.
5. Verwende CSS Media Queries wo es angebracht ist
Media Queries können es einfacher machen, Stile basierend auf dem Benutzergerät zu ändern, einschließlich Touchscreens. Wenn du an dieser Stelle immer noch mit dem Fehler „Inhalt breiter als der Bildschirm“ zu kämpfen hast, empfehlen wir dir, CSS Media Queries zu verwenden, wo es angebracht ist.
Nachdem du diese Änderungen vorgenommen hast, ist es an der Zeit zu testen, ob du den „Inhalt breiter als der Bildschirm“-Fehler erfolgreich behoben hast. Dies kannst du tun, indem du den Mobile Usability Report erneut ausführst und die Korrektur mit den Schritten, die wir im nächsten Abschnitt besprechen, validierst.
Wie du deine Fehlerlösung verifizierst und validierst
Unabhängig davon, mit welchem der oben genannten Fehler du zu tun hast oder welche Methoden du benutzt, um ihn zu beheben, ist es wichtig festzustellen, ob deine Änderungen das Problem behoben haben. Dies kannst du tun, indem du die Mobile Usability Tests von Google erneut durchführst.
Dazu navigierst du zurück zu deinem Mobile Usability Bericht und suchst den Fehler „Anklickbare Elemente liegen zu dicht beieinander„. Wähle als nächstes die Option Behebung validieren.
Beachte, dass du dieselben Schritte wiederholen kannst, wenn du versuchst, deine Fehlerbehebung für „Inhalt breiter als Bildschirm“ zu verifizieren und zu validieren. Google wird dann deine Webseite crawlen und du erhältst eine Nachricht, dass es dabei ist, die Änderung zu validieren.
Wenn du den Fehler behoben hast, zeigt die Google Search Console die Meldung „Passed“ und ein grünes Häkchen an. Wenn die von dir vorgenommenen Korrekturen jedoch nicht validiert werden, musst du den Fehler erneut überprüfen und eine alternative Lösung implementieren.
Zusammenfassung
Ungelöste mobile Usability-Fehler können zu einem schlechten Nutzererlebnis führen und einen spürbaren Rückgang des Traffics auf deiner Webseite verursachen. Indem du Schritte unternimmst, um Usability-Fehler zu beheben, kannst du sicherstellen, dass deine Webseite mobilfreundlich und für eine größere Anzahl von Menschen zugänglich ist.
In diesem Beitrag hast du gelernt, wie du den Fehler „Anklickbare Elemente liegen zu dicht beieinander“ mit drei Methoden beheben kannst:
- Verändere deine Webseite mit einem Frontend CSS Style Editor Plugin (wie YellowPencil).
- Verwende Chrome DevTools, um sicherzustellen, dass alle tappbaren Ziele 48 dpi oder größer sind.
- Überprüfe die Eingabemethode und passe dein CSS entsprechend an.
Hast du Fragen zur Behebung des Fehlers „Anklickbare Elemente liegen zu dicht beieinander“? Lass es uns in den Kommentaren unten wissen!
Salman Ravoof ist ein autodidaktischer Webentwickler, Autor, Kreativer und ein großer Bewunderer von Free and Open Source Software (FOSS). Neben Technik begeistert er sich für Wissenschaft, Philosophie, Fotografie, Kunst, Katzen und Essen. Erfahre mehr über ihn auf seiner Website und trete mit Salman auf X in Kontakt.
Schreibe einen Kommentar