Kompatibilität:

WebSite X5 Evo und Pro

Bei der Gestaltung einer responsiven Website ist einer der wichtigsten Aspekte die Definition der Breakpoints. Diese Kontrollpunkte ermöglichen es dem Layout, sich korrekt an verschiedene Geräte anzupassen und eine effektive Navigation auf Desktop, Tablet und Smartphone zu gewährleisten.


Breakpoints korrekt festzulegen bedeutet, die Website so zu strukturieren, dass sich Aufbau, Inhalte und Lesbarkeit zum richtigen Zeitpunkt anpassen und den Nutzern unabhängig von der Bildschirmgröße ein konsistentes Erlebnis bieten.


Was ist ein Breakpoint

Ein Breakpoint ist ein bestimmter Punkt innerhalb der Bildschirmauflösungen, an dem sich das Layout der Website verändert, um sich besser an den verfügbaren Platz anzupassen.


In der Praxis definiert jeder Breakpoint den Übergang von einer Ansicht zur nächsten.


Das folgende Beispiel zeigt das Verhalten einer Website, für die 3 Breakpoints festgelegt wurden: bei 960px, 720px und 480px.



Mit 3 Breakpoints ergeben sich 4 verschiedene Ansichten. Dadurch gilt:

  • oberhalb von 960px kann die Website eine Desktop-Struktur beibehalten;
  • zwischen 720px und 960px kann sich das Layout an Tablets im Querformat anpassen;
  • zwischen 480px und 720px kann sich das Layout an Tablets im Hochformat anpassen;
  • unterhalb von 480px wird der Inhalt für Smartphones optimiert.


Warum Breakpoints wichtig sind

Breakpoints ermöglichen es:

  • das Layout an verschiedene Gerätekategorien anzupassen;
  • Lesbarkeit und Benutzerfreundlichkeit zu verbessern;
  • unübersichtliche Layouts zu vermeiden;
  • Bilder, Texte und Menüs zu optimieren;
  • ein professionelleres responsives Erlebnis zu bieten.


Das Ziel ist nicht, für jedes einzelne Gerät eine eigene Konfiguration zu erstellen, sondern effektive Hauptkategorien für die Darstellung zu definieren.


Referenz-Breakpoints in WebSite X5

In der Praxis werden Breakpoints meist anhand der Bildschirmgrößen der wichtigsten Gerätetypen festgelegt. Entsprechend zeigt WebSite X5 auf der Linie der Referenzauflösungen folgende Breakpoints an:

  • 960px: Desktop
  • 720px: Tablet im Querformat
  • 600px: Tablet im Hochformat
  • 480px: Smartphone im Querformat
  • Unter 480px: Smartphone im Hochformat


Diese Werte stellen einen Ausgangspunkt dar, können jedoch je nach den spezifischen Anforderungen Ihres Projekts angepasst werden.


Wie viele Breakpoints sollten verwendet werden?

Auf diese Frage gibt es keine eindeutige Antwort. Die Wahl hängt ab von:

  • der Struktur der Website;
  • der Komplexität des Layouts;
  • der Art der Inhalte;
  • der Zielgruppe;
  • dem gewünschten Grad an Anpassung.


Im Allgemeinen gilt:

  • WebSite X5 Evo ermöglicht die Verwaltung von 3 Breakpoints;
  • WebSite X5 Pro erlaubt die Konfiguration von bis zu 10 Breakpoints.


Je komplexer das Layout ist, desto größer kann der Bedarf an zusätzlichen Breakpoints sein.


So legen Sie Breakpoints in WebSite X5 fest

Nachdem Sie festgelegt haben, wie viele und welche Breakpoints aktiviert werden sollen, können Sie diese in WebSite X5 wie folgt konfigurieren:

1. Responsive Design aktivieren

  • Gehen Sie zu Schritt 2 - Template.
  • Öffnen Sie das Fenster Auflösungen und Responsive Design.
  • Bleiben Sie im Bereich Breakpoints.
  • Aktivieren Sie die Option Responsive Website.

2. Breakpoints definieren

  • Bleiben Sie im Bereich Breakpoints und definieren Sie die Liste der zu aktivierenden Breakpoints mit den Befehlen Hinzufügen, Entfernen und Bearbeiten. Sie können:
    • bestehende Breakpoints ändern;
    • neue Breakpoints hinzufügen (Pro);
    • interne Breakpoints entfernen (Pro);
    • Anpassungsschwellen individuell festlegen.
  • Alle festgelegten Breakpoints werden in der Übersichtstabelle angezeigt und im Fenster Responsive Einstellungen verwendet.

3. Verwaltungsregeln berücksichtigen

Beim Festlegen der Breakpoints beachten Sie bitte:

  • Standardmäßig werden alle Breakpoints anhand der Werte des gewählten grafischen Templates festgelegt.
  • Alle Breakpoints können über die Schaltfläche Bearbeiten geändert werden, mit Ausnahme des Breakpoints Smartphone, der automatisch den Wert des darüberliegenden Breakpoints übernimmt.
  • In der Evo-Version können vorhandene Breakpoints weder gelöscht noch neue hinzugefügt werden.
  • In der Pro-Version kann der Breakpoint Smartphone nicht entfernt werden, es ist jedoch möglich, Zwischen-Breakpoints zu löschen (über die Schaltfläche Entfernen). Der Breakpoint Desktop kann entfernt werden, wobei automatisch der nächste Breakpoint als neuer Desktop-Breakpoint übernommen wird. Es müssen mindestens 2 Breakpoints vorhanden sein: Smartphone und Desktop.
  • In der Pro-Version können (über die Schaltfläche Hinzufügen) bis zu maximal 10 Breakpoints hinzugefügt werden, einschließlich Desktop und Smartphone.
  • Der Breakpoint Smartphone definiert die Mindestauflösung, unterhalb der die Website immer linear dargestellt wird: Alle Objekte werden untereinander angezeigt (unter Berücksichtigung der Reihenfolge und Sichtbarkeitseinstellungen im Fenster Responsive Einstellungen) und nehmen – wie die Seitenbreite – 100 % der verfügbaren Breite ein.


#tip - Während in der Evo-Version nur der Smartphone-Breakpoint festgelegt werden muss, können in der Pro-Version bis zu 10 Breakpoints definiert werden, einschließlich Desktop und Smartphone. Wenn Sie ein mit der Evo-Version erstelltes Projekt in der Pro-Version öffnen, wird der Smartphone-Breakpoint übernommen und Sie können weitere hinzufügen.


Praktische Tipps

Um eine effektive Konfiguration zu erreichen, sollten Sie folgende praktische Hinweise beachten:

  • vermeiden Sie unnötig viele Breakpoints;
  • testen Sie das Layout auf mehreren Geräten;
  • legen Sie Wert auf Einfachheit und Lesbarkeit;
  • berücksichtigen Sie das tatsächliche Verhalten der Inhalte;
  • überprüfen Sie immer das Endergebnis in der Vorschau.


Zusammenfassung

Breakpoints bilden die technische Grundlage für die Erstellung einer effektiven responsiven Website.


Mit WebSite X5 können Sie diese verwalten, ohne direkt in den Code eingreifen zu müssen, indem Sie visuelle Werkzeuge nutzen, die Konfiguration, Anpassung und Kontrolle der verschiedenen Ansichten vereinfachen.


Ihr Ziel ist es, die am besten geeigneten Übergangspunkte für Ihr Projekt zu definieren, um auf jedem Gerät eine optimale Benutzererfahrung zu gewährleisten.