Kompatibilität:

WebSite X5 Evo und Pro

Bei der Erstellung einer responsiven Website ist die korrekte Konfiguration von Breakpoints, Layout und Inhalten nur ein Teil der Arbeit. Vor der Veröffentlichung ist es entscheidend zu überprüfen, ob sich alle Seiten tatsächlich wie vorgesehen an die verschiedenen Auflösungen anpassen.


WebSite X5 stellt Werkzeuge für die lokale Vorschau zur Verfügung, mit denen Sie das responsive Verhalten der Website simulieren, die Anordnung der Objekte überprüfen und mögliche Layoutprobleme schnell erkennen können, bevor die Website online geht.


Warum die Website in der Vorschau überprüfen

Die responsive Vorschau ermöglicht es Ihnen:

  • das Verhalten des Layouts bei verschiedenen Breakpoints zu überprüfen;
  • Lesbarkeit und Benutzerfreundlichkeit zu kontrollieren;
  • die Anordnung der Inhalte zu testen;
  • Fehler bei der Reihenfolge oder Sichtbarkeit zu erkennen;
  • die Benutzererfahrung vor der Veröffentlichung zu optimieren.


Dieser Schritt ist entscheidend, um ein professionelles Ergebnis auf Desktop, Tablet und Smartphone sicherzustellen.


Wie überprüft man eine responsive Website in WebSite X5

1. Lokale Vorschau starten

  • Gehen Sie zu Schritt 4 - Seiten.
  • Öffnen Sie die Seite, die Sie überprüfen möchten.
  • Klicken Sie auf die Schaltfläche Vorschau, um den internen Browser zu öffnen.

2. Verwenden Sie die Auflösungsleiste

  • Im internen Browser finden Sie eine Leiste, die alle aktiven Breakpoints mithilfe von Farben anzeigt.
  • Klicken Sie auf die Schaltflächen  für die verschiedenen Breakpoints: Das Browserfenster wird automatisch auf die entsprechende Auflösung angepasst, sodass Sie die Darstellung der Seite überprüfen können.
  • Alternativ können Sie das Browserfenster manuell in der Größe verändern, um das dynamische Verhalten des Layouts zu beobachten.

3. Website auf mobilen Geräten testen (nur Pro)

  • Wenn Sie WebSite X5 Pro verwenden, klicken Sie auf die Schaltfläche Mobile Vorschau.
  • Es werden ein QR-Code und eine dedizierte URL generiert.
  • Verbinden Sie Ihr Smartphone oder Tablet mit demselben Netzwerk wie Ihren PC, scannen Sie den QR-Code oder öffnen Sie die angegebene URL. So können Sie die Vorschau Ihrer Website direkt auf Ihrem Gerät anzeigen und das Verhalten bei der mobilen Nutzung überprüfen.

4. Überprüfen Sie die Reihenfolge der Inhalte

  • Wenn Sie in der Vorschau feststellen, dass Inhalte nicht wie erwartet angeordnet sind, klicken Sie auf die Schaltfläche Nummerierung anzeigen.
  • Jeder Inhalt wird mit der Nummer hervorgehoben, die dem jeweiligen Objekt im responsiven Sortierungsprozess zugeordnet ist.
  • So können Sie leichter nachvollziehen, welche Anpassungen erforderlich sind, um das gewünschte Ergebnis zu erzielen.


Praktische Hinweise

Für effektivere Überprüfungen:

  • überprüfen Sie alle Seiten der Website;
  • kontrollieren Sie jeden aktivierten Breakpoint;
  • testen Sie sowohl Desktop als auch mobile Geräte;
  • verwenden Sie die Nummerierung, um Fehler in der Reihenfolge zu korrigieren;
  • wiederholen Sie die Überprüfung nach jeder wichtigen Änderung.


Zusammenfassung

Die lokale Vorschau ist ein unverzichtbares Werkzeug, um die responsive Qualität Ihres Projekts vor der Veröffentlichung zu überprüfen.


Mit WebSite X5 können Sie Layout, Inhalte und das Verhalten der Seiten bei jeder Auflösung visuell kontrollieren, Fehler reduzieren und die Benutzererfahrung verbessern.


Eine sorgfältige Überprüfung ermöglicht es Ihnen, professionellere, zuverlässigere und effektivere Websites auf jedem Gerät zu veröffentlichen.