So zeigen Sie eine mobile Version Ihrer Website auf dem Desktop an

Heutzutage ist es äußerst wichtig sicherzustellen, dass Ihre Website und alle ihre Seiten auf Mobilgeräten gut aussehen. Die Anzahl der Benutzer, die Websites von Mobilgeräten aus durchsuchen, wird jeden Tag größer, weshalb dies auch der Fall ist Mobile-freundliches Design gehört zu den Top-Ranking-Faktoren für Google. Um das Beste aus Ihrer SEO-Strategie herauszuholen, sollten Sie daher darauf achten, dass die mobile Version Ihrer WordPress-Seite einfach perfekt aussieht. Aber um all dies zu ermöglichen, müssen Sie Finden Sie eine Möglichkeit, die mobile Version Ihrer Website zuerst auf dem Desktop anzuzeigen.

Glücklicherweise gibt es viele verschiedene Möglichkeiten, wie Sie überprüfen können, wie Ihre Website aussieht, wenn sie von einem mobilen Gerät aus angezeigt wird, und dieses Mal werden wir sie alle auflisten. Einige dieser Methoden sind universell für jede Website-Plattformaber wir werden auch aufnehmen Möglichkeiten, dies zu tun, wenn Sie eine WordPress-basierte Website besitzen und Ihre Seiten testen möchten, während Sie an der Website selbst arbeiten. Lesen Sie unbedingt weiter, während wir Ihnen die folgenden Methoden zeigen, um die mobile Version Ihrer Website anzuzeigen:

Zeigen Sie die mobile Version Ihrer Website mit dem Inspect Element Tool Ihres Browsers an

Um die mobile Version Ihrer Website anzuzeigen, können Sie einfach die Entwicklertools verwenden, die mit Ihrem Browser geliefert werden. Die meisten bekannten Browser (wie Google Chrome, Safari, Firefox, Microsoft Edge und andere) bieten Ihnen die Möglichkeit, zu sehen, wie Ihre Website auf mobilen und anderen Geräten aussieht. Dazu gehören natürlich auch Tablets, Laptops etc.

Wir werden Chrome und sein Inspect Element-Tool für unser Beispiel verwenden. Beachten Sie jedoch, dass abgesehen von einem geringfügigen Unterschied in der Benutzeroberfläche die Optionen zum Anzeigen der mobilen Version Ihrer Website ähnlich sind.

Um auf das Inspect-Tool Ihres Browsers zuzugreifen, müssen Sie nur Klicken Sie mit der rechten Maustaste auf Ihre Seite und klicken Sie auf Prüfen.

Seite prüfen

Dadurch wird ein neuer Bildschirm geöffnet, der Ihnen verschiedene Seitenelemente zeigt. Was Sie jetzt tun müssen, ist finde die Gerätesymbolleiste umschalten Taste (das Symbol in Form eines Telefons/Tablets) und klicken Sie darauf.

Gerätesymbolleiste umschalten

Dadurch wird die mobile Ansicht Ihrer Seite angezeigt, dh Ihre Seite wird so angezeigt, wie sie auf Mobilgeräten und/oder anderen Geräten angezeigt würde. Außerdem können Sie in der oberen Ecke Ihres Bildschirms die Abmessungen entsprechend dem Gerät ändern, dessen Ansicht Sie überprüfen möchten.

Verwandt :  „Sie war dort geklettert, wo sie hin musste“, lässt Craig Tyzzer BOMBSHELL fallen, indem er enthüllt, dass Ashleigh Bartys Rücktritt ihn nicht überrascht hat
Werkzeuggerät prüfen

Wenn Sie sich beispielsweise für das iPhone 12 Pro entscheiden, können Sie die genaue Ansicht des iPhone 12 Pro-Telefons sehen, da es angepasst wird, um die Abmessungen dieses Geräts zu simulieren.

Ebenso können Sie die mobile Version Ihrer Website auf dem Samsung Galaxy S8+ anzeigen, wenn Sie auf die gleichnamige Option klicken:

Inspizieren Sie das Tool Samsung-Gerät

Stellen Sie sicher, dass Sie jede verfügbare Option in der Dropdown-Liste ausprobieren, um sicherzustellen, dass Ihre Website auf jedem Mobilgerät unabhängig von Modell oder Größe gut und reaktionsschnell aussieht.

Zeigen Sie die mobile Version Ihrer Website mit einem Online-Emulator-Tool an

Es gibt viele Online-Emulatoren, mit denen Sie die Reaktionsfähigkeit Ihrer Website testen können. Sie funktionieren normalerweise so, dass Sie einfach die URL Ihrer Seite einfügen und dann überprüfen können, wie diese Seite auf einem bestimmten Mobilgerät aussieht.

Wir empfehlen die Verwendung von Tools wie Bluetree’s Bildschirmfliege Screen-Testing-Tool bzw responsivepx, zum Beispiel. Natürlich gibt es viele andere ähnliche Tools online, die Sie leicht finden können, indem Sie einfach bei Google danach suchen. Aber für die Zwecke dieses Artikels haben wir uns entschieden, Ihnen zu zeigen, wie Sie dies mit dem Screenfly-Responsive-Testing-Tool tun können.

Sobald Sie auf die Homepage von Screenfly zugegriffen haben, können Sie einfach Geben Sie die Seiten-URL in die Suchleiste ein und klicken Sie dann auf gehen Taste.

Bildschirmfliege gehen

Direkt darunter sehen Sie verschiedene Optionen, die Sie auswählen können, um zu sehen, wie Ihre Seite auf verschiedenen Mobilgeräten und Tablets aussieht. Dazu gehören iPhone, iPad, Chromebook, einige der beliebten Samsung Galaxy-Modelle und viele mehr.

