Compatibility:

WebSite X5 Evo and Pro

Wenn eine responsive Website erstellt wird, ist es wichtig, für jede Seite eine Hierarchie der Inhalt zu etablieren, um zu identifizieren, welche Inhalte bleiben müssen und welche Inhalte und wie sie angeordnet werden müssen, wenn die Website bei Auflösung unter der Desktop-Auflösung angezeigt wird.


In WebSite X5 erfolgt die Definition, wie sich jede Seite in Bezug auf die eingestellten Umbruchpunkte ändern muss, im Fenster Responsive Einstellungen, die man beim Klick auf  geöffnet werden kann.


Dieses Fenster enthält eine Responsiv-Leiste mit der Liste der aktivierten Umbruchpunkte und ein Gestaltungsraster (Grid), das die Seitenkonfiguration, die für den ausgewählten Umbruchpunkt eingestellt wurde, anzeigt: zuerst muss die Anordnung der vorhandenen Objekte definiert werden.


Bei der Definition der Anordnung der Objekte muss festgelegt werden, in welcher Reihenfolge diese angeordnet werden, wenn die Breite des Browserfensters nicht mehr ausreicht, um die Anzeige im Desktop-Modus zu erlauben.


Im Gestaltungsraster (Grid) zeigt jedes eingefügte Objekt das Symbol, das mit der Art des Inhalts assoziiert ist (Text, Bild usw.) und eine Zahl, die die Position in der Anordnung angibt.


Die Objekte werden automatisch vom Programm angeordnet, aber diese standardmäßig ausgeführte Anordnung, könnte nicht die sein, die man sich wünscht, daher ist es empfehlenswert, die Korrektheit in  Abhängigkeit von den Inhalten zu überprüfen und, falls erforderlich, manuelle Änderungen vorzunehmen.


Um die Anordnung der Objekte zu aktivieren ist es notwendig, die Desktop-Ansicht auszuwählen und klicken Sie auf die Schaltfläche Anordnung: die eingefügten Objekte werden semi-transparent und einige erscheinen mit einem roten Rahmen, um anzuzeigen, dass sie ausgewählt werden können.


#tip - Das Ziel der Anordnung ist, dass alle Objekte auf einer Seite angezeigt werden können, um in der richtigen Reihenfolge linearisiert zu werden. Das Programm bewertet alle Möglichkeiten für die Anordnung und hebt jedes Mal nur die Objekte rot hervor, die ausgewählt werden können, ohne bei der Anordnung Unterbrechungen zu verursachen, die die korrekte Linearisierung aller Objekte verhindern würden.


Jetzt kann begonnen werden, auf ein Objekt der mit einem roten Rahmen versehenen zu klicken, um festzulegen, welches der Objekte das erste sein soll. Sobald ein Objekt ausgewählt wird, wird es wieder undurchsichtig und die Nummer wird angezeigt. Alle anderen Objekte bleiben weiterhin semi-transparent und, falls erforderlich, wird die angegebene Nummer aktualisiert.


Je nach dem Objekt, auf das man geklickt hat, und wie alle Objekte in das Gestaltungsraster (Grid) eingefügt sind, ändern sich jeweils die mit einem Rahmen versehenen Objekte, unter denen ausgewählt werden kann, um zu bestimmen, welches in der Anordnung nachfolgt.


Um diesen Schritt besser zu verstehen, beachten Sie bitte das Beispiel:


Abbildung 1. Anfängliche Struktur


Bei dieser Konfiguration der Seite versieht das Programm, wenn der Anordnungsmodus gewählt wird, alle Objekte der ersten Zeile mit einem roten Rahmen, denn nur aus diesen Objekten kann das Objekt ausgewählt werden, das als erstes in der Liste erscheint.


Beim Klicken auf Objekt 1 ändert sich die Situation im Gestaltungsraster (Grid) folgendermaßen:


Abbildung 2. Klicken Sie auf 1: Wahl zwischen 2, 3 und 4


Wie Sie sehen, bestätigt sich beim Klicken auf Objekt 1 die Position des Objekts und das Programm bittet darum, unter Objekt 2, 3 und 4 zu wählen.


Die beschriebene Anordnung ist eine der möglichen: Je nach dem Inhalt der Seite konnte es richtiger sein, als erstes Objekt der Anordnung ein anders Objekt aus der ersten Zeile des Gestaltungsrasters (Grid) zu wählen.


