7 WordPress-Tipps für eine mobilfreundliche Website

Es gibt nichts Schlimmeres, als eine gut aussehende Desktop-Website und eine mobile Website zu haben, die nicht richtig funktioniert.

Die meisten Designkorrekturen sind einfach, erfordern jedoch Aufmerksamkeit, wenn Sie möchten, dass Besucher auf Ihrer Website bleiben, während sie auf einem mobilen Gerät surfen.

In diesem Artikel werden sieben Probleme mit mobilfreundlichen Websites und deren Behebungen vorgestellt.

  • Vorgenommene Änderungen werden(Are) auf Mobilgeräten nicht angezeigt(Mobile)
  • Unfreundliche Navigation
  • Responsive Layout funktioniert plötzlich nicht mehr
  • Das Laden von Bildern dauert zu lange
  • Der wichtigste Inhalt ist nicht offensichtlich
  • Zu viel Information
  • Daten für kleine Bildschirme

Für Mobilgeräte optimierte Website-Updates werden nicht angezeigt(Mobile Friendly Website Updates Not Showing Up)

Sie haben gerade viel Zeit damit verbracht, Ihre Website zu aktualisieren. Sie sehen auf Ihrem Desktop großartig aus, werden aber nicht auf Ihrem Mobilgerät angezeigt.

Einer der häufigsten Gründe ist das Caching. Ihr mobiler Browser zeigt möglicherweise eine alte Version Ihrer Website an, die Sie zuvor heruntergeladen haben. Ein weiterer Grund kann sein, dass Ihre Website an der alten Version Ihrer Seite festhält und Ihre Änderungen nicht anzeigt.

Wenn dies das Problem ist, müssen Sie den Cache löschen, um die überarbeitete Version herunterzuladen. Ein Caching-Plugin wie WP Super Cache , W3 Total Cache oder WP Fastest Cache kann helfen, dieses Problem zu lösen.

Im Folgenden finden Sie vier Schritte, die Ihnen dabei helfen, Ihren Website-Cache und Ihren Browser zu leeren, damit die neue Version auf Ihrer für Mobilgeräte optimierten Website angezeigt werden kann.

  1. Aktualisieren Sie Ihren Browser mehrmals auf Ihrem Desktop und Mobilgerät.
  2. Testen Sie Ihre Website auf verschiedenen Mobilgeräten.
  3. Löschen Sie Ihre Website mit einem Caching-Plugin.
  4. Erkundigen Sie sich bei Ihrem Hosting-Unternehmen, ob auf Ihrem Server ein anderes Caching-System vorhanden ist, das gelöscht werden muss.

Unfreundliche Navigation(Unfriendly Navigation)

Es kann schwierig sein, ein Navigationsmenü zu erstellen, das auf Mobilgeräten gut funktioniert. Wenn Ihre Website-Navigation viele Elemente und Untermenüs enthält, ist es noch schwieriger, alles auf einen kleineren Bildschirm zu quetschen.

Wenn Sie beispielsweise nur drei oder vier Elemente in Ihrer Website-Navigation haben, sollte es auf Mobilgeräten gut aussehen. Wenn Sie jedoch mehr Elemente und Untermenüs haben, stapeln sie sich übereinander und sehen überfüllt aus.

Im Folgenden(Below) finden Sie einige Möglichkeiten, dieses Problem für eine für Mobilgeräte optimierte Website zu beheben:

  • Verwandeln Sie Ihre Navigation in ein Dropdown-Menü für mobile Geräte.
  • Zeigen Sie Ihr Navigationsmenü als Blockelemente an, sodass sie vertikal angezeigt werden.
  • Verwenden Sie ein Menüsymbol, das umgeschaltet werden kann, um weniger Platz zu beanspruchen.
  • Erstellen Sie mit jQuery ein mobiles Navigationsmenü.
  • Verwenden Sie das Hamburger -Menü (Viele Themen enthalten dies als Option oder Sie können ein Plugin verwenden( use a plugin) .)

Responsive Layout funktioniert plötzlich nicht mehr(Responsive Layout Stops Working Suddenly)

Wenn Ihre für Mobilgeräte optimierte Website plötzlich nicht mehr funktioniert, könnte dies an einem Plugin auf Ihrer Website liegen.

Die Installation eines neuen Plug-ins oder eines Updates für ein vorhandenes Plug-in könnte einen Konflikt mit anderen verursachen, der sich auf Ihr responsives Layout auswirkt.

Deaktivieren Sie zunächst jedes Plugin einzeln, um zu sehen, ob es die Ursache ist. Deaktivieren Sie sie nicht alle auf einmal, sonst wissen Sie nicht, welches Plugin der Übeltäter sein könnte.

Codeänderungen(Code) sind eine weitere mögliche Ursache. Wenn Sie versehentlich oder absichtlich Code geändert haben, stellen Sie die ursprüngliche Codebasis wieder her und prüfen Sie, ob Ihre responsive Website wieder funktioniert.

Wenn Sie Ihre Website auf mobile Reaktionsfähigkeit überprüfen, sollten Sie sie immer auf einem mobilen Gerät testen. 

Manchmal scheint es zu funktionieren, wenn Sie die Größe des Browserfensters auf Ihrem Desktop ändern, wird aber auf Mobilgeräten nicht richtig angezeigt.

Wenn eine Codezeile in einer HTML - Header-Datei fehlt, kann dies das responsive Design beeinträchtigen. Diese einzelne Zeile fehlenden Codes führt dazu, dass Ihr Mobilgerät davon ausgeht, dass es sich bei der von Ihnen angezeigten Website um eine Website in voller Größe handelt.

Die gerenderte Website hat die Größe des Darstellungsbereichs (die Größe des Bereichs der Webseite, der für den Benutzer sichtbar ist).

