Kompatibilität:

WebSite X5 Evo und Pro


Bei der Planung eines neuen Projekts für eine responsive Website sind zunächst Überlegungen zu den möglichen Umbruchpunkten anzustellen.


Ein Umbruchpunkt ist ein Punkt auf der idealen Linie, der die Auflösung der möglichen Geräte, auf denen eine Website angezeigt werden kann, zum Ausdruck bringt.


Um diesen Mechanismus besser deutlich zu machen, wollen wir von einem Beispiel ausgehen, das Beispielbild stellt schmatisch das Verhalten einer Website dar, für die 3 Umbruchpunkte festgelegt wurden: bei 960px, bei 720px und 480px.



Mit 3 Umbruchpunkten werden 4 unterschiedliche Ansichtstypen festgelegt. Für Auflösungen von weniger als 480px wird die Website mit einem blauen Hintergrund dargestellt. Wenn das Browserfenster eine Breite von 480px erreicht, wird der Hintergrund grün und behält diese Farbe bei, bis die Breite 720px erreicht: dann wird der Hintergrund gelb. Bei 960px befindet sich dann ein anderer Umbruchpunkt, ab dem der Hintergrund dann rot ist.


Aber wie viele Umbruchpunkte müssen nun eigentlich festgelegt werden? Eine endgültige Antwort auf diese Frage ist nicht möglich: Viel hängt von den Eigenschaften der Website ab, vom Layout, vom Publikum, an das sich die Website richtet usw. Man könnte sagen, man muss so viele Umbruchpunkte festlegen, wie nötig sind, damit sich die Seite am besten an die Geräte anpasst, auf denen sie angezeigt wird.


Die vorherrschende Praxis ist, die Umbruchpunkte auf der Grundlage der Bildschirmgröße der wichtigsten Gerätearten festzulegen. Entsprechend dieser Praxis gibt WebSite X5 auf der Linie der verschiedenen Auflösungen die folgenden Umbruchpunkte an:

  • 960px: Desktop
  • 720px: Tablet im Landscape-Modus
  • 600px: Tablet im Portrait-Modus
  • 480px: Smartphone im Landscape-Modus
  • Weniger als  480px: Smartphone im Portrait-Modus.


Ziel ist es, die Umbruchpunkte so einzustellen, dass Makrokategorien identifiziert werden: Es gibt so viele verschiedene Geräte, dass es unmöglich ist, für jedes einen Umbruchpunkt festzulegen. Die Edition Evo von WebSite X5 unterstützt drei Umbruchpunkte, während Sie in der Edition Pro bis zu 10 Umbruchpunkte festlegen können, einschließlich solcher für die Desktop- und Smartphone-Anzeige.


Nach den Überlegungen, welche Umbruchpunkte in WebSite X5 aktiviert werden sollen, um eine responsive Webiste zu erstellen, sind folgende Schritte erforderlich:


  • Auf Schritt 2 im Fenster Auflösungen und responsives Design die Option Responsive Website auswählen.
  • Im Fenster Auflösungen und responsives Design, die Liste der Umbruchpunkte festlegen, die für die Website zu aktivieren sind, dafür werden die entsprechenden Funktionen verwendet.
    • Standardmäßig sind alle Umbruchpunkte nach den Werten der für das Projekt gewählten Vorlage eingestellt.
    • Alle Umbruchpunkte, außer dem für Smartphones, bei dem automatisch der Wert des nächst höheren Umbruchpunktes übernommen wird, können mit der Schaltfläche Bearbeiten... frei verändert werden
    • In der Edition Evo ist es nicht möglich, vorhandene Umbruchpunkte zu entfernen oder neue hinzuzufügen.
    • In der Edition Pro können außer dem Umbruchpunkt Smartphone alle übergeordneten Umbruchpunkte über die Schaltfläche Entfernen) entfernt werden. Der Umbruchpunkt Desktop kann markiert und entfernt werden, auf diese Weise wird jedoch automatisch der nächst niedrige Umbruchpunkt als Desktop eingestellt. Es müssen mindestens zwei Umbruchpunkte vorhanden sein - Smartphone und Desktop.
    • In der Edition Pro können (über die Schaltfläche Hinzufügen) bis insgesamt 10 Umbruchpunkte, einschließlich Desktop und Smarphone, hinzugefügt werden.
    • Der Umbruchpunkt Smartphone definiert die Mindestauflösung, unter der die Website linear angezeigt wird, d.h. alle Objekte erscheinen untereinander (ohne die verborgenen Objekte und in der Reihenfolge, die im Fenster Responsive Einstellungen festgelegt wurde). In der Breite füllen sie 100% des auf der Seite verfügbaren Platzes aus.

Alle eingestellten Umbruchpunkte sind in der Übersichtstabelle im Fenster Responsive Einstellungen angegeben.


#Tipp - In der Edition Evo muss nur der Smartphone-Umbruchpunkt festgelegt werden, in der Edition Pro können bis zu 10 Umbruchpunkte festgelegt werden, einschließlich Desktop-Umbruchpunkt und Smartphone-Umbruchpunkt. Wird mit der Edition Pro ein Projekt geöffnet, das mit der Edition Evo erstellt wurde, wird der Smartphone-Umbruchpunkt übernommen es können auch neue hinzugefügt werden.