So machen Sie Ihre WordPress-Site mobilfreundlich

Es ist kein Geheimnis, dass für Mobilgeräte optimierte WordPress-Sites die neue Norm sind, aber so verbreitet sie auch erscheinen mögen, es kann immer noch ein wenig Arbeit erfordern, eine schöne, reaktionsschnelle Site zu erstellen. Dieser Leitfaden hilft Ihnen zu verstehen, warum es wichtig ist, eine für Mobilgeräte optimierte Website zu haben, wie man eine auf WordPress erstellt, und stellt Ihnen die besten Tools zum Erstellen einer responsiven Website vor.

Um Ihre WordPress-Seite mobilfreundlich zu gestalten, müssen Sie:

1. Verstehe, warum responsives Webdesign wichtig ist
2. Machen Sie den Google Mobile-Friendly-Test
3. Verwenden Sie ein responsives WordPress-Theme (oder erstellen Sie Ihr eigenes)
4. Ziehen Sie mobilfreundliche WordPress-Plugins in Betracht
5. Verwenden Sie mobilfreundliche Opt-ins
6. Denken Sie an responsive Medien
7. Priorisieren Sie die Leistung der Website

Bereit? Tauchen wir ein!

1. Warum sind für Mobilgeräte optimierte Websites wichtig?

Im vierten Quartal 2019 fanden 61 % der Google-Suchanfragen auf einem Mobilgerät statt. Das bedeutet, dass mehr als die Hälfte der Bevölkerung statt herkömmlicher Desktop-Geräte auf Telefone und Tablets umsteigt. Um mit ihnen Schritt zu halten, muss Ihre Website für die Anzeige auf jeder Bildschirmgröße bereit sein. Ein mobilfreundliches Design sorgt für eine positive Benutzererfahrung und hilft Ihren Benutzern, unterwegs zu finden, wonach sie suchen.

Neben UX gibt es einen weiteren wichtigen Grund, warum Ihre Website für Mobilgeräte optimiert sein sollte: Google. Ab 2015 (dem Jahr von „Mobilegeddon“) hat Google seinen Suchalgorithmus grundlegend überarbeitet, um Websites zu belohnen, die als „mobilfreundlich“ gelten. Die Änderung lief auf einen entscheidenden Datenpunkt hinaus: ob Ihre Website responsiv ist oder nicht.

Das bedeutet, dass Ihre Website, wenn sie auf Mobilgeräten gut gelesen wird, in den Suchergebnissen besser abschneidet als Websites, die dies nicht tun. Das ist ein ziemlich süßer Vorteil, wenn Sie sich die Mühe gemacht haben, eine für Mobilgeräte optimierte Website zu erstellen! Aber es kann auch den Verkehr Ihrer Website beeinträchtigen, wenn es der Aufgabe der Anzeige auf kleineren Bildschirmen nicht ganz gewachsen ist.

Wenn Ihre WordPress-Site noch nicht für Mobilgeräte optimiert ist, gibt es glücklicherweise viele Tools, die Ihnen dabei helfen, auf den neuesten Stand zu kommen und eine voll funktionsfähige, reaktionsschnelle Site zu erstellen. Der erste Schritt? Benchmarken Sie Ihr aktuelles Design.

2. Machen Sie den Handy-freundlichen Test

Ihre Website mag auf einem mobilen Gerät (wie Ihrem eigenen Mobiltelefon) großartig aussehen, aber Sie müssen sie wirklich auf einer Vielzahl von Bildschirmgrößen testen, um zu wissen, ob sie wirklich responsive ist. Selbst wenn Sie zufällig eine ganze Reihe alter Telefone herumliegen haben, kann es ein zeitaufwändiger Prozess sein, es auf jedem Bildschirm zu testen.

Um die Dinge zu vereinfachen, hat Google uns allen ein kostenloses mobilfreundliches Testtool geschenkt, das Ihnen sagt, ob Ihre Website als „mobilfreundlich“ qualifiziert ist oder nicht. Geben Sie einfach die URL Ihrer Website ein, um das mobile Design Ihrer Website schnell zu beurteilen. Wenn Ihre Website vollständig für Mobilgeräte optimiert ist, erhalten Sie eine begeisterte kleine Erfolgsmeldung, die wie folgt aussieht:

Wenn Sie rot sehen, müssen Sie ein wenig arbeiten. (Dazu kommen wir gleich!)

