So optimieren Sie Ihre WordPress-Layouts für den mobilen Verkehr

Die Anzahl der mobilen Geräte und der Personen, die sie verwenden, steigt ständig. Es ist keine Überraschung, dass mehr als die Hälfte des gesamten Internetverkehrs mobil ist und die meisten Suchmaschinenabfragen auf Mobilgeräten durchgeführt werden. Darüber hinaus bestraft Google Websites, die nicht für mobile Geräte optimiert sind.

Um Ihre WordPress-Layouts für den mobilen Verkehr zu optimieren, müssen Sie viel mehr tun, als ein Thema zu installieren. Sie müssen in die mobile Version Ihrer Website investieren, nicht nur unter UX-Gesichtspunkten, sondern auch unter SEO-, CRO-, Werbe- und Leistungsgesichtspunkten.

Daher erklären wir in diesem Artikel, was Sie auf Ihrer WordPress-Site ansprechen müssen, damit sie für den mobilen Verkehr funktioniert und dass Benutzer die bestmögliche Erfahrung beim Besuch der Website auf einem mobilen Gerät erhalten.

Warum mobiler Verkehr wichtig ist

Im Jahr 2016 übertraf der mobile Internetverkehr erstmals den Desktop. Um damit Schritt zu halten, müssen Sie Ihre WordPress-Site auf den von jedem Gerätetyp eingehenden Datenverkehr vorbereiten.

Optimierung bedeutet nicht nur, auf Smartphones gut auszusehen, sondern auch, eine funktionierende Website zu haben. Eine mobile Website verbessert UX und Ihre Conversion-Rate. Dies ist für Websites von entscheidender Bedeutung, deren Einkommen auf Werbung basiert.

Neben einer verbesserten Benutzeroberfläche wirkt sich ein mobilfreundliches Layout auch positiv auf Ihre SEO aus. Seit dem Update von Google im Jahr 2015 wurden die Suchmaschinenalgorithmen erheblich überarbeitet. Die Benutzerfreundlichkeit von Mobilgeräten ist einer der wichtigsten Faktoren für ein besseres Suchranking und einen erhöhten Web-Traffic.

Der mobile Webverkehr nimmt kontinuierlich zu, wie diese Grafik von Statista zeigt.

Wenn Ihre Website auf Mobilgeräten eine hervorragende Leistung erbringt, wird sie in SERPs einen besseren Rang einnehmen und zu mehr Verkäufen über Mobilgeräte führen. Selbst große Einzelhändler wie Walmart Canada haben weiter von Optimierungen des mobilen Weblayouts profitiert und den Umsatz mit Mobilgeräten um 98% gesteigert!

Als das Unternehmen herausfand, dass fast 50% seiner Zielkunden Mütter sind, die Tablets verwenden, wurde ihnen klar, dass sie etwas für ihre mobile Erfahrung tun müssen. Um die Probleme mit ihren mobilen Layouts erfolgreich zu lösen, haben sie die folgenden Lösungen implementiert:

• Erstellung eines Mobile-First-Plans: Das Team entschied, dass das Design einen berührungsorientierten Ansatz verfolgen sollte, und ließ es auf Tablets und Smartphones wirklich gut aussehen.
• Implementierung der Optimierung des mobilen Designs: Durch den reaktionsschnellen Designansatz wurde die Website auf jeder Bildschirmgröße hervorragend dargestellt. Darüber hinaus haben sie ihre Produktseiten auch für den mobilen Webverkehr optimiert.

Das Ergebnis: 20% mehr Conversion-Rate und 98% mehr mobile Verkäufe, wie oben erwähnt.

Wie bewertet Google Layouts für mobile Websites?

Bei der Bewertung der Fähigkeit der Website, Datenverkehr von einer mobilen Suche zu empfangen, berücksichtigt Google die folgenden Faktoren:

