Vertrauenswürdige WordPress-Tutorials, wenn Sie sie am dringendsten benötigen.
Anfängerleitfaden für WordPress
WPB Cup
25 Millionen+
Websites, die unsere Plugins verwenden
16+
Jahre WordPress-Erfahrung
3000+
WordPress-Tutorials von Experten

13 Wege, um eine mobilfreundliche WordPress-Website zu erstellen (Experten-Tipps)

Als wir WPBeginner zum ersten Mal starteten, war die Mobilfreundlichkeit noch nicht einmal auf unserem Radar. Die meisten Leute surften damals im Internet auf Desktop-Computern. Smartphones waren nicht so verbreitet wie heute.

Aber wow, wie sich die Dinge verändert haben! 📱

Heutzutage stammt mehr als die Hälfte des gesamten Webverkehrs von mobilen Geräten. Viele WPBeginner-Benutzer haben harte Lektionen gelernt, als ihre nicht mobilfreundlichen Websites begannen, Traffic zu verlieren. Wir möchten nicht, dass Sie die gleichen Fehler machen.

Deshalb haben wir diesen Leitfaden zur Optimierung Ihrer WordPress-Website für Mobilgeräte erstellt. Wir haben diese 13 Strategien auf Hunderten von WordPress-Websites getestet.

Machen Sie sich keine Sorgen, wenn Sie nicht technikaffin sind, denn diese Tipps sind leicht zu befolgen. Sie müssen keine teuren Entwickler einstellen oder komplexe Codes lernen.

create-a-mobile-friendly-WordPress-site-OG

Warum Ihre WordPress-Website mobilfreundlich gestalten?

Wenn Ihre WordPress-Website mobilfreundlich ist, können Ihre Besucher auf jedem Gerät, insbesondere auf Mobiltelefonen und Tablets, bequem lesen und surfen. Außerdem wird Ihre Website in den Suchergebnissen höher angezeigt und die Besucher kommen wieder.

Mobile Optimierung sollte eine selbstverständliche Wahl für das WordPress-Design sein, aber nicht jeder erkennt das.

Jedes Jahr nutzen mehr Menschen ihr Smartphone für Suchen. Tatsächlich stammen über 55 % des gesamten Webverkehrs weltweit von mobilen Geräten, und die mobile Suche ist in Asien und Afrika noch beliebter.

Google verwendet Mobile-First-Indexing, was bedeutet, dass seine Webcrawler die Indexierung der mobilen Version Ihrer Website-Inhalte gegenüber der Desktop-Version priorisieren.

Wenn Sie also eine perfekte Desktop-Version Ihrer Website haben, aber die Optimierung für Mobilgeräte versäumen, wirkt sich dies negativ auf Ihr Suchranking aus.

Und da die meisten Menschen bis zu 6 Stunden täglich auf ihren Handys verbringen, hat Ihr Unternehmen viele Möglichkeiten, die Aufmerksamkeit der Besucher zu gewinnen.

Die Arbeit, um etwas von dieser Bildschirmzeit einzufangen, kann auch zu anderen Vorteilen führen, wie zum Beispiel:

  • Mehr Käufe: 61% der Verbraucher kaufen eher auf mobilfreundlichen Websites, was es besonders wichtig für produktbasierte Websites mit Online-Shops macht.
  • Mehr Impressionen: Da die meisten Online-Suchen jetzt auf Handys stattfinden, können Sie mit einer mobilfreundlichen Website ein viel größeres Publikum erreichen. Dies hilft mehr Menschen, Ihre Marke zu entdecken.
  • Erhöhte Verweildauer: Die Verweildauer gibt an, wie lange Benutzer auf Ihrer Website verbringen. Wenn Sie ihre Aufmerksamkeit fesseln, erhöhen Sie die Zeit, die sie mit dem Lesen Ihres WordPress-Blogs oder dem Ansehen Ihrer Produkte und Dienstleistungen verbringen.

Aber was bedeutet eine mobilfreundliche Website eigentlich?

mobilfreundliche Illustration

Das obige Bild fasst es zusammen.

Der Inhalt Ihrer Website sollte perfekt auf den mobilen Bildschirm passen. So können Besucher leicht navigieren und auf alle Elemente auf der Seite zugreifen, ohne zoomen zu müssen.

Nun wollen wir uns unsere Tipps für die effektivsten Wege zur Erstellung einer mobilfreundlichen WordPress-Website ansehen. Nutzen Sie gerne die folgenden Links, um zu jedem Teil des Artikels zu springen:

  1. Prüfen Sie, ob Ihre Website überhaupt mobilfreundlich ist
  2. Verwenden Sie ein mobilfreundliches WordPress-Theme
  3. Beauftragen Sie eine WordPress-Agentur mit der Neugestaltung Ihrer Website
  4. Erstellen Sie mobilfreundliche Formulare
  5. Priorisieren Sie die Geschwindigkeit Ihrer Website
  6. Für mobile SERPs optimieren
  7. Für die lokale Suche optimieren
  8. Verwenden Sie ein mobil-responsives Navigationsmenü
  9. Machen Sie Ihre Landing Pages mobilfreundlich
  10. Verwenden Sie große und gut lesbare Schriftgrößen
  11. Fügen Sie keine großen Textblöcke hinzu
  12. Ändern Sie die Platzierung und Größe Ihrer CTA-Schaltfläche
  13. Wichtige Informationen leicht auffindbar machen
  14. Häufig gestellte Fragen zu mobilfreundlichen Websites