Screenfly-Telefon und iPad

So sieht unsere Seite beispielsweise aus, wenn wir Samsung Galaxy S7 auswählen:

Screenfly Samsung Galaxy

Zeigen Sie die mobile Version Ihrer Website mithilfe der WordPress-Seiten-/Beitragsvorschau an

Wenn Sie eine WordPress-Site besitzen und von der WordPress-Site selbst sehen möchten, wie sie auf Mobilgeräten aussieht, werden Sie erfreut sein zu hören, dass dies ganz einfach ist. WordPress verfügt nämlich über einige integrierte Optionen, mit denen Sie die mobile Version Ihrer Website sehen können, während Sie Ihre Seiten und Beiträge bearbeiten.

Zuerst müssen Sie Kopf zu Seiten >> Alle Seiten (oder Beiträge >> Alle Beiträge). und dann traf die Bearbeiten Schaltfläche unterhalb der betreffenden Seite/des betreffenden Beitrags.

Seiten Alle Seiten

Sobald Sie sich auf dem Bearbeitungsbildschirm Ihrer Seite (oder Ihres Beitrags) befinden, können Sie und sehen benutze die Vorschau Verknüpfung (es wird in der oberen rechten Ecke Ihrer Seite verfügbar sein). Klicken Sie auf diesen Link und Sie werden sehen, dass das neue Dropdown-Menü mit den Optionen erscheint, um eine Vorschau anzuzeigen, wie die Seite auf Desktop, Laptop und Mobilgerät aussehen wird. Die Vorschau zeigt standardmäßig die Desktop-Seite, also solltest du anklicken Handy, Mobiltelefon um zu sehen, wie Ihre Seite auf Mobilgeräten aussehen wird.

Mobile Vorschau
Mobile Vorschau

Wir empfehlen, dass Sie sich die mobile Ansicht jeder Seite (und jedes Beitrags) Ihrer Website einzeln ansehen. Dazu gehören Ihre Homepage, Ihre Info-Seite, Ihre Blog-Seite und die Liste geht weiter. Dann müssen Sie sicherstellen, dass alle Seitenelemente (wie Menüs, Links, Bilder, Videos usw.) richtig angezeigt werden und dass sie alle ordentlich und sauber aussehen. Überprüfen Sie auch, ob alle Ihre Links funktionieren, ob alle Seitentexte gut lesbar sind, sowie ob alle anderen Seitenelemente noch vorhanden und generell sichtbar sind.

Verwandt :  So zeigen Sie in Windows Store-Apps immer Bildlaufleisten an

Schließlich raten wir Ihnen auch, sich anzusehen, wie die verschiedenen Elemente Ihrer Seite auf dem Tablet aussehen, indem Sie auf klicken Tablette Vorschau.

Tablet-Vorschau

Zeigen Sie die mobile Version Ihrer Website mit dem WordPress Customizer an

Eine weitere großartige Möglichkeit, wie Sie überprüfen können, wie Ihre Seiten auf Mobilgeräten aussehen, ist WordPress Anpasser Bildschirm. Die Verwendung dieses Bildschirms ist sehr praktisch, da Sie während des gesamten Bearbeitungsprozesses eine sofortige Live-Vorschau jedes Elements haben. Und natürlich können Sie auch Seitenbearbeitungen vornehmen, während Sie eine Vorschau anzeigen, wie sie auf Mobilgeräten aussieht.

Dazu einfach Zugriff Aussehen >> Anpassen.

Aussehen anpassen

Sie werden sehen, dass der Standard-Customizer Ihnen die Desktop-Vorschau zeigt.

Customizer-Desktop-Ansicht

Sie können dies leicht ändern, indem Sie Wählen Sie das mobile Symbol in der unteren linken Ecke des Bildschirms:

Customizer Mobile Ansicht

Dadurch erscheint die gesamte Benutzeroberfläche Ihrer Seite schmaler und simuliert die Größe der mobilen Seite. Sie müssen jedoch beachten, dass dies nur eine ungefähre Simulation einer mobilen Seite ist, da es viele verschiedene Handys mit unterschiedlichen Bildschirmgrößen gibt.

Customizer Mobile Vorschau

Vergessen Sie noch einmal nicht, zu überprüfen, wie Ihr mobiles Menü, Ihre Bilder, Links und andere Elemente in der mobilen Ansicht aussehen.

Dinge einpacken

Das Testen der Reaktionsfähigkeit Ihrer Website auf mehreren Geräten ist unerlässlich, um sicherzustellen, dass sie sowohl benutzer- als auch suchmaschinenfreundlich ist, und das Auschecken der mobilen Version Ihrer Website ist da keine Ausnahme. Wie Sie an allen oben vorgestellten Methoden sehen konnten, gibt es viele verschiedene Möglichkeiten, wie Sie die mobile Version Ihrer Website auf dem Desktop anzeigen können. Der Prozess selbst ist so einfach wie möglich, egal ob Sie überprüfen möchten, wie Ihre Website mit dem Inspektionstool des Browsers aussieht, eines der verfügbaren mobilen Simulator-Tools verwenden oder dies direkt von Ihrer WordPress-Website aus tun möchten.

Unabhängig davon, welche Methode Sie am Ende verwenden, stellen Sie sicher, dass Sie nichts überstürzen. Denken Sie daran, jede Seite Ihrer Website separat anzuzeigen und sorgfältig durchzublättern, um zu prüfen, ob verschiedene Seitenelemente wie Menüs und Bilder funktionieren. Achten Sie vor allem darauf, dass jedes Element klar, präsentabel und absolut perfekt aussieht, um Ihren mobilen Besuchern das bestmögliche Surferlebnis zu bieten.