So beheben Sie „Tap-Ziele haben nicht die richtige Größe“ in WordPress

Lighthouse ist ein leistungsstarkes Tool, mit dem Sie nützliche Informationen über die Leistung Ihrer Webseiten sammeln können. Eines der am häufigsten gemeldeten Designprobleme ist „Tap-Ziele haben nicht die richtige Größe“ . Wenn Sie jedoch kein Webentwickler oder -designer sind, wissen Sie möglicherweise nicht, was das bedeutet und wie Sie es beheben können.

Glücklicherweise ist es relativ einfach, Ihre Seiten benutzerfreundlicher zu gestalten und dieses spezielle Lighthouse-Problem zu beheben. Sie können beispielsweise die Größe von Tippzielen oder den Abstand zwischen ihnen vergrößern.

Eine Einführung in das Problem „Tap-Ziele haben nicht die richtige Größe“.

Bevor wir uns mit dem Problem „Tap-Ziele haben nicht die richtige Größe“ befassen, müssen Sie etwas über Lighthouse wissen. Mit diesem Open-Source-Tool können Sie die Qualität und Leistung Ihrer Webseiten bewerten. Sie können beispielsweise Informationen über die Barrierefreiheit, SEO, Seitengeschwindigkeit, Design und mehr Ihrer Website sammeln.

Wenn Sie viel Erfahrung mit der Webentwicklung haben, können Sie Lighthouse in Chrome DevTools oder über die Befehlszeile ausführen. Allerdings basiert auch PageSpeed ​​Insights auf Lighthouse und ist oft eine gute Alternative für Einsteiger.

Um eine erweiterte Bewertung Ihrer Website zu erhalten, müssen Sie lediglich die URL Ihrer Website eingeben und auf „Analysieren“ klicken:

Die Analyse beginnt kurz danach. Anschließend können Sie Details zur Leistung und Optimierung Ihrer Webseite anzeigen. PageSpeed ​​Insights macht dies einfach, indem es Details unter klaren Überschriften kategorisiert.

Wenn Sie nach unten scrollen, finden Sie den Abschnitt „Mobilfreundlich“ . Hier sehen Sie Informationen zu Tap-Zielen:

Wie Sie sehen können, ergab unsere Analyse das Problem „Tap-Ziele haben nicht die richtige Größe“. Wenn Sie den Abschnitt erweitern, finden Sie detailliertere Informationen zu jedem Ihrer Tippziele.

Tippziele sind die Bereiche Ihrer Webseite, mit denen Benutzer auf Touch-Geräten interagieren können. Besucher können beispielsweise Bilder, Schaltflächen, Links oder Formularelemente berühren.

Leuchtturmflaggen zielen auf Ziele ab, die zu klein sind (kleiner als 48 x 48 Pixel). Sie erhalten außerdem eine Warnmeldung, wenn um Ihre Tippziele herum nicht genügend Platz vorhanden ist, was zu überlappenden Zielen führt.

Dieses Problem kann auftreten, wenn Sie die Desktop-Version Ihrer Website erstellen, ohne sie für das mobile Erlebnis zu optimieren. Auf dem Desktop passen möglicherweise alle Ihre Seitenelemente gut zusammen, aber wenn sie sich nicht an unterschiedliche Bildschirmgrößen anpassen können, führt dies zu Problemen.

So beheben Sie das Problem „Tap-Ziele haben nicht die richtige Größe“.

Da Sie nun mehr über Lighthouse und das Problem „Tap-Ziele haben nicht die richtige Größe“ wissen, werfen wir einen Blick auf einige einfache Möglichkeiten, das Problem zu beheben.

1. Erhöhen Sie die Größe der Tippziele
2. Erhöhen Sie den Abstand zwischen den Tippzielen

1. Erhöhen Sie die Größe der Tippziele

Die erste Möglichkeit, das Problem „Tap-Ziele haben nicht die richtige Größe“ zu beheben, besteht darin, die Größe der Tap-Ziele selbst zu erhöhen. Betrachten wir also einige Designelemente, die als Tippziele dienen.

Wie bereits erwähnt, können Links, Schaltflächen, Symbole und Formularelemente alle als Tipp- oder „Touch“-Ziele dienen. Daher müssen Sie sicherstellen, dass die Größe dieser Designmerkmale nicht unter 48 x 48 Pixel sinkt. In diesem Abschnitt zeigen wir Ihnen, wie Sie die Größe von Schaltflächen und Links auf Ihren Seiten ändern.

Erhöhen Sie die Größe der Schaltflächen in WordPress

Um die Größe der Schaltflächen auf Ihrer Website zu ändern, müssen Sie den WordPress Customizer öffnen. Sie können dies tun, indem Sie in Ihrem Dashboard zu „Darstellung“ > „Anpasser“ gehen. Wählen Sie als Nächstes Schaltflächen aus:

Nun gibt es einige Möglichkeiten, die Größe von Schaltflächen zu erhöhen. Zunächst können Sie das Gewicht mithilfe der Dropdown-Box erhöhen. Dadurch wird die Größe des Tippziels nicht drastisch verändert, aber es sorgt für zusätzliche Masse und Definition:

Um ein Tippziel weiter zu optimieren, können Sie dessen Linienhöhe erhöhen. Dadurch wird das Ziel vertikal vergrößert. Wenn Sie außerdem den Wert des Buchstabenabstands bearbeiten, können Sie die Größe der Schaltfläche horizontal erweitern:

Denken Sie dann daran, auf „Veröffentlichen“ zu klicken, um Ihre Änderungen zu speichern.

Erhöhen Sie die Größe von Links in WordPress