1. Prüfen Sie zuerst, ob Ihre Website mobilfreundlich ist

Bevor Sie Verbesserungen vornehmen können, ist es ratsam zu wissen, ob Ihre Website tatsächlich den Suchmaschinenstandards entspricht.

Der beste Weg, um zu überprüfen, ob Ihre Website mobilfreundlich ist, ist die Verwendung des Tools PageSpeed Insights von Google. Es analysiert Ihre Webseiten und gibt eine Bewertung für Mobilgeräte und Desktops. Außerdem erhalten Sie Vorschläge, wie Sie Ihre Bewertung verbessern können.

Hinweis: Wenn Sie sehen möchten, wie Ihre Website auf Mobilgeräten aussieht, können Sie unseren Artikel So zeigen Sie die mobile Version von WordPress-Websites vom Desktop aus an lesen.

Um zu beginnen, öffnen Sie das Tool, geben Sie die URL Ihrer Website ein und klicken Sie dann auf „Analysieren“.

Google PageSpeed Insights Tool

Sie werden zwei Registerkarten bemerken: Mobil und Desktop.

Klicken Sie auf den Bericht „Mobil“, um Ihre Core Web Vitals Bewertung anzuzeigen.

Core Web Vitals Bericht

Kurz gesagt, die Core Web Vitals sind Metriken, die die Geschwindigkeit, Interaktivität und visuelle Stabilität Ihrer Website messen. Sie können sie sich wie ein „Zeugnis“ von Google vorstellen, das bewertet, wie benutzerfreundlich Ihre Website in der realen Welt ist.

Google hat sogar die Core Web Vitals als Rankingfaktoren für SEO aufgenommen, was bedeutet, dass es wichtig ist, eine gute Note zu erhalten, wenn Sie in den Suchergebnissen höher ranken möchten.

Scrollen Sie als Nächstes nach unten zu „Leistungsprobleme diagnostizieren“, um Ihre Mobilfreundlichkeitsbewertung anzuzeigen. Grundsätzlich möchten Sie eine Leistungsbewertung zwischen 90 und 100.

Mobilfreundlichkeits-Score

Die gute Nachricht ist, dass PageSpeed Insights Vorschläge zur Verbesserung dieses Wertes liefert.

Wenn Sie zu 'Diagnose' scrollen, finden Sie einige Verbesserungsmöglichkeiten. Unter jedem Punkt können Sie auf den Dropdown-Pfeil klicken, um eine detaillierte Ansicht dessen zu erhalten, worauf sich das spezifische Element oder der Bereich bezieht.

PageSpeed Insights Diagnosen

In diesem Zusammenhang sehen wir, dass das hier verwendete Element zu lange zum Laden braucht, daher müssen wir das Bild optimieren, indem wir die Dateigröße reduzieren oder es durch etwas anderes ersetzen.

Da der Bericht schnell kompliziert werden kann, möchten Sie wahrscheinlich in unserem Blog nachsehen, ob wir dieses Thema behandelt haben.

Das gesagt, die meisten Ihrer Probleme mit der Mobilfreundlichkeit sollten behoben sein, wenn Sie den Rest dieser Anleitung befolgen.

2. Verwenden Sie ein mobilfreundliches WordPress-Theme

Nach unserer Erfahrung ist der schnellste Weg, WordPress mobilfreundlich zu machen, die Wahl eines responsiven WordPress-Themes.

Viele der beliebtesten und besten WordPress-Themes sind mobilfreundlich, sodass sie sich automatisch an Ihr Mobilgerät anpassen. Dies geschieht durch die Verwendung von Media Queries, um sich nahtlos an verschiedene Bildschirmauflösungen anzupassen.

Sie können ein mobilfreundliches Theme finden, indem Sie in Ihrem WordPress-Dashboard zu Darstellung » Themes navigieren. Klicken Sie dann einfach auf „Neues Theme hinzufügen“.

Neues Theme hinzufügen

In das Suchfeld müssen Sie „Responsive“ eingeben.

Dies sollte Ihnen eine vollständige Liste von kostenlosen, responsiven WordPress-Themes geben, die Sie sofort installieren können.

responsive Themes

Das heißt, kostenpflichtige WordPress-Themes bieten normalerweise die meisten Anpassungsoptionen, um Ihnen eine funktionalere und optisch ansprechendere Website zu bieten. Lesen Sie unseren Leitfaden zu kostenlosen vs. Premium-WordPress-Themes, um mehr über die Unterschiede zu erfahren.

Wenn Sie hochwertigere Themes wünschen, dann ist unsere Top-Empfehlung SeedProd. Von allen Theme-Buildern, die wir ausprobiert haben, ist dieses Plugin das am einfachsten zu bedienende auf dem Markt. Es ermöglicht Ihnen, benutzerdefinierte WordPress-Themes zu erstellen, ohne einen Entwickler einstellen oder eine einzige Zeile Code schreiben zu müssen.

Anstatt viele Theme-.zip-Dateien zu installieren, müssen Sie nur das SeedProd-Plugin installieren und mit dem Erstellen Ihres Themes innerhalb von WordPress beginnen.

Hinweis: Es gibt auch eine kostenlose Version von SeedProd, mit der Sie das Plugin mit eingeschränkten Funktionen testen können, um zu sehen, ob es für Sie geeignet ist.

SeedProd wird mit über 300 Vorlagen geliefert, sodass Sie höchstwahrscheinlich etwas finden, das Ihren Vorlieben und Anwendungsfällen entspricht.