Um Ihre für Mobilgeräte optimierte Website zu reparieren, fügen Sie dem Header-Abschnitt die folgende Codezeile hinzu:

<meta name=”viewport” content=”width=device-width”>

Wenn ein Design aktualisiert wird, kann dieser Code manchmal verschwinden.

Das Laden von Bildern dauert zu lange(Images Are Taking Too Long to Load)

Das Optimieren von Bildern und das Reduzieren der Bilddateigröße(reducing image file size) ist sinnvoll. Große Bilder, die nicht optimiert sind, können die Ladegeschwindigkeit Ihrer Webseiten verlangsamen. Dies kann für mobile Benutzer frustrierend sein.

WordPress Version 4.4 und höher stellt automatisch die kleinste Version eines Bildes auf Ihrem Server bereit.

Wenn Sie bereits die neueste Version von WordPress verwenden, Ihre Website aber immer noch nicht schnell genug lädt, können Sie:

Der wichtigste Inhalt ist nicht offensichtlich(Most Important Content Isn’t Obvious)

Einige Websites werden mit vielen unnötigen Inhalten geladen, um den leeren Raum zu füllen, wenn sie auf einem Desktop geöffnet werden.

Unter diese Kategorie fallen im Allgemeinen Websites, die ohne Kenntnis der mobilen Benutzer entwickelt wurden. Diese Seiten benötigen mehr Zeit und Bandbreite zum Laden.

Wenn die Seiten nicht für Mobilgeräte geeignet sind, wird ein Teil des Inhalts möglicherweise nicht ohne viel Scrollen auf Mobilgeräten angezeigt.

Meistens sieht ein Element auf Ihrer Webseite auf einem Computer so aus und auf einem mobilen Gerät ganz anders.

Beispielsweise zeigt eine Preisseite mit drei Spalten diese nebeneinander auf einem Computer an.

Auf einem mobilen Gerät werden die Spalten jedoch übereinander gestapelt, da die Bildschirmgröße kleiner ist. Dieses Verhalten ist zu erwarten.

Stellen Sie(Make) sicher, dass sich Ihre Preistabelle an einer obersten Position auf Ihrer Webseite befindet, damit sie bei der Anzeige auf Mobilgeräten zuerst angezeigt wird. Wenn Sie viel Text über Ihrer Tabelle haben, müssen mobile Benutzer nach unten scrollen, um ihn zu sehen, und möglicherweise nicht.

Platzieren Sie für die optimale mobile Benutzererfahrung die kritischsten Inhalte oben auf der Seite. Wenn ein Benutzer viel scrollen muss, bevor er Ihre Inhalte sehen kann, wird er dies wahrscheinlich nicht tun.

Zu viel Information(Too Much Information)

Websites mit komplizierten Benutzeroberflächenelementen wie Tabellen, mehrstufigen Formularen und erweiterten Suchfunktionen können zu einer schlechten mobilen Benutzererfahrung führen.

Diese Elemente enthalten zu viele Informationen, die einen mobilen Bildschirm überfüllen und einen Benutzer daran hindern können, die gewünschten Informationen zu finden.

Ein Ansatz besteht darin, einige Inhalte für mobile Benutzer zu entfernen oder zu verbergen. Dies ist jedoch keine ideale Lösung für Besucher, die Zugang zu diesen Elementen haben möchten.

Um dieses Problem zu vermeiden, optimieren Sie Ihre für Mobilgeräte optimierte Website so weit wie möglich. Entfernen Sie außerdem alle unnötigen Elemente, während Sie sich auf die Kernstruktur Ihrer Website konzentrieren.

Daten für kleine Bildschirme(Data For Small Screens)

Komplexe Tabellen mit vielen Zeilen und Spalten können ein Problem darstellen, wenn sie auf kleinen mobilen Bildschirmen angezeigt werden. Die beste Lösung ist die Verwendung von responsiven Tabellen.

Ein Plugin wie WP Responsive Table kann dies leicht bewerkstelligen.

Wie bei der obigen Preistabelle werden die Spalten bei der Anzeige auf einem Mobilgerät so gestapelt, dass sie auf den kleineren Bildschirm passen.

Andere Möglichkeiten, Daten auf Mobilgeräten anzuzeigen, sind:

  • Erstellen einer kleineren Tabelle ohne Rasterlayout, um horizontales Scrollen zu vermeiden.
  • Kippen eines Tisches auf die Seite, damit er besser auf einen kleineren Bildschirm passt.
  • Größere Tabellen durch kleinere ersetzen, die auf die Vollversion verlinken.
  • Tabellen in Tortendiagramme umwandeln.

Da die mobile Nutzung exponentiell zunimmt, ist es zwingend erforderlich, dass Unternehmenswebsites mit mobilfreundlichen Versionen optimiert werden. Verbessern Sie(Enhance) die Benutzererfahrung, ohne die Funktionalität zu beeinträchtigen, indem Sie die obigen Schritte ausführen.

Sie sollten auch immer die Leistung Ihrer Website überwachen und bei Bedarf Anpassungen vornehmen, um die Leistung und das Benutzererlebnis zu verbessern.



Max Richter

About the author

Ich habe einen Hintergrund in Computertechnik und Informationstechnologie, der mir eine einzigartige Perspektive auf die Plattformen Windows 10 und 11 verschafft hat. Insbesondere bin ich sowohl mit der Windows 10 „Desktop Experience“ als auch mit dem Microsoft Edge-Browser erfahren. Meine Erfahrung mit diesen beiden Plattformen gibt mir ein tiefes Verständnis dafür, wie sie funktionieren, und mein Fachwissen in diesen Bereichen ermöglicht es mir, zuverlässige Ratschläge zu geben, wie sie verbessert werden können.


Related posts