• Seitenlayout : Google prüft, ob Ihre Seite auf einem mobilen Bildschirm korrekt gerendert wird.
• Barrierefreiheit: Überprüfen Sie, ob die Schaltflächen, Medien und Texte groß genug sind, um leicht zugänglich zu sein, ohne dass Benutzer hineinzoomen müssen.
• Leistung: Die Seitengeschwindigkeit ist für Desktop- und mobile Web-Erlebnisse von entscheidender Bedeutung. In SERPs priorisiert Google die Leistung mobiler Seiten gegenüber dem Desktop.
• Anzeigenplatzierung: Eine mit Anzeigen gefüllte Seite ist für viele aufdringlich und auch für Google ein Problem. Aus diesem Grund müssen Sie bei der Verwendung von Anzeigen sicherstellen, dass Sie nicht gegen die Richtlinien für die Anzeigenplatzierung verstoßen.

Beginnen Sie mit einigen Tests

Als Erstes müssen Sie prüfen, ob Ihre aktuelle Website angemessen auf mobilen Webverkehr reagiert oder nicht. Zu diesem Zweck können Sie das Google Mobile-Friendly Test-Tool verwenden.

Der Mobile Friendly Test von Google ist eines der besten Tools, um die auf Mobilgeräte reagierenden Layouts Ihrer Website zu untersuchen.

Geben Sie einfach die Site-URL ein und wählen Sie Test-URL . Die Analyse dauert nicht länger als ein paar Sekunden. Wenn Ihre Website auf Mobilgeräten funktioniert, informiert Sie das Tool mit einem Screenshot, wie die Website auf einem Smartphone aussieht. Wenn Ihre Website nicht für Handys geeignet ist, zeigt das Tool an, was Sie anpassen müssen.

Es gibt eine Handvoll anderer nützlicher Tools, mit denen Sie die Benutzerfreundlichkeit von Mobilgeräten testen können, z.

• Varvy Mobile SEO
• W3C Mobile Validator
• Responsive Design Checker

Die Werkzeuge sind großartig, aber nichts geht über die Erfahrung der ersten Hand. Wir empfehlen immer, Ihre Website zu durchsuchen und Aktionen auszuführen, die Sie für Ihre Benutzer als vorrangig erachten (z. B. Hinzufügen eines Produkts zu einem Warenkorb, Senden eines Formulars, Navigieren zu einer Seite, Freigeben eines Beitrags). Halten Sie während des gesamten Prozesses Ausschau nach potenziellen Problemen. Dies ist die einfachste Form des UX-Testens.

Testen Sie die Leistung

Geschwindigkeit ist relevanter als je zuvor. Google betrachtet die Geschwindigkeit als einen der wichtigsten Ranking-Faktoren. Bis zu 85% der Nutzer erwarten, dass mobile Websites viel schneller geladen werden als die Desktop-Versionen.

Hier sind einige Tools, mit denen Sie die Geschwindigkeit Ihrer Website testen können:

• PageSpeed ​​Insights
• GTMetrix
• Pingdom

Wenn Sie den Inhalt auf Mobilgeräten beschleunigen möchten, kann Ihnen ein CDN dabei helfen, den Inhalt durch Zwischenspeichern und Verteilen an zahlreichen Standorten schneller bereitzustellen.

Angenommen, Ihr Hosting-Server befindet sich in San Francisco, Kalifornien, und Ihr mobiler Webbesucher stammt aus Paris. Diese Entfernung kann die Übertragung von Inhalten verlangsamen. Ein CDN kann eine Version Ihrer Website auf einem französischen Server in der Nähe von Paris speichern und Ihre Inhalte dadurch viel schneller bereitstellen.

Darüber hinaus müssen Sie einen leistungsstarken Managed Hosting-Anbieter für Ihre WordPress-Website auswählen. Auf einem gemeinsam genutzten Host werden Hunderte von Websites gleichzeitig ausgeführt. Wenn auf einer der Websites eine höhere Verkehrsspitze als normal auftritt, wird die Geschwindigkeit der anderen Websites verringert.