SeedProd-Vorlagen

Sie können ganz einfach loslegen, indem Sie eine vorgefertigte Starter-Theme-Vorlage auswählen.

Dann können Sie jede Seite Ihres Themes einzeln erstellen.

Passen Sie Theme-Seiten in SeedProd an

Von dort aus können Sie jeden Abschnitt Ihrer Website mit dem visuellen Drag-and-Drop-Editor personalisieren. Zeigen Sie einfach auf Elemente, um sie hinzuzufügen, erstellen Sie beeindruckende Layouts und sehen Sie die Änderungen in Echtzeit.

Das gesamte Theme ist mobilfreundlich, was bedeutet, dass jedes Element, das Sie hinzufügen, wie z. B. rotierende Testimonials und Countdown-Timer, auf einem mobilen Bildschirm passt.

Darüber hinaus können Sie im Theme Builder mobile Designs in der Vorschau anzeigen und Änderungen nur an der mobilen Version Ihrer Website vornehmen.

Weitere Details finden Sie in unserem Tutorial zur Erstellung eines benutzerdefinierten WordPress-Themes.

Sie können auch unsere Elementor vs Divi vs SeedProd-Rezension lesen, um zu sehen, wie der Theme Builder im Vergleich zu anderen, beliebteren Optionen abschneidet.

3. Beauftragen Sie eine WordPress-Agentur mit der Neugestaltung Ihrer Website

Vielleicht haben Sie überall nach dem richtigen mobilfreundlichen Design gesucht, aber es entspricht immer noch nicht Ihren Standards. Oder Sie möchten keine Zeit damit verbringen, zu lernen, wie man einen Page Builder benutzt.

In diesem Fall empfehlen wir, eine professionelle WordPress-Entwicklungsagentur zu beauftragen, um Ihre Website neu zu gestalten.

Während die Beauftragung eines Fachmanns mit höheren anfänglichen Kosten verbunden ist, ist es eine lohnende Investition, weil:

  • Sie erhalten eine individuell gestaltete, mobilfreundliche Website, die Ihre Marke perfekt widerspiegelt.
  • Es spart Ihnen Zeit und Frustration, wenn Sie versuchen, es selbst zu tun.
  • Sie profitieren von Expertenwissen über WordPress-Best-Practices und aktuelle Webstandards.
  • Ihre Website wird von Anfang an für Geschwindigkeit, SEO und Benutzererfahrung optimiert.

Wenn Sie Empfehlungen benötigen, dann schauen Sie sich unsere Auswahl der besten WordPress-Entwicklungsagenturen an, die Sie engagieren können.

4. Erstellen Sie mobilfreundliche Formulare

Es besteht eine gute Chance, dass Sie eine Handvoll Formulare auf Ihrer Website haben, wie z. B. Newsletter-Anmeldeformulare, Kontaktformulare, Umfragen, Zahlungsformulare, Benutzerregistrierungsformulare, Konversationsformulare und mehr.

Formulare ermöglichen es Besuchern, Sie zu kontaktieren und mit Ihnen in Verbindung zu treten. Deshalb benötigen Sie mobilfreundliche Formulare, die sich automatisch an jedes Gerät anpassen.

Unsere Top-Wahl für das beste Kontaktformular-Plugin für WordPress ist WPForms.

Wir verwenden dieses Formular-Plugin seit Jahren, und alle damit erstellten Formulare waren schon immer komplett mobilfreundlich. Egal, ob Ihre Besucher Ihre Website auf einem Laptop, Desktop, Smartphone oder Tablet ansehen, Ihre Formulare werden immer gut aussehen.

Außerdem sind alle Formularvorlagen für die plattformübergreifende Kompatibilität konzipiert, was bedeutet, dass Ihre Website in allen modernen Browsern funktioniert.

Hier ist ein Beispiel für ein mehrseitiges Hypothekenrechner-Formular, das mit WPForms erstellt wurde. Achten Sie beim Vorschau des Formulars darauf, dass alle Elemente und Felder auf den mobilen Bildschirm passen. Und wir haben einen mehrseitigen Trenner verwendet, damit wir nicht zu viele Informationen auf einer Seite unterbringen.

wpforms mobile screen example

Das Beste daran ist, dass Sie keinen Code schreiben müssen und Ihre Formulare einfach über einen benutzerfreundlichen Drag-and-Drop-Builder anpassen können.

Weitere Details finden Sie in unserem vollständigen WPForms-Testbericht.

Halten Sie Opt-in- und Kontaktformulare kurz

Das Ausfüllen von Formularen auf einem normalen Desktop-Computer ist keine große Sache. Aber auf mobilen Websites können lange und komplizierte Formulare wirklich schwer auszufüllen sein.

Sie sollten Ihre Formulare überprüfen und überlegen, ob Sie wirklich alle Felder benötigen.

Hier ist zum Beispiel unser Opt-in-Formular für den Zugriff auf unser kostenloses WordPress-Training. Es erklärt die Hauptvorteile schnell und fragt nur nach dem Namen und der E-Mail-Adresse des Besuchers.

wpbeginner Opt-in-Formular

Für Formulare, die Benutzer in Kunden verwandeln, müssen Sie keine Dinge wie ihre Lieblingsfarbe wissen. Holen Sie sich einfach ihre Rechnungsdaten und Lieferadresse.

Ein langer und komplizierter Checkout-Prozess führt oft dazu, dass Leute ihre Einkaufswagen verlassen. Wenn Sie also verhindern möchten, dass dies geschieht, vereinfachen Sie Ihre mobilen Formulare.