Ziemlich nettes kleines Werkzeug, oder? Nun, es wird noch besser.

Für alle Entwickler da draußen hat Google auch eine für Mobilgeräte optimierte Test-API veröffentlicht, mit der Sie URLs mit automatisierten Tools testen können. Dies hat den Vorteil, dass Sie schnell mehr Seiten testen können, aber Sie können auch die wichtigsten Seiten Ihrer Website überwachen, ohne ständig manuell zum Browser-Tool wechseln zu müssen. Punktzahl!

Sobald Sie das für Mobilgeräte optimierte Tool von Google zum Benchmarking Ihrer Website verwendet haben, ist es an der Zeit, Verbesserungen vorzunehmen. Beginnen wir mit Ihrem WordPress-Theme.

3. Verwenden (oder erstellen) Sie ein responsives WordPress-Theme

Wenn Sie kürzlich ein neues WordPress-Theme installiert haben, besteht eine gute Chance, dass Sie in dieser Abteilung in Ordnung sind. Wenn Ihr Thema jedoch schon eine Weile existiert, ist es möglicherweise an der Zeit für ein kleines Update.

Das Wichtigste zuerst: Überprüfe deine WordPress-Version und die aktuelle Theme-Version noch einmal. Wenn Updates ausstehen, beginnen Sie mit diesen. Ich kann nicht für jedes Thema da draußen sprechen, aber einige Updates enthalten mobilfreundliche Elemente und können ausreichen, um Ihre Probleme zu beheben. WordPress 4.4 hat zum Beispiel einige wirklich nette Funktionen für responsive Bilder hinzugefügt (alles darüber kannst du hier nachlesen).

Wenn Updates nicht ausreichen, ist es wahrscheinlich an der Zeit, nach einem neuen Design zu suchen oder ein eigenes zu erstellen. Lassen Sie uns beide Optionen untersuchen.

Die besten mobilfreundlichen WordPress-Themes

Realistischerweise sind heutzutage viele WordPress-Themes responsiv – es ist wahrscheinlich seltener, dass ein Theme nicht mobilfreundlich ist. Allerdings sollten Sie vor dem Kauf eines Themas noch einmal überprüfen, ob es auf jeder Bildschirmgröße gut angezeigt wird. Testen Sie die Demo-Site, vergrößern Sie Ihr Browserfenster und lesen Sie alle Rezensionen, die Sie finden können, um nach Erfahrungen von echten Benutzern zu suchen.

Wenn Sie mit dem, was Sie sehen, zufrieden sind, machen Sie es! Aber wenn etwas nicht richtig aussieht, Finger weg. Selbst wenn Sie dachten, es sei die perfekte Ergänzung, gibt es so viele WordPress-Themen zur Auswahl, dass Sie garantiert ein anderes finden werden, das für Ihre Website funktioniert.

Wenn Sie sich kostenlose Themen ansehen, achten Sie darauf, wie es mit Ihren eigenen Inhalten aussieht – wie Sie sicher wissen, sehen die Dinge nicht immer ganz gleich aus, also stellen Sie sicher, dass Ihre Inhalte angezeigt werden wie Sie es auf dem Handy wollen.

Sie sind sich nicht sicher, wo Sie anfangen sollen? Wenn Sie Ihre WordPress-Site auf WP Engine hosten, erhalten Sie mit Ihrem Plan kostenlosen Zugriff auf StudioPress-Designs (einschließlich Genesis Framework!). Diese Themen sind vollständig reaktionsschnell, sodass sie auf jedem Gerät großartig aussehen, und Sie können problemlos zwischen ihnen wechseln (anstatt das Gefühl zu haben, bei dem „einen“ Premium-Thema hängen zu bleiben, für das Sie sich entschieden haben).

So erstellen Sie Ihr eigenes responsives WordPress-Theme

Wenn Sie lieber den Do-It-Yourself-Weg gehen möchten, um eine für Mobilgeräte optimierte Website zu erstellen, beginnen Sie bei Null oder in einer Testumgebung – Sie sollten niemals solche drastischen Änderungen an Ihrer Live-Website vornehmen.

Ich würde empfehlen, Local zu verwenden, um eine lokale WordPress-Site direkt auf Ihrem Computer zu erstellen. Mit dieser kostenlosen App können Sie nach Herzenslust experimentieren, ohne Ihre aktuelle Website zu beschädigen (was bei einem Redesign unerlässlich ist). Sie können sogar Ihre vorhandene Website in Local importieren, sodass Sie nur bei null anfangen müssen, wenn Sie möchten.

