{"id":41166,"date":"2021-04-21T11:37:15","date_gmt":"2021-04-21T09:37:15","guid":{"rendered":"https:\/\/kinsta.com\/?p=92617&preview=true&preview_id=92617"},"modified":"2023-08-18T12:59:25","modified_gmt":"2023-08-18T11:59:25","slug":"anklickbare-elemente-liegen-zu-dicht-beieinander","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/anklickbare-elemente-liegen-zu-dicht-beieinander\/","title":{"rendered":"Wie man den Fehler „Anklickbare Elemente liegen zu dicht beieinander“ behebt (3 Methoden)"},"content":{"rendered":"

Ungel\u00f6ste Probleme mit der mobilen Benutzerfreundlichkeit k\u00f6nnen einen erheblichen Einfluss auf den Traffic deiner Webseite haben. Ein h\u00e4ufiges Problem, vor dem dich die Google Search Console<\/a> warnen kann, ist der Fehler „Anklickbare Elemente liegen zu dicht beieinander“, was wahrscheinlich bedeutet, dass deine Webseite f\u00fcr mobile Nutzer kompliziert zu navigieren ist.<\/p>\n

Mehr als 4,32 Milliarden Menschen<\/a> greifen \u00fcber ihre mobilen Ger\u00e4te auf das Internet zu. Daher ist es wichtig, dass du den Fehler mit den klickbaren Elementen so schnell wie m\u00f6glich behebst. Zum Gl\u00fcck gibt es mehrere M\u00f6glichkeiten, wie du deine Webseite mobilfreundlich gestalten kannst.<\/p>\n

In diesem Artikel erkl\u00e4ren 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\u00e4ren auch, was der Fehler „Inhalt breiter als der Bildschirm“ ist und wie du ihn beheben kannst.<\/p>\n

Lass uns an die Arbeit gehen!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Was der „Anklickbare Elemente liegen zu dicht beieinander“ Fehler ist<\/h2>\n

In aller K\u00fcrze: Mobile Usability Fehler k\u00f6nnen deine WordPress Seite unzug\u00e4nglich machen<\/a> und die Navigation f\u00fcr mobile Nutzer erschweren. Du kannst den Mobile Usability Bericht<\/a> der Google Search Console nutzen, um deine Webseite zu testen.<\/p>\n

\n

\"Das
Das Google Search Console Mobile Usability Report Tool<\/figcaption><\/figure><\/figure>\n

Es gibt sechs Haupttypen von mobilen Usability-Problemen, die dir begegnen k\u00f6nnen:<\/p>\n

    \n
  1. Verwendet inkompatible Plugins<\/li>\n
  2. Viewport nicht gesetzt<\/li>\n
  3. Viewport nicht auf „device-width“ gesetzt<\/li>\n
  4. Text zu klein zum Lesen<\/li>\n
  5. Inhalt breiter als der Bildschirm<\/li>\n
  6. Anklickbare Elemente liegen zu dicht beieinander<\/li>\n<\/ol>\n

    Im Rahmen dieses Berichts pr\u00fcft die Google Search Console alle klickbaren Elemente deiner Webseite, wie z.B. Buttons und Links. Damit soll \u00fcberpr\u00fcft werden, ob mobile Nutzer bequem mit den Elementen deiner Webseite interagieren k\u00f6nnen, indem sie sie nur antippen, anstatt eine Tastatur oder Maus zu benutzen.<\/p>\n

    Wenn die Google Search Console feststellt, dass deine anklickbaren Elemente eine Herausforderung f\u00fcr mobile Nutzer darstellen, wird sie den Fehler „Anklickbare Elemente liegen zu dicht beieinander“ in deinen zusammenfassenden Bericht aufnehmen.<\/p>\n

    \u00a0<\/p>\n

    \n

    \"Ein
    Ein Bericht zur mobilen Benutzerfreundlichkeit von Google Search Console<\/figcaption><\/figure><\/figure>\n

    Wenn du auf den Fehler klickst, bringt er dich zur Detail- und Statusseite. Auf dieser Seite kannst du mehr \u00fcber das Problem erfahren, einschlie\u00dflich der betroffenen Seiten.<\/p>\n

    \n

    \"Der
    Der Google Search Console „Anklickbare Elemente liegen zu dicht beieinander“ Fehler<\/figcaption><\/figure><\/figure>\n

    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\u00f6nnen.<\/p>\n

    Alternativ kann es auch bedeuten, dass sie zwar gro\u00df 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\u00e4chtigt.<\/p>\n

    Obwohl anklickbare Elemente zu dicht beieinander liegen, kann die Behebung dieses Problems auch die Zug\u00e4nglichkeit deiner Webseite verbessern<\/a>. Zum Beispiel k\u00f6nnen Menschen mit Geschicklichkeitsproblemen etwas zus\u00e4tzlichen Platz zwischen interaktiven Elementen sch\u00e4tzen. Im Gegensatz dazu k\u00f6nnen Nutzer mit Sehproblemen es einfacher finden, mit gro\u00dfen, klar definierten Buttons und Links zu interagieren.<\/p>\n\n

    Warum der Fehler „Anklickbare Elemente liegen zu dicht beieinander“ auftreten kann<\/h3>\n

    Verschiedene Faktoren k\u00f6nnen zu dem „Anklickbare Elemente liegen zu dicht beieinander“-Problem f\u00fchren. Manchmal liegt es einfach daran, dass Google beim Rendering nicht die n\u00f6tigen Ressourcen anfordern konnte. Wenn das der Fall ist, dann kannst du versuchen, den Mobile-Friendly-Test<\/a> zu verwenden und zu sehen, ob er besteht. Wenn es das tut, kannst du es wahrscheinlich ignorieren.<\/p>\n

    Dieses Problem kann auch durch das Design deiner Webseite<\/a> 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.<\/p>\n

    Ein weiterer Grund f\u00fcr den Fehler der klickbaren Elemente ist, dass es ein Problem mit der mobilen Responsivit\u00e4t<\/a> des Designs deiner Webseite gibt. Deine Webseite sollte flexibel sein und sich automatisch an das jeweilige Ger\u00e4t des Besuchers anpassen, um die bestm\u00f6gliche UX zu bieten. Wenn deine Webseite jedoch nicht responsive ist, kann das zu Usability-Problemen f\u00fchren.<\/p>\n

    Genauer gesagt, wenn deine Webseite nicht responsive ist, k\u00f6nnen Teile davon auf bestimmten Bildschirmen gestreckt, geschrumpft oder verzerrt erscheinen. Auf Ger\u00e4ten mit kleineren Bildschirmen k\u00f6nnen antippbare Elemente verkrampft oder verzerrt erscheinen.<\/p>\n

    Die Identifizierung einiger Standard- und m\u00f6glicher Gr\u00fcnde f\u00fcr 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.<\/p>\n

    Wie man den Fehler „Anklickbare Elemente liegen zu dicht beieinander“ behebt (3 Methoden)<\/h2>\n

    Wenn mobile Nutzer Schwierigkeiten haben, auf deiner Webseite zu navigieren, was h\u00e4lt sie davon ab, von ihr weg zu navigieren? Die Vermeidung dieses Problems ist essentiell, um alle mobilen Usability-Probleme so schnell wie m\u00f6glich 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.<\/p>\n

    1. Nutze das YellowPencil Visual Customizer WordPress Plugin<\/h3>\n

    YellowPencil Visual Customizer<\/a> ist ein Frontend WordPress Plugin<\/a>, das es dir erm\u00f6glicht, die CSS und Theme Dateien deiner Webseite ohne jegliche Programmierung zu bearbeiten.<\/p>\n

    \n

    \"Das
    Das YellowPencil Visual Customizer WordPress Plugin<\/figcaption><\/figure><\/figure>\n

    Dieses Plugin ist praktisch, um die Gr\u00f6\u00dfe deiner tappbaren Ziele zu ver\u00e4ndern, z.B. um deine Buttons gr\u00f6\u00dfer zu machen. Du kannst auch mehr Platz zwischen klickbaren Elementen schaffen, indem du die R\u00e4nder und Abst\u00e4nde zwischen ihnen ver\u00e4nderst.<\/p>\n

    Du kannst das YellowPencil Plugin kostenlos herunterladen oder eine regul\u00e4re oder erweiterte Lizenz<\/a> erwerben. Um es zu nutzen, installiere und aktiviere es zun\u00e4chst auf deiner WordPress Seite, indem du zu Plugins > Neu hinzuf\u00fcgen<\/strong> gehst, nach dem Plugin suchst und dann auf Jetzt installieren > Aktivieren<\/strong> klickst.<\/p>\n

    \n

    \"Die
    Die Option, das YellowPencil Plugin in WordPress zu installieren<\/figcaption><\/figure><\/figure>\n

    Als n\u00e4chstes navigierst du zu YellowPencil > Anpassungen<\/strong>. Unter dem Reiter Anpassungen<\/strong> w\u00e4hle Let’s start<\/strong>!<\/p>\n

    \n

    \"Die
    Die YellowPencil WordPress Plugin „Anpassungen“ Seite<\/figcaption><\/figure><\/figure>\n

    Das visuelle Customizer Interface wird geladen und fordert dich auf, die Seite auszuw\u00e4hlen, die den Mobile Usability Fehler ausl\u00f6st.<\/p>\n

    \n

    \"Das
    Das YellowPencil Visual Customizer Plugin Interface<\/figcaption><\/figure><\/figure>\n

    Du kannst deine \u00c4nderungen entweder auf diese spezielle Seite oder auf deine gesamte Webseite anwenden. Wenn viele Seiten den Fehler mit den klickbaren Elementen aufweisen, solltest du Global<\/strong> ausw\u00e4hlen.<\/p>\n

    Triff deine Auswahl und klicke dann auf Weiter<\/strong>. Du kannst dich nun durch deine Webseite arbeiten und jedes klickbare Element ausw\u00e4hlen. YellowPencil zeigt dir ein Panel mit Bearbeitungsoptionen f\u00fcr dieses Element an.<\/p>\n

    \n

    \"YellowPencil
    YellowPencil visual customizer CSS Optionen f\u00fcr klickbare Elemente<\/figcaption><\/figure><\/figure>\n

    Zum Beispiel haben wir im unteren Screenshot Padding<\/strong> ausgew\u00e4hlt und 10 Pixel auf allen Seiten hinzugef\u00fcgt, um den Abstand zwischen den tappbaren Zielen zu vergr\u00f6\u00dfern:<\/p>\n

    \n

    \"Die
    Die Padding-Einstellungen im visuellen Customizer des YellowPencil Plugins<\/figcaption><\/figure><\/figure>\n

    Die Einstellungen f\u00fcr Gr\u00f6\u00dfe<\/strong> und Position<\/strong> helfen auch, den Fehler „Anklickbare Elemente liegen zu dicht beieinander“ zu beheben. Auch wenn es nicht notwendig ist, kannst du den CSS-Code direkt \u00fcber das linke Panel bearbeiten.<\/p>\n

    Dann kannst du zum n\u00e4chsten Element \u00fcbergehen, das Probleme mit der mobilen Benutzerfreundlichkeit verursacht und den Prozess wiederholen. Wenn du mit deinen \u00c4nderungen zufrieden bist, klicke auf den gr\u00fcnen Speichern<\/strong>-Button.<\/p>\n

    2. Sicherstellen, dass alle tappbaren Ziele mindestens 48px gro\u00df sind<\/h3>\n

    Es ist unm\u00f6glich, ein einziges, statisches Design zu erstellen, das auf allen Ger\u00e4ten gut aussieht und<\/em> korrekt funktioniert. Stattdessen w\u00e4re es am besten, wenn du ein flexibles<\/em> Layout erstellen w\u00fcrdest, indem du alle deine tappbaren Ziele mit ger\u00e4teunabh\u00e4ngigen Pixeln (dpi) definierst. Elemente, die mit dpi definiert sind, k\u00f6nnen sich automatisch an die Bildschirmgr\u00f6\u00dfe des Nutzers anpassen.<\/p>\n

    Auf einem mobilen Ger\u00e4t ist das minimal empfohlene Touch-Ziel 48\u00d748 Pixel<\/a>. Es entspricht etwa 9 mm, was f\u00fcr die Fingerauflage einer durchschnittlichen Person ausreichend ist.<\/p>\n

    Wenn du also nicht genau herausfinden kannst, welche Elemente die Ursache f\u00fcr das Problem sind, kann es helfen, die dpi der einzelnen Elemente zu \u00fcberpr\u00fcfen. Wenn es unter dem empfohlenen Touch-Zielwert liegt (z.B. 24px), kannst du das Padding erh\u00f6hen, um es auf 48px zu bringen.<\/p>\n

    Du kannst den berechneten Wert eines tappbaren Bereichs mit Chrome DevTools<\/a> oder Firefox DevTools<\/a> \u00fcberpr\u00fcfen, je nachdem welchen Browser du bevorzugst<\/a>. Wir werden Chrome als Beispiel verwenden.<\/p>\n

    Um den dpi-Wert eines der klickbaren Elemente auf deiner WordPress Seite zu \u00fcberpr\u00fcfen, \u00f6ffne 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\u00e4hle Untersuchen<\/strong>.<\/p>\n

    \n

    \"Die
    Die Option „Inspizieren“ im Chrome Browser<\/figcaption><\/figure><\/figure>\n

    Klicke auf Inspect<\/strong>, um Chrome DevTools zu \u00f6ffnen. Oben klickst du auf das Symbol f\u00fcr mobile Ger\u00e4te, was dich zum Bildschirm Toggle device toolbar<\/strong> bringt.<\/p>\n

    \n

    \"Die
    Die Option „Ger\u00e4tesymbolleiste umschalten“ in Chrome DevTools<\/figcaption><\/figure><\/figure>\n

    Im linken Vorschaubereich siehst du eine Emulation deiner Webseite f\u00fcr mobile Ger\u00e4te. Wenn du mit dem Mauszeiger \u00fcber eines der tappbaren Elemente f\u00e4hrst und darauf klickst, kannst du den berechneten Wert auf der rechten Seite sehen:<\/p>\n

    \n

    \"Die
    Die Google Chrome DevTools Konsole<\/figcaption><\/figure><\/figure>\n

    Bei Bedarf kannst du dann die Gr\u00f6\u00dfe eines Elements anpassen, indem du deine CSS- und Webseite-Dateien direkt bearbeitest<\/a> oder ein Plugin wie YellowPencil verwendest.<\/p>\n

    3. \u00dcberpr\u00fcfe die Eingabemethode<\/h3>\n

    Wenn du versuchst, den Fehler „Anklickbare Elemente liegen zu dicht beieinander“ zu beheben, kann es helfen, die Eingabemethode zu \u00fcberpr\u00fcfen<\/a>. Es bezieht sich auf die Methode oder das Ger\u00e4t, 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\u00e4t benutzen.<\/p>\n

    Zum Beispiel wird Touch als eine ungenaue Eingabemethode angesehen. Wie wir gerade besprochen haben, kann die Verwendung von CSS, um die Gr\u00f6\u00dfe deiner Touch-Ziele zu erh\u00f6hen oder zus\u00e4tzliche Polsterung hinzuzuf\u00fcgen, tippbare Ziele einfacher f\u00fcr Besucher machen, die Touch-Ger\u00e4te zur Interaktion mit deiner Webseite verwenden.<\/p>\n

    Allerdings ist die Bestimmung des Ger\u00e4ts eines Nutzers keine exakte Wissenschaft. Diese Technik nutzt den sogenannten „Pointer“, um die prim\u00e4re Eingabemethode des Nutzers zu \u00fcberpr\u00fcfen, die einen von zwei Werten haben kann:<\/p>\n