5. Priorisieren Sie die Geschwindigkeit Ihrer Website

Die Optimierung Ihrer Seitenladezeit ist ein wichtiger Bestandteil des mobilen SEO. Google berücksichtigt die Ladezeit Ihrer Seiten als Rankingfaktor, was bedeutet, dass Websites mit langsamen Geschwindigkeiten niedriger eingestuft werden.

Sie können jedes Online-Geschwindigkeitstest-Tool wie Pingdom verwenden, um einfach herauszufinden, wie schnell Ihre Webseiten geladen werden.

Diese Software ermöglicht es Ihnen sogar, den genauen Standort festzulegen, sodass Sie die Seitengeschwindigkeit im Land Ihres Publikums überprüfen können.

pingdom speed test

Geben Sie einfach Ihre URL ein und wählen Sie Ihr Ziel. Klicken Sie dann auf „Test starten“ und Sie sehen Ihre Ergebnisse unten.

Stellen Sie sicher, dass die Ladezeit Ihrer Seite zwischen 0,5 und 2 Sekunden liegt.

Ladezeit

Googles Forschungsergebnisse deuten darauf hin, dass selbst eine Verzögerung von 3 Sekunden dazu führen kann, dass über die Hälfte der Website-Besucher Ihre Website verlassen. Und mit zunehmender Ladezeit steigt auch Ihre Absprungrate.

Unsere Faustregel, um Ihre Website so schnell wie möglich zu halten, ist, Ihr Webdesign zu vereinfachen. Aber wenn Sie die obigen Schritte befolgt haben, sollten Sie nicht allzu viele Probleme haben.

Einige weitere Dinge, die Sie tun können, um die Geschwindigkeit Ihrer Website zu erhöhen, sind:

Wenn Sie die Geschwindigkeit Ihrer Website maximieren möchten, lesen Sie unseren ultimativen Leitfaden zur Steigerung der WordPress-Geschwindigkeit und -Leistung.

Wählen Sie einen schnellen Hosting-Anbieter

Der einfachste Weg, die Geschwindigkeit zu verbessern, ist die Wahl des schnellsten WordPress-Hostings. Das liegt daran, dass mobile Benutzer normalerweise langsamere Internetverbindungen haben als Desktop-Benutzer. Wenn Ihr Hosting langsam ist, verlängert sich nur die Ladezeit Ihrer Webseiten auf mobilen Geräten.

Wir haben Leistungstests bei allen beliebtesten WordPress-Hosting-Anbietern durchgeführt und festgestellt, dass SiteGround die schnellsten Ladezeiten hat. Tatsächlich nutzen wir SiteGround, um die WPBeginner-Website zu betreiben.

Das Beste daran ist, dass sie unseren WPBeginner-Lesern einen riesigen Rabatt von 81 % auf Hosting plus einen kostenlosen Domainnamen anbieten.

SiteGround Webhosting

Weitere Details finden Sie in unserem Leitfaden, warum wir SiteGround auf WPBeginner nutzen: 6 Gründe, warum WPBeginner zu SiteGround Hosting gewechselt hat.

Alternativ ist Hostinger eine weitere großartige Option, wenn Sie nach einer erschwinglicheren, aber dennoch schnellen WordPress-Hostinglösung suchen. Sie bieten unseren Lesern auch einen riesigen Rabatt plus einen kostenlosen Domainnamen.

6. Für mobile SERPs optimieren

Mobile Suchmaschinenergebnisseiten (SERPs) unterscheiden sich von Desktop-Versionen. Wenn Sie ein bestimmtes Schlüsselwort durchsuchen, ist es wichtig, sowohl mobile als auch Desktop-Ergebnisse zu überprüfen.

Mobil vs. Desktop-Suche

Außerdem sehen Rich Snippets auf Mobilgeräten anders aus als auf Desktops.

Für die Desktop-Suche sehen Sie möglicherweise ziemlich standardmäßige Ergebnisse mit dem Titel-Tag und der Meta-Beschreibung.

Desktop-Rich-Snippet

Beachten Sie jedoch bei den mobilen Ergebnissen, wie Google die Vorschautexte auch mit Anleitungsbildern ergänzt.

Dies macht das Suchergebnis ansprechender und wahrscheinlicher, dass es angeklickt wird.

mobile rich snippet

Das Erreichen dieser Rich Featured Snippets ist äußerst wichtig, damit Ihre Artikel aus der Masse hervorstechen.

Um Ihre mobile Suche zu optimieren und Ihre besten Chancen auf Rich Snippets für Ihre Seiten zu haben, müssen Sie Schema-Markup hinzufügen. Dies organisiert Inhalte, sodass Google sie leicht verstehen und anzeigen kann.

Es kann Dinge wie Bewertungen, häufig gestellte Fragen, Rezeptsterne und andere Elemente zu Ihren Ergebnissen in den SERPs hinzufügen.

Nach unserer Erfahrung ist der einfachste Weg, Schema-Markup hinzuzufügen, die Verwendung eines SEO-Plugins wie All in One SEO. Andernfalls müssen Sie normalerweise etwas Code kennen, um die Schema-Funktionalität zu aktivieren.

Mit AIOSEO haben Sie Zugriff auf zahlreiche Schema-Katalogoptionen, die zu Ihrem spezifischen Seitentyp passen. Wenn Sie beispielsweise Ihren Rezept-Blogbeitrag ranken möchten, können Sie Rezept-Schema auswählen.

