So bearbeiten Sie die mobile Version der WordPress-Site
Warum ist die mobile Version Ihrer Website entscheidend für Ihren Erfolg?
Beginnen wir mit der Tatsache, dass mehr als 50 % des weltweiten Internetverkehrs von Mobiltelefonen stammt. Dies bedeutet buchstäblich, dass mehr als die Hälfte Ihrer Kunden Ihre Website von ihrem Handy aus besuchen. Ab 2018, als Google die Mobile-First-Indexierung von Websites einführte, ist responsives Webdesign nur noch wichtiger geworden, und die Konzentration auf das mobile Erlebnis einer Website wurde logischerweise zu einer Priorität für alle, die ihr Geschäft ernst nehmen. Ein weiterer wichtiger Vorteil mobilfreundlicher Websites ist, dass sie einfach und intuitiv sind. Sie bieten eine reibungslose Benutzererfahrung und erleichtern potenziellen Kunden die Kontaktaufnahme mit Ihnen. Außerdem laden sie schnell und machen das Teilen von Inhalten einfach und natürlich. Eine Möglichkeit, über eine reaktionsschnelle Website nachzudenken, besteht darin, sie als kostenlose Möglichkeit zu sehen, in Suchmaschinen besser zu ranken. Warum sollten Sie diese Gelegenheit verpassen? Je besser Ihr Rang ist, desto mehr organische Suchergebnisse erhalten Sie, was mehr Leads und mehr Conversions bedeutet.
So zeigen Sie eine Vorschau der mobilen Version Ihrer Website an
Ein responsives WordPress-Theme garantiert viele Vorteile, aber Sie müssen trotzdem in Echtzeit überprüfen, wie Ihre Website auf Smartphones aussieht. Es gibt viele mögliche Variationen bei Bildschirmgrößen und Browsern, sodass keine der mobilen Vorschauen Ihnen eine perfekte und 100 % genaue Vorschau bieten kann. Sie sollten sich immer auf die reale Erfahrung verlassen, die Sie beim Betrachten Ihrer Website auf einem echten Smartphone oder Mobilgerät erhalten. Dies könnte Sie dazu inspirieren, Ihre wichtigsten Zielseiten zu optimieren und verschiedene Versionen zu erstellen, die für das mobile Erlebnis optimiert sind.
Sehen wir uns also an, wie Sie auf zwei verschiedene Arten eine Vorschau anzeigen können, wenn Sie eine für Mobilgeräte optimierte WordPress-Site haben.
Verwendung des Theme Customizer von WordPress
Die erste und einfachste Möglichkeit, die Vorschau der mobilen Version anzuzeigen, ist die Verwendung des Theme Customizer von WP. Das Verfahren ist einfach. Melden Sie sich bei Ihrem WordPress- Dashboard an und gehen Sie zu Darstellung > Anpassen.
Nachdem Sie auf den WordPress Theme Customizer geklickt und ihn geöffnet haben, sehen Sie alle Optionen im Menü auf der linken Seite. Abhängig von dem von Ihnen verwendeten Thema können einige Variationen in den angebotenen Optionen vorhanden sein.
Beachten Sie das mobile Symbol am unteren Rand des Bildschirms. Klicken Sie darauf und Sie sehen eine Vorschau, wie Ihre Website auf Mobilgeräten aussieht.
Wenn Sie die blauen Bearbeitungssymbole verwirren – keine Sorge. Sie sind nur in der Vorschau sichtbar und niemals auf Ihrer Live-Site.
Tipp: Wenn Sie Ihren Blog noch nicht gestartet haben oder sich im Wartungsmodus befinden, ist diese Vorschaumethode sehr praktisch, da Sie damit Änderungen vornehmen und prüfen können, wie sie aussehen, bevor Sie Ihre Website live schalten .
Verwenden des Gerätemodus der Entwicklertools von Google Chrome
Wenn Sie sich aus irgendeinem Grund nicht wohl fühlen, den WP Theme Customizer zu verwenden, können Sie jederzeit überprüfen, ob Sie mit dem Google Chrome-Browser WordPress für Mobilgeräte optimiert haben. Es ist auch ein sehr einfaches und leichtes Verfahren, das aus ein paar Schritten besteht.
Öffnen Sie einfach Ihren Google Chrome-Browser wie gewohnt und gehen Sie zu der Seite, die Sie überprüfen möchten. Klicken Sie dann mit der rechten Maustaste auf die Seite und wählen Sie Inspect.
Beachten Sie, dass Sie auf diese Weise eine Vorschau jeder Seite auf jeder Website sehen können, nicht nur auf Ihrer. Es könnte sogar die Website Ihres Konkurrenten sein.
Auf der rechten Seite öffnet sich ein neues Fenster und sieht so aus:
In der Entwickleransicht können Sie den HTML-Quellcode Ihrer Website anzeigen.
Klicken Sie nun auf die Schaltfläche Toggle Device Toolbar, um zur mobilen Ansicht zu gelangen.
Sie werden einige Änderungen in der mobilen Vorschau bemerken: Ihre Website wird verkleinert, um sie an die mobile Bildschirmgröße anzupassen, und andere Änderungen können stattfinden. Achten Sie genau auf die Unterschiede und notieren Sie, was Sie ändern sollten.
Überprüfen Sie, was passiert, wenn Sie versuchen, Ihren Mauszeiger über die mobile Ansicht zu bewegen – es wird ein Kreis.
Der Sinn des Kreises besteht darin, den Touchscreen eines Mobilgeräts nachzuahmen.
Tipp: Wenn Sie sehen möchten, wie Ihr mobiler Bildschirm ein- und auszoomt, halten Sie die Umschalttaste gedrückt und klicken und bewegen Sie Ihre Maus.
Der Vorteil dieser Methode zur Vorschau Ihrer mobilen Website besteht darin, dass Sie sehen können, wie die Seite auf verschiedenen Arten von Smartphones aussieht. Diese zusätzlichen Optionen befinden sich über der mobilen Ansicht Ihrer Website. Egal, welche Art von Vorschau Sie geöffnet haben, als Sie auf Toggle Device Toolbar geklickt haben, hier können Sie die Bildschirmgröße des Geräts ändern.
Tipp: Verwenden Sie das Drehen-Symbol in der oberen rechten Ecke, um den mobilen Bildschirm zu drehen. Sie können Elemente auf der Seite auch überprüfen, indem Sie mit der rechten Maustaste klicken und die Option Überprüfen auswählen.
Warum ist Page Builder wichtig für RWD?
RWD ist etwas, worüber Sie von Anfang an bei der Erstellung Ihrer Website sorgfältig nachdenken müssen. Es gibt viele Dinge zu analysieren, wenn Sie Ihre Website auf verschiedenen Bildschirmgrößen gleichermaßen attraktiv, navigierbar und effektiv gestalten müssen. WordPress-Seitenersteller spielen in diesem Prozess eine entscheidende Rolle, sie liefern Ihnen die Eckpfeiler des Designs Ihrer Website, daher müssen Sie sich gut informieren, bevor Sie die Wahl treffen. Wenn Sie also etwas Zeit in die Recherche zu Seitenerstellern investieren, sparen Sie tatsächlich viel Zeit, die Sie für die Erstellung Ihrer Website aufwenden können.
Basierend auf unserer Erfahrung sind WPBakery und Elementor eine ausgezeichnete Wahl, da sie ein breites Spektrum an unterschiedlichen Anforderungen erfüllen können.
Wenn Sie ein begrenztes Budget haben, ist Elementor die beste Wahl. Es ist ein einfach zu bedienendes, anfängerfreundliches Plugin, das eine sehr großzügige kostenlose Version mit einem soliden Satz von Elementen hat. Es lässt sich auch gut in andere führende WP-Plugins und -Dienste wie MailChimp, WooCommerce, HubSpot, Yoast SEO usw. integrieren. Wenn Sie sich ein Premium-Plugin leisten können, wird WPBakery Page Builder Sie nie enttäuschen. Es kommt mit einer unglaublich großen Sammlung von Elementen, einer Fülle von Blöcken und Optionen. Es ist auch einfach zu bedienen und lässt viel Kreativität zu.
Obwohl Seitenersteller für RWD unerlässlich sind, ist das Design, das Sie verwenden möchten, ebenfalls wichtig, da es einige erstaunliche Funktionen bieten kann. Wie Sie vielleicht wissen, entwickeln Themenautoren spezifische Widgets und Elemente, die separat von Seitenerstellern angepasst werden können. Viele dieser Elemente ermöglichen es Ihnen, die Reaktionsfähigkeit nach Ihren Bedürfnissen einzustellen. Aus diesem Grund sollten Sie das Thema wählen, das von bekannten, vertrauenswürdigen Autoren entwickelt wurde. Dies ist besonders wichtig, wenn Sie ein kostenloses WordPress-Theme verwenden möchten. Um Ihre Zeit und Nerven zu sparen, haben wir unzählige kostenlose Themen getestet. Wenn Sie also ein ansprechendes, funktionsreiches und zuverlässiges kostenloses Design verwenden möchten, empfehlen wir Ihnen, das Qi -Design auszuprobieren .
So bearbeiten Sie die mobile Version Ihrer Website in Elementor
Man kann mit Sicherheit sagen, dass Elementor bei weitem der beste Seitenersteller ist, wenn es darum geht, die mobile Version Ihrer Website zu bearbeiten. Es kann vorkommen, dass Sie dieses kleine Symbol namens Ansichtsfenster-Symbol in den Einstellungen übersehen haben :
Dieses Symbol zeigt an, dass jeder Wert, neben dem es steht, separat für die Desktop- und für die mobile Site-Version bearbeitet werden kann. Nehmen wir zum Beispiel die Einstellungen für die Spaltenbreite – Sie können den Wert für Desktop, Mobilgerät und Tablet anpassen. Der Wert, den Sie für jedes Gerät eingeben, gilt nur für das ausgewählte Gerät. Beachten Sie, dass neben dem HTML-Tag kein Symbol angezeigt wird, was bedeutet, dass es für jedes Gerät denselben Wert hat.
Falls Sie den Wert für das mobile Gerät ändern möchten, müssen Sie nur die mobile Layoutoption auswählen und die gewünschten Werte eingeben (diese Werte werden nur auf mobilen Geräten implementiert). Auf der rechten Seite des Bildschirms haben Sie die Live-Vorschau aller Änderungen, die Sie vornehmen, damit Sie sofort sehen können, wie die neuen Werte auf dem Gerät aussehen werden.
Um zur Desktop-Ansicht zurückzukehren, müssen Sie zur Desktop-Layout-Option wechseln. Sie können dies tun, wie wir oben erwähnt haben, oder indem Sie dieses kleine Symbol im unteren Menü auf der Seite verwenden :
Eine weitere wichtige Sache, die im Zusammenhang mit der Reaktionsfähigkeit erwähnt werden muss, ist, dass die Spalten und Zeilen für einzelne Geräte deaktiviert werden können, dh wir können sagen, dass sie auf einigen Bildschirmgrößen nicht sichtbar (oder sichtbar) sein werden.
Um auf diese Option zuzugreifen, folgen Sie dem Pfad:
- Klicken Sie mit der rechten Maustaste auf die Zeile/Spalte
- Wählen Sie Abschnitt bearbeiten
- Klicken Sie auf die Registerkarte Erweitert
- Wählen Sie das Dropdown-Menü Responsiv aus
Diese Option ist sehr wichtig, falls wir einen Abschnitt haben, von dem wir wissen, dass er nur für die Anzeige auf dem Desktop sinnvoll ist, also werden wir ihn auf anderen Geräten stornieren. Und um das Fehlen auszugleichen, können wir einen Abschnitt erstellen, der auf allen anderen Geräten außer dem Desktop angezeigt wird.
Wenn es um Spalten geht, finden wir auch die Option "Spalte umkehren" (Tablet / Mobile). Am besten erklärt man sich das an einem Beispiel. Nehmen wir an, wir haben einen Abschnitt wie diesen auf dem Desktop, in dem der Inhalt in zwei Spalten mit Bildern aufgeteilt ist, gefolgt von einem kurzen Text :
Auf mobilen Geräten wird der Inhalt natürlich wie im Bild unten neu angeordnet, wobei der ursprünglichen Reihenfolge vom Desktop gefolgt wird:
Die umgekehrte Spaltenoption ermöglicht es uns, die Reihenfolge eines bestimmten Abschnitts für mobile Geräte oder Tablet-Layouts zu ändern. Wenn wir dies für den ersten Abschnitt auf kleineren Geräten tun, ist das Ergebnis effektiver angezeigter Inhalt:
So bearbeiten Sie die mobile Version Ihrer Website mit Plugins
Früher oder später werden Sie versucht sein, eine Vielzahl von Plugins zu verwenden, die es Ihnen leicht machen, Ihrer Website eine Seitenleiste, einen CTA, ein Widget oder ein ähnliches Element hinzuzufügen. Dies ist der Moment, in dem viele vergessen, dass eine Seitenleiste oder ein anderes Element, das auf einem Desktop-Bildschirm perfekt funktioniert, auf Mobilgeräten möglicherweise nicht so gut ist. Bevor Sie also diese praktischen Tools nutzen, prüfen Sie, ob sie auch reaktionsschnell sind. Die Wahrheit ist, viele von ihnen sind und können Ihnen tatsächlich dabei helfen, UX zu verbessern. Aber um das sicher zu wissen, lesen Sie die Rezensionen oder finden Sie eine Demo, bevor Sie eine installieren. Solange sich das Plugin auf Mobilgeräten gut verhält, können Sie sicher sein, dass Ihre Website auf Erfolgskurs ist. Vergessen wir auch nicht, dass Ihre Optionen je nach verwendetem Thema sehr unterschiedlich sind. Ein Premium-Themagarantiert sicherlich viel mehr Möglichkeiten.
Responsives Menü – Der erste Eindruck zählt
Das Menü ist die Säule der Benutzererfahrung. Es ist das erste oder eines der ersten Dinge, auf die jemand klickt, wenn er Ihre Website besucht. Es wirkt sich darauf aus, wie schnell der Besucher findet, wofür er gekommen ist, wie lange er bleibt und viele andere Aspekte von UX. Es ist wichtig, ein schönes, gut strukturiertes Menü zu haben, das die Navigation reibungslos macht, aber es ist nicht so einfach, wie es scheint. Möglicherweise haben Sie ein großartiges Menü, das auf einem Desktop perfekt funktioniert, aber für ein Handy zu schwer ist. Eine Lösung in diesem Fall besteht darin, Ihre Desktop-Version auch an die mobile Bildschirmgröße anzupassen. Aber was, wenn dadurch zu viele nützliche Informationen verloren gehen? In diesem Fall können Sie ein anderes Menü erstellen, das nur für die Bildschirmgröße von Mobilgeräten angepasst ist. Viele WP-Themes bieten die Möglichkeit, dies zu tun. Wenn Ihr Thema nicht dazu gehört, machen Sie sich keine Sorgen, es gibt vieletolle Plugins für responsive Menüs. Unsere Empfehlung ist das Responsive Menu-Plugin, das mehr als 150 Optionen zur Anpassung enthält und keine Programmierkenntnisse erfordert. Sie können damit Animationen und Hintergrundbilder hinzufügen, die Position von Menüschaltflächen festlegen und vieles mehr. Es ist unglaublich einfach zu bedienen und daher besonders praktisch für absolute Anfänger.
Bilder und Galerien
Ein Bild spricht Tausende von Sprachen, stellen Sie also sicher, dass Ihr Bild auf jeder Bildschirmgröße genauso umwerfend aussieht. Wir leben in einer sehr visuell orientierten Kultur, und egal in welcher Nische Sie sich bewegen, großartige Fotos sind ein Muss. Aber egal, wie großartige Bilder Sie haben, wenn sie langsam geladen oder nicht ordentlich präsentiert werden, laufen Sie Gefahr, einen erheblichen Prozentsatz Ihres Publikums zu verlieren. Um dieses Szenario zu vermeiden, empfehlen wir das Envira Gallery Lite-Plug- in, mit dem Sie leistungsstarke Galerien wie ein Profi erstellen können. Einige seiner Vorteile sind, dass es hochgradig für die Web- und Serverleistung optimiert ist, was eine gute Nachricht für Ihre SEO ist.
Social-Sharing-Schaltflächen
Wenn Sie ein großartiges, ansprechendes Menü und beeindruckende Galerien haben, müssen Sie sich als Nächstes um die Social-Sharing-Schaltflächen kümmern. Ihre Größe sollte dem Gerät angepasst sein. Ein großer Button auf einem kleinen Bildschirm lässt den Besucher okzidental klicken, und das ist ziemlich irritierend. Andererseits sind kleine Buttons auf einem großen Bildschirm nicht so leicht zu erkennen. Ein Plug-in, mit dem Sie benutzerdefinierte Schaltflächen erstellen können, ist das Sassy Social Share-Plug- in. Einfach zu bedienen, völlig kostenlos und anfängerfreundlich, macht es das Teilen für Sie und die Besucher Ihrer Website zum Kinderspiel.
Mobile Firendly-Websites
In Situationen, in denen Sie Ihre Website schnell mobil reagieren müssen, gibt es keine bessere Lösung als ein Plugin wie WPtouch. Dieses Plugin ist so gestaltet, dass es Ihrer WP-Site automatisch ein einfaches und elegantes mobiles Design hinzufügt. Die Tatsache, dass es von Google empfohlen wird, sagt viel über seine Wirksamkeit aus. Selbst wenn Sie also keine mobile Version Ihrer Website haben, kann ein Plugin wie dieses sofort eine für Mobilgeräte optimierte Version Ihrer Website aktivieren, sodass Sie Ihr Ranking nicht verlieren. Außerdem können Sie viele Aspekte des Erscheinungsbilds der Website anpassen.
Die Ladegeschwindigkeit von Seiten ist auch ein sehr wichtiger Aspekt der Benutzererfahrung, insbesondere auf Mobilgeräten. Wenn Sie in diesem Bereich vor einigen Herausforderungen stehen, sollten Sie das Accelerated Mobile Pages -Plug-in verwenden, da dies eine der schnellsten und einfachsten Möglichkeiten ist, die Ladegeschwindigkeit Ihrer Website zu verbessern.
Vermeiden Sie das Hinzufügen von Popups auf Mobilgeräten
Popups sind selten amüsant, aber auf Mobiltelefonen sind sie besonders irritierend. Sie bedecken einen großen Teil des Bildschirms und verlangen von einem Besucher, sie zu schließen, bevor er auf den Inhalt der Seite zugreift. Daher ist es am besten, sie in der mobilen Version Ihrer Website vollständig zu vermeiden. Wie Sie sie vermeiden, hängt hauptsächlich von Ihrem Dienstanbieter ab, aber die meisten von ihnen haben eine Option, um aufdringliche Popups auf Mobiltelefonen zu deaktivieren. Denken Sie auch daran, dass Google Websites mit sehr aufdringlichen Popups bestraft.
Abschließend
Da die Anzahl der Personen, die Smartphones für den Zugriff auf das Internet verwenden, stetig zunimmt, ist es sinnvoll, viel mehr Lösungen und Optionen für die mobilen Versionen von Websites zu erwarten. Designer arbeiten hart daran, die Fülle von Nutzungsmustern anzugehen, aber die Grundlagen von RWD sind die gleichen – stellen Sie sicher, dass Sie ein mobilfreundliches WP-Thema und einen Seitenersteller wählen, der alle Optionen bietet, die Sie benötigen.
Wie reaktionsschnell ist Ihre Website also? Müssen Sie viele Änderungen vornehmen, um es mobilfreundlicher zu machen? Teilen Sie uns Ihre Antworten mit und fragen Sie im Kommentarbereich nach weiteren Informationen.