Ein Upgrade auf ein WordPress-Hosting wie Pagely kann zu erheblichen Leistungsverbesserungen führen. Pagely verwendet eine Serverinfrastruktur, die Ihre Website sofort beschleunigt. Sie verwenden auch die neueste PHP 7-Version und enthalten ein CDN, das Ihre Site-Assets in die Höhe schnellen lässt.

Einfachheit bewahren

Da Smartphones einen viel kleineren Bildschirm als Desktop-Layouts haben, ist die Anzahl der Elemente, die Sie den Benutzern anzeigen können, geringer. Wenn Sie also eine Vielzahl von Inhalten anzeigen möchten, beeinträchtigen Sie lediglich die Benutzererfahrung.

Schauen wir uns zum Beispiel die brasilianische Website von Toyota an. Auf einem Laptop sieht es wirklich solide aus.

Eine gut aussehende Desktop-Website bedeutet nicht, dass das mobile Layout dem Beispiel folgt. Bildquelle: Toyota Brasilien

Aber was ist, wenn Sie ihre Fahrzeuge auf Ihrem Smartphone durchsuchen möchten?

Ein überladenes mobiles Weblayout führt zu weniger Verkehr und einer verringerten Conversion-Rate. Bildquelle: Toyota Brasilien

Es ist nicht so schlimm, aber auch hier sind die obere Leiste und das Hauptmenü etwas zu viel, was die gesamte Erfahrung veraltet und überladen macht.

Wenn Sie die Dinge mit Ihrem Design einfach halten, wird die mobile Benutzeroberfläche verbessert, und Benutzer können effizienter durch Ihre Seiten navigieren. Darüber hinaus verbessern einfache Layouts die Geschwindigkeit Ihrer mobilen Seite, da die Seite umso schneller ist, je weniger Elemente ein Browser laden muss.

Ein einfaches WordPress-Layout für Handys von Swell

Wenn Sie ein mobiles Layout entwerfen, konzentrieren Sie sich am besten auf ein einspaltiges Seitenlayout, um das Scrollen auf der Seite zu fördern. Denken Sie darüber nach - warum sind Facebook und Instagram so erfolgreich wie mobile Plattformen?

Benutzer wischen natürlich vertikal. Bildquelle: Giphy

Darüber hinaus müssen Sie andere akzeptable Funktionen für ein einfaches mobiles Webdesign berücksichtigen, z. B. das „Hamburger-Menü“.

Eine Hamburger Menüschaltfläche oben links. Bildquelle: AMC

Es ist jetzt eine Standardkomponente im mobilen Webdesign. Wenn Benutzer eine andere Seite durchsuchen möchten, durchsuchen sie den oberen Rand des Seitenlayouts. Verwenden Sie keine umfangreichen Dropdown-Menüs. Die Navigation auf Smartphones ist schwierig, und manchmal beeinträchtigen sie sogar die Benutzerfreundlichkeit von Desktop-Websites.

Unnötigen Inhalt ausschließen

Neben der Optimierung des Übergangs der Seite zu Mobilgeräten durch Entfernen unnötiger Elemente können Sie auch den zusätzlichen Inhalt entfernen. Natürlich sollten Sie niemals Inhalte löschen, die Ihre Conversion-Rate verbessern. Es gibt jedoch nur einige Inhalte, die für die mobile Version Ihrer Website nicht erforderlich sind.

Fragen Sie sich Folgendes, wenn Sie überprüfen, welche Inhalte auf der Seite angezeigt werden sollen:

• Wie relevant ist dieser Inhalt für die Seite?
• Ist der Inhalt für die Benutzerreise entscheidend?
• Wenn wir diesen Inhalt aufnehmen müssen, wie können wir ihn für Mobilgeräte vereinfachen?
• Wenn wir es auf Mobilgeräten entfernen können, wird es auf dem Desktop noch benötigt?