AIOSEO Schema-Markup

Für eine ausführlichere Anleitung lesen Sie unser vollständiges Tutorial dazu, wie Sie Schema-Markup in WordPress und WooCommerce hinzufügen.

7. Für lokale Suchergebnisse optimieren

Ein großer Teil der Popularität der mobilen Suche dreht sich um lokale Suche. Tatsächlich sucht ein Drittel der Internetnutzer mehrmals pro Woche nach lokalen Unternehmen.

mobile lokale Suche

Es gibt viele Möglichkeiten, lokale Ergebnisse in den SERPs zu priorisieren. Aber für den Anfang können Sie die Local SEO-Funktion von All in One SEO nutzen.

Hier können Sie alle Standorte Ihres Unternehmens und die Öffnungszeiten hinzufügen. Dann erledigt AIOSEO die ganze harte Arbeit für Sie und organisiert den HTML-Code ordnungsgemäß in einem strukturierten Datenformat, damit Suchmaschinen diese Informationen potenziellen Kunden anzeigen können.

lokales SEO-Standort

Darüber hinaus können Sie alle Geschäftsinformationen hinzufügen, die Kunden wissen sollten.

Dies umfasst den Firmennamen, die Geschäftsadresse, Kontaktinformationen, Zahlungsinformationen und so weiter.

aioseo Geschäftsinformationen

8. Verwenden Sie ein mobilfreundliches Navigationsmenü

Einer der größten Fehler, die wir bei Website-Besitzern, die Heatmap-Tools verwenden, gesehen haben, ist, dass Besucher Schwierigkeiten haben, auf Schaltflächen auf ihren Mobilgeräten zu klicken.

Das lässt sich leicht beheben, wenn Sie responsive Navigationsmenüs erstellen.

Auf mobilen Bildschirmen möchten Sie möglicherweise Zwischenseiten vermeiden und die Anzahl der Optionen reduzieren.

Beachten Sie zum Beispiel, wie sich das Navigationsmenü auf WPForms auf dem Bildschirm öffnet. Sie müssen nicht zoomen, und die Schaltflächen sind für mobile Benutzer leicht sichtbar.

wpforms mobile screen

Die meisten modernen WordPress-Themes bieten standardmäßig responsive Menüs. Wenn dies jedoch nicht der Fall ist, können Sie ein Plugin wie Responsive Menu verwenden, um diese zu Ihrer Website hinzuzufügen.

Weitere Details dazu finden Sie in unserem Leitfaden zur Erstellung eines mobilfreundlichen, responsiven WordPress-Menüs.

9. Machen Sie Ihre Landing Pages mobil-responsiv

Viele Website-Besitzer verwenden Tools oder Plugins von Drittanbietern, um Landing Pages in WordPress zu erstellen. Das ist großartig, um Konversionen zu steigern, aber es ist sehr wichtig, dass Ihre Seiten auf Mobilgeräten gut funktionieren.

Sie möchten also sicherstellen, dass Sie einen WordPress-Seitenersteller verwenden, der mobilfreundliche Einstellungen enthält.

Wenn Sie SeedProd verwenden, müssen Sie sich keine Gedanken über die Responsivität machen. Dieses Page-Builder-Plugin verfügt über eine riesige Bibliothek mobilfreundlicher Vorlagen, die Sie mit einem Klick verwenden können. Danach können Sie Ihre Seite einfach mit dem visuellen Seitenersteller anpassen.

Die Landingpage-Einstellungen von SeedProd ermöglichen es Ihnen auch, einfach zwischen der Desktop- und der mobilen Version zu wechseln. Das bedeutet, dass Sie Ihr Design an einem Ort perfektionieren können.

SeedProd Landingpage mobil

Wenn Sie bereit sind, Ihre Seite zu veröffentlichen, können Sie sie schließlich auf dem Live-Vorschau-Bildschirm für Mobilgeräte in der Vorschau anzeigen und alle notwendigen Anpassungen vornehmen.

Weitere Details finden Sie in unserem Leitfaden zur Erstellung einer Landing Page mit WordPress.

10. Vermeiden Sie aufdringliche Popups

Popups, die ablenkend und aufdringlich sind, frustrieren die Besucher. Für Mobilfunknutzer können sie noch irritierender sein, da sie einen größeren Teil des Bildschirms einnehmen.

Sie werden oft feststellen, dass große Pop-ups die Konversionsraten senken und Sie auch von Google eine Abfuhr erhalten.

Als Teil von Googles langer Liste von Ranking-Signalen genehmigen sie subtilere Popups im Vergleich zu größeren und aufdringlicheren.

von Google genehmigte Pop-ups

Wir empfehlen die Verwendung von OptinMonster, dem besten Popup-Plugin, mit dem Sie schöne und mobilfreundliche Interstitials erstellen können. Wir verwenden es, um unsere Verkaufs- und Kampagnen für Veranstaltungen auf allen unseren Geschäftswebsites durchzuführen.

OptinMonster bietet über 75 professionell gestaltete Vorlagen, und Sie können diese nach „Mobil optimiert“ filtern, um Popups zu erhalten, die auf den mobilen Bildschirm passen und nicht aufdringlich sind.

mobil optimierte Popups

Für ein vollständiges Tutorial lesen Sie einfach unseren Leitfaden zur Erstellung mobiler Popups, die konvertieren (ohne SEO zu beeinträchtigen).

11. Machen Sie Ihre Inhalte mobilfreundlich