Wir wollen mit diesem Beispiel weiter fortfahren und annehmen, dass wir die Position der Objekte 1, 2 und 3 bestätigt haben. Nun bietet das Programm die Möglichkeit zu wählen, ob man auf das Objekt 4 oder das Objekt 5 klicken will.


Abbildung 3. Auswahl zwischen 4 und 5


Wenn Sie entscheiden, auf Objekt 4 zu klicken, anstatt auf Objekt 5, hat dies Auswirkungen auf die späteren Entscheidungen. Im ersten Fall wird eine Seitenstruktur festgelegt, die zwei Zeilen vorsieht, im zweiten Fall dagegen wird eine Struktur festgelegt, die zwei Spalten vorsieht.


Abbildung 4. Klick auf 4: Zeilenstruktur


Abbildung 3. Auswahl zwischen 4 und 5


Während des Anordnungsprozesses können die Strukturen konfiguriert werden, in denen Objektblöcke erstellt werden: In der Abbildung 5 zum Beispiel bilden die Objekte 1, 2, 3 und 4 einen Block ebenso wie die Objekte 5 und 4 einen anderen bilden. Ein Objektblock verhält sich wie einzelnes Objekt und aus Gründen der Klarheit wird er auf dem Gestaltungsraster (Grid) eingezeichnet, sobald er gebildet wird.


Abbildung 6.


Abbildung 7.


Die Abbildungen 6 und 7 zeigen, wie unterschiedliche Anordnungsentscheidungen unterschiedliche Objektblöcke erzeugen, die schließlich alternative Seitenstrukturen festlegen.


Es ist dabei nicht gesagt, dass ein Objektblock in allen Ansichten als solcher erhalten bleibt.


Abbildung 8. Objektblock in der Desktop-Ansicht


Abbildung 9. Wenn das Objekt 4 unsichtbar gemacht wird, erscheint es in der nachfolgenden Ansicht des Blocks nicht mehr.


In der Abbildung 8 zum Beispiel bilden die Objekte 1, 2 und 3 einen Block, weil sie neben dem Objekt 4 angeordnet sind, das auf beiden Zeilen ausgerichtet ist. Wenn jedoch, wie auf Abbildung 9 zu sehen ist,  ein Zeilenumbruch zwischen dem Block und dem Objekt 4 eingefügt wird (nur möglich mit der Edition Pro), oder wenn das Objekt 4 unsichtbar gemacht wird, erscheinen in der nachfolgenden Ansicht die Objekte 1, 3 und 4 und werden nicht mehr neben andere Objekte gestellt und bilden keinen Block mehr.


Wenn ein Objektblock in allen Ansichten bestehen bleibt (mit Ausnahme der Smartphone-Ansicht, in der die Seite komplett linearisiert wird) ist es nicht möglich diesen Block aufzulösen und er wird Unteilbarer Block genannt. Auch die unteilbaren Blöcke werden im Gestaltungsraster (Grid) eingezeichnet und mit einer anderen Farbe gegenüber den normalen Blöcken gekennzeichnet.


Abbildung 10. Beispiel für einen unteilbaren Block


Das Bild 10 stellt ein Beispiel für einen unteilbaren Block dar. Man sieht hier, dass die Anordnung in Blütenform nicht erlaubt, eine Zeilenstruktur oder Spaltenstruktur zu identifizieren: Dadurch verringern sich die Anordnungsmöglichkeiten erheblich, und ein Einfügen von Zeilen zwischen den betroffenen Objekten ist nicht möglich (möglich nur mit der Edition Pro). Es ist nicht zugelassen, eines der Objekte unsichtbar zu machen, ohne automatisch auch die anderen Blockobjekte unsichtbar zu machen. Wenn unteilbare Blöcke vorhanden sind, ist es - auch wenn diese verwaltet werden können - empfehlenswert, die Anordnung der Objekte zu prüfen, um sie möglichst zu vereinfachen und so einen größeren Gestaltungsfreiraum zu haben.


Schließlich ist es nicht möglich, allgemein zu bestätigen, dass eine Anordnung richtiger oder besser ist als eine andere: Dies hängt von den vorhandenen Inhalten und von den Ergebnissen ab, die man erhalten will. Sobald eine Anordnung konfiguriert wurde, muss daher im Browser lokal überprüft werden, wie die Seite bei den verschiedenen eingerichteten Umbruchpunkten angezeigt wird. Wenn die Inhalte weiterhin in kohärenter Weise angezeigt werden, bedeutet dies, dass die konfigurierte Anordnung funktional ist und beibehalten werden kann.