Durch das Eliminieren unnötiger Inhalte werden die Benutzererfahrung und die Conversion-Raten verbessert. Speichern Sie nur die wichtigsten Inhalte für Ihre mobilen Webbesucher. Vereinfachen Sie Ihre Inhalte, wo immer Sie können, aber beseitigen Sie keine wichtigen Inhalte, die Benutzer davon überzeugen könnten, sich für Ihr Produkt zu entscheiden.

Eine einfache Benutzeroberfläche von der mobilen BuildFire-Website.

Begrenzen Sie die anklickbaren Bereiche

Wenn Benutzer Websites auf Mobilgeräten besuchen, möchten sie nicht, dass zu viele Optionen angeklickt werden. Das kann überwältigend sein und Sie können keine funktionsfähige mobile UX bereitstellen. Stattdessen müssen Sie die wichtigsten Handlungsaufforderungen und anklickbaren Bereiche auf Ihren Seiten hervorheben.

Todoist hat nur den Aufruf zum Handeln und einige schöne Grafiken.

Denken Sie daran, dass das Surfen auf einer Website mit einem Smartphone darin besteht, mit den Fingern auf einen Touchscreen zu schauen und darauf zu klicken, anstatt mit Pfeilen zu zeigen. Wenn Sie also eine begrenzte Anzahl von Links einfügen und diese ordnungsgemäß voneinander trennen, wird sichergestellt, dass Sie über eine zugängliche Seite verfügen, auf der Benutzer mobiler Geräte navigieren können.

Die mobile Quicksprout-Website verfügt über große anklickbare Bereiche.

Dies ist von entscheidender Bedeutung, da Benutzer auf den falschen Link klicken können, wenn sich die anklickbaren Bereiche auf einem mobilen Bildschirm befinden. Darüber hinaus kann Google Ihre Website für mobile Nutzer als unfreundlich kennzeichnen, und Sie werden viele potenzielle organische Suchanfragen verpassen.

Harness Responsive Design

Wenn Sie Ihre Website ordnungsgemäß auf Desktop und Handy anzeigen möchten, müssen Sie sie reaktionsfähig machen. Eine reaktionsfähige Website verwendet dieselben Seitenelemente für Desktop- und Mobilversionen. Je nach Gerät passt sich das Design an den Bildschirm an.

Neben der verbesserten Benutzeroberfläche für Ihre Webbesucher auf Mobilgeräten bietet das reaktionsschnelle Design Ihrer Website auch die folgenden Vorteile:

• Flexibilität: Mit Responsive Design müssen Sie nicht daran denken, das Design auf zwei Websites zu ändern. Sie müssen Elemente nur einmal reparieren oder hinzufügen, und dies sowohl für die mobile als auch für die Desktop-Version.
• Kosteneffizienz: Das Ausführen eines Desktops und einer mobilen Site kann teuer sein. Durch die Verwendung von Responsive Design eliminieren Sie diese unnötigen Kosten.
• SEO-Vorteile: Responsive Design wirkt sich positiv auf Ihr Suchranking aus, da Google, wie am Anfang des Artikels erläutert, mobile freundliche Websites in SERPs priorisiert.

Sie müssen jedoch vorsichtig sein. Die meisten reaktionsschnellen Websites konvertieren nur drei Spalten mit Desktop-Inhalten in eine Spalte.

Eine reaktionsfähige Site passt zu jedem Bildschirm. Es lädt dieselben Daten vom Desktop in die mobile Version. Wenn Sie beispielsweise ein Desktop-Foto mit 1.200 Pixel auf einem mobilen Bildschirm mit 300 Pixel anzeigen möchten, werden die gesamten 1.200 Pixel geladen und nur verkleinert.

Bildquelle: Giphy

In Bezug auf Bilder hat WordPress bereits bedeutende Fortschritte auf dem Weg zu einer besseren Erfahrung gemacht. Seit der Version 4.4 skaliert das CMS automatisch auch die größten Bilder über das HTML-Attribut srcset .