Große Textblöcke sind auf kleinen Bildschirmen schwer zu lesen und können Ihre Website überladen wirken lassen.

Mobilnutzer bevorzugen schnelle und leicht lesbare Informationen, daher können lange Absätze überwältigend sein.

Deshalb sollten Sie beim Erstellen Ihrer Website den Text in kleine, lesbare Absätze unterteilen.

Verwenden Sie beispielsweise Überschriften und Unterüberschriften, damit Leser finden, was sie brauchen.

Hier ist ein Beispiel dafür, wie Healthline kurze Absätze und Überschriften verwendet, um ihren Artikel besser lesbar zu machen. Es ist am besten, Absätze mit mehr als 4 oder 5 Zeilen zu vermeiden, da sie auf Mobilgeräten noch länger erscheinen.

Gesundheitsparafgrafen

Darüber hinaus können Sie auch diese Tipps befolgen:

  • Erstellen Sie eine visuelle Hierarchie. Fügen Sie Überschriften hinzu, um Hauptpunkte hervorzuheben. Für Website-Texte können Sie Überschriften und kurze Beschreibungen für jeden Block verwenden.
  • Bleiben Sie bei einer Idee pro Textblock. Vermeiden Sie lange Texte auf Ihrer Homepage oder Ihrem Blog. Halten Sie Absätze kurz und verwenden Sie Überschriften, um Inhalte in Blogbeiträgen zu trennen.
  • Nutzen Sie Weißraum und negativen Raum. Weißraum verhindert Unübersichtlichkeit und kann das Verständnis um bis zu 20 % verbessern.

Obwohl dies kleine Änderungen sind, können sie einen großen Unterschied darin machen, ob Ihre Besucher bleiben oder gehen.

Weißraum-Beispiel

Sie können unseren Leitfaden zur Verbesserung der Lesbarkeit in WordPress für weitere Tipps zur Verbesserung der Lesbarkeit einsehen.

12. Ändern Sie die Platzierung und Größe Ihrer CTA-Schaltfläche

Wenn Sie Ihre Homepage oder eine Landingpage erstellen, ist es wichtig, Ihre Call-to-Action (CTA)-Buttons sorgfältig zu berücksichtigen.

Wenn Ihr mobiles Design effektiv sein soll, muss Ihr CTA leicht zu sehen sein. Es ist am besten, Ihre CTA-Buttons über dem "Fold" zu platzieren, damit Besucher sie nicht verpassen, was zur Steigerung der Konversionsraten beiträgt.

Button-Größe

Bei der Gestaltung von Website-Schaltflächen spielt die Größe eine Rolle. Zu kleine Schaltflächen sind schwer zu drücken, und übermäßig große Schaltflächen nehmen auf einem kleinen Bildschirm zu viel Platz ein.

Als allgemeine Regel gilt, dass eine Mindestgröße von etwa 44 x 44 Pixeln ein gutes Ziel ist. Dies macht die Schaltfläche groß genug, damit jemand sie mit dem Finger auf einem Touchscreen leicht antippen kann.

13. Wichtige Informationen leicht auffindbar machen

Wenn Menschen ihr Handy zücken und Suchmaschinen nutzen, haben sie normalerweise ein bestimmtes Ziel vor Augen. Es könnte sein, Antworten zu finden, lokale Restaurants zu entdecken oder die Telefonnummer eines lokalen Unternehmens zu erhalten.

Stellen Sie sicher, dass Sie alle Informationen haben, nach denen Ihre Besucher suchen. Sie müssen die Schlüsselwörter berücksichtigen, nach denen sie suchen, und sicherstellen, dass Ihre Seite der Suchabsicht entspricht.

Um mehr zu erfahren, lesen Sie unseren Blogbeitrag über wie Sie die Absichten von WordPress-Website-Besuchern verstehen.

Außerdem möchten Sie, dass wichtige Informationen leicht zugänglich sind. Hier sind ein paar Tipps, die Sie vielleicht in Betracht ziehen möchten:

Die besten mobilfreundlichen Plugins für WordPress

Wenn Sie Ihrer Website mit Plugins neue Funktionen hinzufügen, möchten Sie sicher sein, dass diese Ihr mobiles Design nicht beeinträchtigen.

Die von uns unten empfohlenen Plugins sind großartige Beispiele für Tools, die leistungsstarke Funktionen hinzufügen und gleichzeitig vollständig mobilfreundlich sind.

Sie funktionieren nahtlos auf Smartphones und Tablets, sodass Ihre Website nicht langsamer wird oder Benutzer daran hindert, das zu finden, wonach sie suchen.