Es gibt auch eine Funktion namens Live-Links, die eine gemeinsam nutzbare URL zur lokalen Website generiert. Auf diese Weise können Sie es an einen Kunden senden oder auf Ihrem Telefon abrufen, sodass Sie ganz einfach testen können, wie die Website auf einem Mobilgerät aussieht.

Wenn Sie ein untergeordnetes Thema basierend auf einem responsiven übergeordneten Thema erstellen, werden Sie in ziemlich guter Verfassung sein. Wenn Sie ganz bei Null anfangen und Ihr eigenes Thema erstellen, stellen Sie einfach sicher, dass Sie Medienabfragen verwenden, um Grenzen für das Design festzulegen, und die Elemente einzeln durchdenken.

Fragen Sie sich, wie Bilder skaliert werden sollen, wie die Navigation aussehen soll und ob Inhalte auf einem Mobilgerät ausgeblendet werden. Hier sind ein paar Tutorials, die Ihnen dabei helfen können:

• So erstellen Sie ein responsives Navigationsmenü in WordPress
• 7 Best-Practice-Tipps für responsives Webdesign
• Arbeiten mit responsiven Bildern in WordPress

4. Responsive Plugins verwenden

Plugins fügen Ihrer WordPress-Site Funktionalität hinzu, sodass sie dem Frontend nicht immer etwas visuelles hinzufügen. Aber für den Fall, dass sie Ihrer Website ein physisches Element hinzufügen (wie ein Widget oder eine CTA-Schaltfläche), stellen Sie sicher, dass es auf allen Bildschirmgrößen gut skaliert oder Ihnen zumindest die Möglichkeit gibt, es auf kleineren Bildschirmgrößen zu deaktivieren.

Zum Beispiel ist ein Seitenleisten-Widget eine wunderbare Ergänzung zu einer Desktop-Site, aber wenn es das mobile Design dominiert oder nicht verkleinert wird, wird es nicht für eine sehr gute Benutzererfahrung sorgen.

Achten Sie wie bei Themen einfach auf die Funktionen eines Plugins und versuchen Sie, Bewertungen zu lesen oder eine Demo zu finden, bevor Sie eines kaufen. Und wenn Sie ein neues Plugin aktivieren, denken Sie daran, eine schnelle Qualitätsprüfung Ihrer Website durchzuführen, um sicherzustellen, dass sie über alle Bildschirmgrößen hinweg korrekt skaliert wird.

Solange Sie ein ansprechendes Design und Plugins haben, die sich auf Mobilgeräten gut verhalten, wird Ihre Website wirklich gut für die Anzeige auf kleineren Bildschirmen sein.

5. Vermeiden Sie das Hinzufügen von Popups auf Mobilgeräten

Wenn Sie versuchen, mit Ihrer WordPress-Site eine E-Mail-Liste zu erstellen, haben Sie vermutlich eine Vielzahl von Opt-Ins auf Ihrer Site. Die meisten E-Mail-Opt-in-Formulare funktionieren problemlos auf Mobilgeräten (vorausgesetzt, sie sind skalierbar und einfach zu verwenden).

Pop-ups sind jedoch ein anderes Biest. Google hat damit begonnen, Websites mit aufdringlichen Interstitials zu bestrafen, auch bekannt als Opt-Ins, die den Inhalt einer Website verdecken. Dazu gehören Pop-ups (ob sie sofort angezeigt werden oder nachdem ein Benutzer einige Zeit auf der Website war) und jede andere Art von Opt-in, die ein Benutzer ablehnen muss, bevor er auf den Inhalt der Seite zugreifen kann. Hier können Sie alles über die Haltung von Google zu diesem Thema lesen.

Um Ihre WordPress-Website mobilfreundlich zu halten und Best Practices zu befolgen, vermeiden Sie Popups in Ihrem mobilen Design. Wie Sie dabei vorgehen, hängt von dem Dienst ab, der Ihre Opt-Ins unterstützt, aber die meisten Anbieter sollten eine Option haben, aufdringliche Popups auf Mobilgeräten zu deaktivieren.

6. Strategien für responsive Medien entwickeln