PNG und JPEG sind die gängigsten Bilddateiformate. Mit den neuesten technischen und digitalen Bildentwicklungen werden WebP- und SVG-Formate jedoch zunehmend präsent.

Ein SVG ist ein Vektorbild und kann an jede Bildschirmgröße angepasst werden. Normalerweise sind SVGs viel kleiner als PNGs, was beim Laden wertvolle Zeit spart.

Sie sollten jedoch trotzdem vorsichtig sein. Visuelle Elemente wie Videos, Fotos und Grafiken können einer der wichtigsten Leistungsfresser für Websites sein. Obwohl es keine streng definierten Regeln für die Größe von Mediendateien gibt, führen kleinere Dateien zu besseren Ladezeiten.

Beachten Sie, dass dieselben visuellen Elemente aus der Desktop-Version Ihrer WordPress-Site möglicherweise nicht immer für das mobile Design geeignet sind. Aus diesem Grund ist es viel besser, große Hintergrundbilder zu entfernen und sie gegen ein Bild auszutauschen, das die UX auf Mobilgeräten nicht behindert.

Nehmen wir als Beispiel die Homepage von HubSpot. Die Grafiken im Heldenbereich zeigen perfekt, wie das CRM die Dinge in Bewegung bringt. Stellen Sie sich ein realistisches Bild eines Bürogebäudes mit so vielen Personen in jedem Fenster vor. Es würde nicht so gut funktionieren.

Quelle: HubSpot

Formulare optimieren

Das Ausfüllen von Formularen auf einem Smartphone kann eine Herausforderung sein, insbesondere wenn die Benutzer zu viele Daten übermitteln und zu viele Felder navigieren müssen. Deshalb müssen Sie sicherstellen, dass Sie Ihre mobilen Formulare vereinfachen und nur die wichtigsten Informationen sammeln.

Halten Sie die Formulare für Ihre mobilen Seiten so einfach wie möglich. Quelle: Copyblogger

In WordPress können Sie ein Plugin wie WPForms installieren und schnell und einfach reaktionsfähige Formulare erstellen, mit denen Sie mobile Webbesucher konvertieren können.

Aus Entwicklersicht verwenden wir Contact Form 7, da es die größte Flexibilität bietet. Es sollte jedoch beachtet werden, dass die Benutzeroberfläche nicht benutzerfreundlich für nicht technische Benutzer ist, die ein benutzerdefiniertes Design für ihre Formulare wünschen.

Contact Form 7 ist aus Entwicklersicht das bessere Tool zur Formularoptimierung.

Einpacken

Ein mobilfreundliches WordPress-Layout ist heutzutage von entscheidender Bedeutung. Es ist eine notwendige Voraussetzung, dass Ihre Zielbenutzer und Suchmaschinen Ihre Website akzeptieren.

Eine mobilfreundliche WordPress-Website bietet die Möglichkeit, mehr organischen Traffic zu generieren, neue Leads und Kunden zu gewinnen.

Jetzt haben Sie einen besseren Überblick darüber, was zu testen ist, wie Sie nach Problemen mit der mobilen Benutzeroberfläche suchen und zusätzliche Probleme identifizieren können. Sie können den oben aufgeführten Ratschlägen folgen, um sicherzustellen, dass die mobile Benutzeroberfläche Ihrer WordPress-Site immer auf dem neuesten Stand ist.

Die Leute hinter dem besten CMS machen auch große Fortschritte in Richtung einer verbesserten nativen mobilen UX. Von der Skalierung von Bildern in mobilen Browsern bis hin zu einem verbesserten Backend können Sie sicher sein, dass Sie den Website-Eigentümern, die ein anderes CMS verwenden, voraus sind.

Wenn Sie weitere Fragen haben oder Hilfe bei Problemen mit der mobilen UX benötigen und ein modernes Web-Erlebnis auf Geräten schaffen möchten, zögern Sie nicht, sich mit uns in Verbindung zu setzen.