Links können Benutzer zu anderen Seiten Ihrer Website weiterleiten. Daher können sie Besucher dazu ermutigen, länger auf Ihrer Website zu bleiben.

Damit Besucher Ihre Linkziele „berühren“ oder antippen können, müssen Sie sie jedoch anklickbar machen. Der einfachste Weg, dies zu erreichen, besteht darin, die Größe der Links zu erhöhen.

Sie können dies direkt innerhalb des entsprechenden Beitrags oder der entsprechenden Seite tun. Sie könnten beispielsweise einen Block „Abfrageschleife“ einbauen, damit Benutzer eine Liste Ihrer veröffentlichten Blog-Beiträge sehen können:

In diesem Szenario könnte jeder Ihrer Beitragstitel einen Link enthalten. In der Zwischenzeit können Sie einen zusätzlichen Link „Weitere Informationen“ einfügen, um Besucher direkt zum Beitrag zu leiten.

Das Beste an der Verwendung eines Links im Titel Ihrer Beiträge ist, dass Sie das Tippziel ganz einfach vergrößern können. Sie müssen lediglich auf den Linktitel klicken. Navigieren Sie dann in der Symbolleiste zu „Überschriftenebene ändern“ :

Hier können Sie die Linkgröße erhöhen, indem Sie sich für ein H1- oder H2-Format entscheiden.

Darüber hinaus enthält Ihr Absatztext möglicherweise auch Links. Sie können diese Tap-Ziele vergrößern, indem Sie auf das Element klicken. Gehen Sie dann in den Blockeinstellungen zu Typografie :

Verwenden Sie hier das Dropdown-Menü GRÖSSE (PX) , um von „Normal“ zu einer größeren Einstellung zu wechseln:

Stellen Sie dann sicher, dass Sie Ihre Änderungen speichern.

2. Erhöhen Sie den Abstand zwischen den Tippzielen

Die zweite Möglichkeit, das Problem „Tap-Ziele haben nicht die richtige Größe“ in Lighthouse zu beheben, besteht darin, den Abstand zwischen Tap-Zielen zu vergrößern. Chrome sagt, dass 8 Pixel normalerweise ausreichen. Bei kleineren Tippzielen müssen Sie jedoch möglicherweise den Abstand weiter vergrößern, um das Lighthouse-Audit zu bestehen. Es gibt mehrere Möglichkeiten, dies zu tun.

Passen Sie die Polsterungseigenschaft an

Eine Möglichkeit, den Abstand zwischen Tippzielen zu vergrößern, besteht darin, die Auffülleigenschaft der Elemente anzupassen. Dadurch wird der Abstand zwischen den Zielen vergrößert, indem die Ränder des Elements vergrößert werden.

Sie können dies mit Ihren Schaltflächen tun, indem Sie den WordPress Customizer öffnen. Gehen Sie dann zu „Schaltflächen“ . Sie finden die Padding- Eigenschaft oben in den allgemeinen Einstellungen:

Um das Problem „Tap-Ziele haben nicht die richtige Größe“ zu beheben, vergrößern Sie einfach den Abstand um Ihre Schaltfläche. Stellen Sie sicher, dass Sie sich in PX und nicht in EM oder REM befinden.

Es kann eine gute Idee sein, zunächst den Abstand auf jeder Seite um 10 Pixel zu erhöhen. Anschließend können Sie die Größe zwischen den Zielen bei Bedarf noch weiter vergrößern.

Möglicherweise stellen Sie fest, dass durch das Hinzufügen weiterer Abstände eine Ihrer Schaltflächen in eine neue Zeile verschoben wird. In diesem Fall können Sie auch den Abstandswert oben und unten erhöhen, um mehr Platz zwischen Ihren Zielen zu schaffen:

Klicken Sie unbedingt auf „Veröffentlichen“ , um Ihre Änderungen zu speichern.

Verwenden Sie den WordPress Spacer-Block

Ein weiterer Ansatz zum Hinzufügen von Platz zwischen Seitenelementen ist die Verwendung des WordPress-Spacer-Blocks. Dies führt lediglich dazu, dass Ihrer Seite etwas Leerraum hinzugefügt wird, sodass Ihre Tippziele einen größeren Abstand voneinander haben.

Sie könnten beispielsweise zwei übereinander gestapelte Schaltflächen haben:

Auch wenn es so aussieht, als ob ausreichend Platz zwischen diesen Touch-Zielen vorhanden wäre, können Sie bei der Vorschau des Layouts im Frontend erkennen, dass sich die Schaltflächen fast überlappen:

In diesem Fall können Sie einen Abstandsblock zwischen den Schaltflächen hinzufügen, um das Problem „Tap-Ziele haben nicht die richtige Größe“ zu beheben. Klicken Sie einfach auf das + -Symbol zwischen den Blöcken. Suchen Sie dann nach „Abstandshalter“:

Fügen Sie den Block zu Ihrer Seite hinzu und dieser schafft sofort Platz zwischen Ihren Elementen. Klicken Sie nun auf „Veröffentlichen“ , um Ihre Änderungen zu speichern und die Schaltflächen im Frontend anzuzeigen:

Wie Sie sehen, gibt es jetzt mehr Platz zwischen Ihren Tippzielen.

Abschluss

Um es noch einmal zusammenzufassen: Es gibt zwei Möglichkeiten, dieses Problem zu beheben:

1. Erhöhen Sie die Größe der Tippziele.
2. Erhöhen Sie den Abstand zwischen den Tippzielen.

Haben Sie Fragen zur Behebung des Problems „Tap-Ziele haben nicht die richtige Größe“? Lass es uns unten in den Kommentaren wissen!