Ganz gleich, ob Sie mit einer Portfolio-Website, einem täglichen Blog oder einer E-Commerce-Website arbeiten, ein wichtiger Teil des Responsive-Puzzles besteht darin, die Medien auf Ihrer Website zu berücksichtigen. Dieses große Hintergrundbild auf Ihrer Homepage sieht auf einem Desktop-Computer vielleicht großartig aus, aber wenn es nicht richtig skaliert wird, kann es den gesamten Kontext verlieren und zu einem schwierigen Anzeigeerlebnis auf einem Telefon führen. Also Regel Nummer eins für responsive Medien? Denken Sie darüber nach, wie die Dinge skalieren.

Wenn die Skalierung nicht wirklich die beste Lösung für Ihre Website ist, können Sie auch erwägen, bestimmte Elemente auszublenden, wenn Ihre Website auf einem mobilen Gerät geladen wird. Dies würde dazu beitragen, die Erfahrung zu vereinfachen und Benutzer schneller zu den wichtigsten Inhalten zu bringen.

Schließlich müssen Sie auch die Dateigröße der Medien berücksichtigen, die Sie auf Ihrer Website einfügen. Dies verbessert nicht nur das mobile Erlebnis, sondern auch die Ladezeit des Desktops! Mediendateien gehören oft zu den größten auf einer Website, was sie zur Ursache für Ladebalken und lange Wartezeiten macht. Um Ihre Website zu optimieren und die mobile Leistung zu steigern, versuchen Sie, Ihre Bilder zu optimieren, indem Sie die kleinstmögliche Dateigröße verwenden und gleichzeitig die erforderliche Qualität beibehalten. (Vielleicht lädt Ihre mobile Website beispielsweise eine kleinere Version eines Bildes als der Desktop!)

7. Priorisieren Sie die Leistung der Website

Die Seitengeschwindigkeit war lange Zeit wichtig für das Ranking Ihrer Website in der Google-Desktop-Suche, aber seit Juli 2018 gilt dies jetzt auch für mobile Rankings. Kombinieren Sie dies mit der Statistik von oben, dass über 60 % der Internetsuchen mobile Geräte verwenden und die Leistung Ihrer Website (auf jedem Gerät) jetzt wichtiger denn je ist.

Bilder sind ein großer Teil der Leistungsgleichung, aber Ihr Code und Ihr WordPress-Host spielen ebenfalls eine große Rolle.

Wenn es um Ihren Code geht, sollten Sie Aktionen wie die Minimierung in Betracht ziehen (insbesondere, wenn Sie mit einem benutzerdefinierten Design arbeiten). Machen Sie eine Bestandsaufnahme aller auf Ihrer Website installierten Plugins und deaktivieren und deinstallieren Sie alle, die nicht mehr benötigt werden. Grundsätzlich gilt: Je besser Sie die Elemente organisieren, die Ihre Website antreiben, desto besser werden Sie dran sein.

Stellen Sie bei Ihrem WordPress-Host sicher, dass Sie einen Qualitätspartner verwenden, der Dienste wie Caching-Technologie, CDN und Infrastruktur umfasst, die von zuverlässigen Anbietern wie der Google Cloud-Plattform unterstützt werden. Wenn Sie Ihre Website auf WP Engine hosten, sind Sie auf all diese Bereiche eingestellt.

Da immer mehr Menschen ihre Smartphones oder Tablets verwenden, um auf das Internet zuzugreifen, müssen Website-Designer sich anpassen, um diese Nutzungsmuster zu berücksichtigen. Ist Ihre Website also bereit für Ihre mobilen Besucher? Welche Aspekte Ihrer Website mussten Sie ändern? Welche Tools haben Sie verwendet, um ein responsives Design zu erstellen? Teile deine Erfahrungen in den Kommentaren!

Erhalten Sie Zugriff auf über 30 Premium-Designs (und für Mobilgeräte optimiert!).

Sparen Sie Zeit (und Geld!) mit WordPress-Hosting durch WP Engine und erhalten Sie Zugriff auf StudioPress-Themen und das Genesis Framework. Die Themen sind vollständig reaktionsschnell und einfach anzupassen, wodurch Sie Zeit sparen, wenn Sie versuchen, eine für Mobilgeräte optimierte Website zu erstellen. Außerdem wird die leistungsstarke Plattform von WP Engine die Leistung Ihrer Website optimieren und dazu beitragen, dass die Seitengeschwindigkeiten hoch bleiben und Ihre Website gut rankt.