Hier ist unsere Top-Empfehlungsliste für mobilfreundliche Plugins, die Sie Ihrer Website möglicherweise hinzufügen möchten:

  • SeedProd ist der beste WordPress-Theme- und Landingpage-Builder für die Gestaltung aller Seiten Ihrer Website, einschließlich Landingpages, Dankesseiten, "Coming Soon"-Seiten und mehr.
  • WPForms ist das beste Formular-Builder-Plugin mit über 1500 vorgefertigten Formularvorlagen.
  • RafflePress ist ein WordPress-Gewinnspiel-Plugin, mit dem Sie virale Gewinnspiele und Wettbewerbe durchführen können. Es kann Ihnen helfen, den Traffic auf Ihrer Website zu erhöhen, E-Mail-Abonnenten zu gewinnen oder mehr Social-Media-Follower zu erhalten.
  • Smash Balloon ist das wichtigste Social-Feeds-Plugin, mit dem Sie benutzerdefinierte Instagram-, Facebook-, TikTok-, YouTube- und Twitter-Feeds auf Ihrer Website anzeigen können.
  • OptinMonster ist eine beliebte Conversion-Optimierungssoftware, die dabei hilft, abgebrochene Website-Besucher in neue E-Mail-Abonnenten und Kunden zu verwandeln.
  • PushEngage ist ein leistungsstarkes Tool für Web-Push-Benachrichtigungen, das Ihnen hilft, Besucher auch nach dem Verlassen Ihrer Website zu binden. Die Benachrichtigungen funktionieren auf allen gängigen Browsern sowie auf iOS- und Android-Geräten.
  • FunnelKit ist ein Page-Builder-Plugin, das Ihnen hilft, mobil-responsive Sales Funnels zu erstellen, einschließlich 1-Klick-Upsells und gleitenden Seiten-Warenkörben, um die Konversionen zu steigern.

Obwohl dies keine erschöpfende Liste ist, ist es ein großartiger Ausgangspunkt. Diese Plugins können Ihrer Website Funktionen hinzufügen, die mehr Traffic und Verkäufe generieren und gleichzeitig sicherstellen, dass Ihre Website mobilfreundlich ist.

Und natürlich gibt es für jedes dieser Plugins kostenlose Versionen.

Häufig gestellte Fragen zu mobilfreundlichen Websites

Hier sind Antworten auf einige der häufigsten Fragen, die wir zum Thema mobile Optimierung einer WordPress-Website erhalten.

Was genau macht eine Website mobilfreundlich?

Eine mobilfreundliche Website passt ihr Layout automatisch an den Bildschirm jedes Geräts, wie z. B. eines Smartphones oder Tablets, an. Dies stellt sicher, dass Besucher Inhalte leicht lesen und auf Schaltflächen tippen können, ohne zoomen oder verkleinern zu müssen.

Wie kann ich testen, ob meine aktuelle Website mobilfreundlich ist?

Der beste Weg, dies zu überprüfen, ist das PageSpeed Insights-Tool von Google. Sie geben einfach die URL Ihrer Website ein, und es liefert einen vollständigen Bericht über die Leistung Ihrer Website auf Mobilgeräten sowie Tipps zur Verbesserung.

Löscht das Ändern meines WordPress-Themes meine Inhalte?

Nein, das Wechseln Ihres Themes in WordPress löscht weder Ihre Beiträge, Seiten noch Mediendateien. Ihre Inhalte werden separat gespeichert. Das Theme steuert jedoch das Design Ihrer Website, sodass sich das Erscheinungsbild ändert. Wir empfehlen immer ein vollständiges Backup zu erstellen, bevor Sie das Theme wechseln.

Ist ein responsives Theme alles, was ich brauche, um mobilfreundlich zu sein?

Ein responsives Theme ist der wichtigste Teil, aber auch andere Elemente spielen eine Rolle. Für ein großartiges mobiles Erlebnis benötigen Sie außerdem eine schnelle Seitenladezeit, einfach zu bedienende Navigationsmenüs, lesbare Schriftarten und einfache Formulare.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie eine mobilfreundliche WordPress-Website erstellen. Möglicherweise möchten Sie auch unseren Leitfaden zur Neugestaltung einer WordPress-Website und unsere Liste mit Fragen zur Benutzererfahrung, die Sie Website-Besuchern stellen können, überprüfen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, wenn Sie auf einige unserer Links klicken, können wir eine Provision verdienen. Sehen Sie wie WPBeginner finanziert wird, warum das wichtig ist und wie Sie uns unterstützen können. Hier ist unser Redaktionsprozess.

Das ultimative WordPress-Toolkit

Erhalten Sie KOSTENLOSEN Zugang zu unserem Toolkit – eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Leserinteraktionen

43 CommentsLeave a Reply

  1. Hallo. Basierend auf den Erfahrungen, die ich in den letzten Jahren gesammelt habe, greifen viele Benutzer über mobile Geräte auf das Internet zu und durchsuchen Websites. In einigen Bereichen übertrifft die Anzahl der mobilen Besucher sogar die der Desktop-Benutzer. Daher ist es für eine Website entscheidend, für mobile Benutzer optimiert, kompatibel und responsiv zu sein. Eine der Websites, an denen wir gearbeitet haben, hatte kein angemessenes Erscheinungsbild, was zu einem Verlust mobiler Benutzer führte. Mit einigen kleineren Anpassungen stiegen die täglichen Website-Besuche erheblich an.

    • Ich habe eine ähnliche Erfahrung gemacht. Laut meinen Messungen sind etwa 60 % meiner Nutzer auf Mobilgeräten und nur 38 % auf Desktops. Interessanterweise sind die restlichen 2 % Tablets, die praktisch unbedeutend und auf meinen Websites ziemlich selten sind. Ich stieß auch auf Probleme, weil ich meine Website hauptsächlich auf Desktops getestet habe und viel später feststellte, dass einige Elemente, die auf dem Desktop sichtbar waren, auf Mobilgeräten nicht sichtbar waren und umgekehrt – Elemente, die nicht dort sein sollten, im Weg waren. Daher habe ich gelernt, beides durch Softwaresimulationen von Mobilgeräten auf einem Desktop-PC und direkt auf Mobilgeräten zu testen. Wie Sie erwähnt haben, sind Mobilgeräte heute fast ein Ersatz für Desktop-Computer. Die Leute suchen darauf nach Informationen, wann immer sie keinen Zugang zu einem herkömmlichen Computer haben, was Mobilgeräte für die Website-Optimierung sehr wichtig macht. Die Erfahrung hat mich gelehrt, genau wie Sie, diese Optimierung nicht zu unterschätzen, da mehr als die Hälfte der Nutzer die Website möglicherweise sofort verlassen. Und das ist etwas, das kein Blogger oder Website-Besitzer möchte :).

  2. Toller Beitrag! Aber wie macht man seine Website auf Mobilgeräten zu 100 % skalierbar? Ich meine, Ihre Desktop- und Mobil-Layouts sind gleich, ohne die URL Ihrer Website zu ändern. Wir würden gerne erfahren, wie Sie das handhaben.

  3. Ich bin ein Legal Marketer und ich habe es wirklich genossen, ein mobilfreundliches WordPress-Theme zu finden.
    Danke, dass Sie mir einen so guten Tipp gegeben haben, um das Theme mobil zu machen.

  4. Außerdem gibt es von Mofuse keine kostenlose Version mehr. Sie bieten jedoch kostenlose Testversionen für alle ihre Pläne an.

  5. WordPress für Android ist eine gute Sache, es wird erwartet, dass es alle Android-Smartphone-Nutzer erreicht. Danke für die Einführung dieser Möglichkeiten…………

  6. Ich habe gerade WordPress MobilePack auf meine WP.mobi-Website geladen und die Themes werden nicht angezeigt, nur Text, was ist los?

  7. Ich benutze Mobile Smart. WPTouch funktioniert nicht für meine Themes, die ich mit Artisteer erstelle. Mit Mobile Smart können Sie ein Desktop-Theme und ein Mobile-Theme auswählen, und Ihre Benutzer können zu Mobile und zurück zu Desktop wechseln, egal ob sie sich auf Mobilgeräten oder Desktops befinden.

  8. Gibt es einen Website-Service, bei dem ich sehen kann, wie meine Website auf einem Mobiltelefon aussieht?

    Wenn jemand es weiß, bitte teilen!

  9. Ich habe die meisten dieser Plugins ausprobiert, aber das einzige Problem ist, Suchmaschinenverkehr für Ihre mobile Website zu bekommen.

    Ich finde es viel besser, sie manuell zu erstellen und von meiner WordPress-Seite aus weiterzuleiten.

    Ich habe sie in eine Subdomain m.mydomain.com gelegt und dann die üblichen SEO-Taktiken angewendet, was viel besser funktioniert.

    Sein Geschäft auf einer der Vorlagen-Websites zu platzieren, ist einfach verrückt, da Sie Ihren gesamten wertvollen Traffic auf die Website eines anderen schicken und ihm dafür bezahlen.

  10. Ich habe gerade das erste ausprobiert, das Sie aufgelistet haben, Mobify – aber als wir es auf unserem iPhone ausprobiert haben, fehlte das Captcha auf der Registrierungsseite. Erlauben einige dieser anderen Captchas?

  11. Ich benutze WPtap Themes/Plugins auf vielen meiner Websites. Sie sind wirklich gut. Tolles Design und Funktionalität, und am wichtigsten ist, dass sie eine echte Leidenschaft dafür haben, die besten Produkte zu entwickeln. Sie sollten sich ihre Themes unbedingt ansehen.

  12. Bei so vielen WP-Bloggern da draußen ist dies ein ausgezeichneter Beitrag, um den Wert einer mobilen Version für Ihren WP-Blog zu verstehen. Lokales Suchmarketing ist auch ein Bereich, den WP-Blogger im Auge behalten müssen.

    Ich habe darüber nachgedacht, einige dieser Tools zu verwenden, um meinen WP-Blog zu konvertieren, habe mich aber stattdessen entschieden, eine „Begleit“-Version anstelle des MoFuse- oder Plugin-Ansatzes zu erstellen, und bisher läuft es gut.

    • Das ist alles ein großartiges mobiles Plugin für die WordPress-Veröffentlichung, aber es ist besser, Ihren eigenen Code zu schreiben, damit Sie ihn mit jedem mobilen Gerät kompatibel machen können. Denken Sie daran, dass nicht alle mobilen Benutzer Touch-Geräte verwenden. Daher funktionieren Touch-Effekte, die Sie in Ihrem mobilen Plugin verwenden, wie JQuery oder etc. nicht damit...

  13. Ich verwende das WordPress Mobile Edition Plug-in für Wordpress. Es ist ein mobiles Theme, das als Plug-in installiert wird und den Browsertyp erkennt und eine stark vereinfachte Blog-Seite für Blackberry, iPhone oder Mobiltelefone anzeigt. Sie können anpassen, für welche Telefone das mobile Theme angezeigt werden soll. Daher verstehe ich, warum es an erster Stelle steht.

  14. Tolle Tipps, Leute… habe mir darüber nie wirklich viele Gedanken gemacht, bis ich diesen Beitrag gesehen habe, und es ist definitiv etwas, das ich in naher Zukunft berücksichtigen sollte.

    Interessante Punkte, gründlich erklärt und leicht verständlich.

    Luke Etheridge

Kommentar hinterlassen

Vielen Dank, dass Sie einen Kommentar hinterlassen. Bitte beachten Sie, dass alle Kommentare gemäß unserer Kommentarrichtlinie moderiert werden und Ihre E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwenden Sie KEINE Schlüsselwörter im Namensfeld. Führen wir ein persönliches und bedeutungsvolles Gespräch.