Compatibility:

WebSite X5 Evo and Pro

Bei der Erstellung einer responsiven Website ist es entscheidend, eine wirkungsvolle Hierarchie der Inhalte festzulegen. Es reicht nämlich nicht aus, auszuwählen, welche Elemente auf einer Seite eingefügt werden sollen: Ebenso wichtig ist es festzulegen, wie sich diese Inhalte neu anordnen sollen, wenn der verfügbare Platz abnimmt.


Ziel der responsiven Anordnung ist es, sicherzustellen, dass Texte, Bilder und Objekte auch beim Wechsel von der Desktop-Ansicht zu Tablet und Smartphone eine konsistente, gut lesbare und funktionale Anordnung beibehalten.


In WebSite X5 erfolgt diese Verwaltung über das Fenster Responsive-Einstellungen, in dem Sie die Reihenfolge steuern können, in der die Objekte an die verschiedenen Auflösungen angepasst werden.


Warum die Reihenfolge der Objekte wichtig ist

Wenn Sie die Reihenfolge der Inhalte richtig festlegen, können Sie:

  • Prioritäten zwischen den Elementen festlegen;
  • Lesbarkeit und Benutzerfreundlichkeit verbessern;
  • unübersichtliche Anordnungen vermeiden;
  • die Linearisierung auf Mobilgeräten steuern;
  • das Layout an den verschiedenen Breakpoints wirkungsvoller gestalten.


In der Praxis bestimmt die Reihenfolge das Verhalten der Seite, wenn die Desktop-Struktur im verfügbaren Platz nicht mehr beibehalten werden kann.


Wo Sie die Reihenfolge in WebSite X5 verwalten

WebSite X5 weist den Objekten automatisch eine anfängliche Reihenfolge zu, diese entspricht jedoch nicht immer der wirkungsvollsten Lösung. Daher empfiehlt es sich, die vorgeschlagene Reihenfolge zu überprüfen und sie manuell anzupassen, wenn die Hierarchie der Inhalte dies erfordert.


Um die Reihenfolge der Inhalte zu ändern, gehen Sie wie folgt vor:

  • Gehen Sie zu Schritt 4 - Seiten.
  • Öffnen Sie die gewünschte Seite.
  • Klicken Sie auf die Schaltfläche Responsive.
  • Öffnen Sie das Fenster Responsive-Einstellungen: Es enthält eine Responsive Bar mit der Liste der aktivierten Breakpoints.
  • Wählen Sie auf der Responsive Bar die Ansicht Desktop: Das Raster zeigt nun die vorhandenen Objekte, nummeriert entsprechend ihrer aktuellen Reihenfolge.
  • Klicken Sie auf die Schaltfläche Reihenfolge: Die Objekte werden halbtransparent und die auswählbaren Objekte werden durch einen roten Rahmen hervorgehoben.
  • Wählen Sie das erste Objekt unter den hervorgehobenen Objekten aus und klicken Sie darauf. Das Objekt wird wieder vollständig undurchsichtig und zeigt die Nummer an, die es in der Reihenfolge erhalten hat.
  • Klicken Sie weiter auf die Objekte und folgen Sie dabei der Reihenfolge, die im Prozess der Linearisierung der Inhalte verwendet werden soll. WebSite X5 hebt jeweils die Objekte hervor, die als Nächstes ausgewählt werden können.
  • Wenn die anfängliche Reihe von Objekten nicht geändert werden soll, öffnen Sie das über die Schaltfläche Reihenfolge zugängliche Menü und wählen Sie Reihenfolge ab einem Objekt fortsetzen. Klicken Sie anschließend auf das Objekt, ab dem Sie fortfahren möchten: Alle vorherigen Objekte behalten die bereits festgelegte Reihenfolge bei, während Sie die Position der nachfolgenden Objekte neu festlegen müssen.
  • Um den Vorgang abzuschließen, können Sie:
    • fortfahren, bis Sie das letzte Objekt ausgewählt haben;
    • den Befehl Reihenfolge > Reihenfolge abschließen verwenden, um den Vorgang zu beenden und die aktuelle Reihenfolge zu bestätigen;
    • den Befehl Reihenfolge > Reihenfolge abbrechen verwenden, um die Änderungen zu verwerfen und die ursprüngliche Reihenfolge wiederherzustellen.


#tip - Ziel des Anordnungsprozesses ist es, alle auf einer Seite vorhandenen Objekte so anzuordnen, dass sie korrekt linearisiert werden können. WebSite X5 prüft die möglichen Abfolgen und hebt nur die Objekte rot hervor, die ausgewählt werden können, ohne Unterbrechungen zu erzeugen, die eine korrekte Linearisierung der Inhalte verhindern würden.


Strategie für die Anordnung

Je nachdem, auf welches Objekt Sie klicken und wie die Objekte im Layoutraster angeordnet sind, ändern sich jeweils die verfügbaren Möglichkeiten, um das nächste Element festzulegen.


Das Verhalten hängt auch davon ab, wie Sie die Seite strukturiert haben: Sie können auf einer Seite arbeiten, die nicht in mehrere Sektionen unterteilt ist, oder auf einer Seite, auf der Sie mehrere Sektionen verwendet haben, um unabhängige Bereiche zu organisieren.


Fall 1. Seite nicht in mehrere Sektionen unterteilt

Wenn Sie die Seite nicht in mehrere Sektionen unterteilt haben, bewertet WebSite X5 den Ablauf der Objekte im gesamten Raster.


Um die Funktionsweise besser zu verstehen, betrachten Sie diese Struktur:


Bild 1. Ausgangsstruktur


Wenn Sie den Modus Anordnung starten, hebt das Programm alle Objekte in der ersten Zeile rot hervor, weil Sie aus diesen das erste Element der Liste auswählen können.


Wenn Sie auf Objekt 1 klicken, ändert sich die Situation wie folgt:


Bild 2. Klick auf 1: Auswahl zwischen 2, 3 und 4


Die Position von Objekt 1 wird bestätigt und WebSite X5 schlägt die Objekte 2, 3 und 4 als zweites Element vor.


Die dargestellte Reihenfolge ist nur eine von mehreren möglichen Anordnungen: Je nach Inhalt kann es sinnvoller sein, eines der anderen verfügbaren Objekte in der ersten Zeile als erstes Element zu wählen.


Führen wir das Beispiel weiter und nehmen wir an, dass wir die Position der Objekte 1, 2 und 3 bestätigt haben. Das Programm erlaubt jetzt die Auswahl zwischen Objekt 4 und Objekt 5.


Bild 3. Auswahl zwischen 4 und 5


Diese Wahl hat Auswirkungen auf die folgenden Möglichkeiten. Wenn Sie Objekt 4 auswählen, ergibt sich eine Struktur, die hauptsächlich nach Zeilen organisiert ist; wenn Sie dagegen Objekt 5 auswählen, ergibt sich eine Struktur, die hauptsächlich nach Spalten organisiert ist.


Bild 4. Klick auf 4: zeilenbasierte Struktur


Bild 5. Klick auf 5: spaltenbasierte Struktur


Fall 2. Seite in mehrere Abschnitte unterteilt

Wenn die Seite in mehrere Abschnitte unterteilt ist, verwaltet WebSite X5 die Reihenfolge für jeden Abschnitt separat: Zuerst wird der Ablauf der Objekte im aktuellen Abschnitt abgeschlossen, danach geht es mit dem nächsten Abschnitt weiter.


Nehmen wir zum Beispiel an, dass ein erster Abschnitt die Objekte 1, 2 und 3 enthält und direkt danach ein zweiter Abschnitt beginnt.


Wenn Sie während der Anordnung bereits die Objekte 1 und 2 ausgewählt haben, schlägt WebSite X5 nur Objekt 3 als nächstes Element vor, weil es das letzte Objekt ist, das im aktuellen Abschnitt noch angeordnet werden muss.


Nachdem Sie Objekt 3 ausgewählt haben, wechselt die Anordnung zum nächsten Abschnitt und das Programm hebt die Objekte hervor, die die ersten Elemente des neuen Ablaufs bilden können.


#tip - Abschnitte vereinfachen die responsive Anordnung, indem sie die Seite in separat verwaltete Bereiche unterteilen. Weitere Informationen finden Sie unter Seitenabschnitte. Wie erstellt man Layouts mit unterschiedlichen Strukturen?


Objektblöcke

Während der Anordnung können Objektblöcke entstehen. Ein Block verhält sich wie ein einziges Objekt und wird im Raster dargestellt, sobald er entsteht, damit die Struktur übersichtlicher wird.


Im vorherigen Beispiel bilden bei einer spaltenbasierten Struktur die Objekte 1, 2, 3 und 4 einen Block, während die Objekte 5 und 6 einen weiteren Block bilden.


Bild 6.


Bild 7.


Die Bilder 6 und 7 zeigen, wie unterschiedliche Anordnungsentscheidungen verschiedene Objektblöcke und damit alternative Seitenstrukturen erzeugen können.


Grundsätzlich muss ein Objektblock nicht in allen Ansichten als solcher erhalten bleiben.


Bild 8. Objektblock in der Desktop-Ansicht


Bild 9. Wenn Objekt 4 ausgeblendet wird, entsteht der Block in der nächsten Ansicht nicht mehr


In Bild 8 bilden beispielsweise die Objekte 1, 2 und 3 einen Block, weil sie neben Objekt 4 angeordnet sind, das sich über beide Zeilen erstreckt. Wenn jedoch, wie in Bild 9 zu sehen, zwischen dem Block und Objekt 4 ein Zeilenumbruch eingefügt wird (möglich in der Pro-Edition) oder Objekt 4 ausgeblendet wird, stehen die Objekte 1, 2 und 3 in der nächsten Ansicht nicht mehr neben anderen Objekten und bilden daher keinen Block mehr.


Wenn die Seite in mehrere Abschnitte unterteilt ist, wird die Berechnung der Reihenfolge für jeden Abschnitt separat durchgeführt: Auch die Bildung der Blöcke wird daher innerhalb des aktuellen Abschnitts bestimmt.


Unteilbare Blöcke

Wenn ein Objektblock in allen Ansichten als Block bestehen bleibt, mit Ausnahme der Smartphone-Ansicht, in der die Seite vollständig linearisiert wird, und es keine Möglichkeit gibt, ihn aufzulösen, wird er als Unteilbarer Block bezeichnet. 


Unteilbare Blöcke werden im Raster dargestellt und mit einer anderen Farbe hervorgehoben als normale Blöcke.


Bild 10. Beispiel für einen Unteilbaren Block


Im Beispiel lässt sich bei der „blumenförmigen“ Anordnung der Objekte keine Struktur nach Zeilen oder Spalten erkennen. Dadurch werden die Anordnungsmöglichkeiten deutlich eingeschränkt, es können keine Zeilenumbrüche zwischen den betroffenen Objekten eingefügt werden (eine Funktion der Pro-Edition), und ein einzelnes Objekt kann nicht ausgeblendet werden, ohne dass automatisch auch alle anderen Objekte des Blocks ausgeblendet werden. 


Wenn sich ein Unteilbarer Block bildet, empfiehlt es sich daher zu prüfen, ob Sie die Anordnung der Objekte im Raster vereinfachen können, um bei der responsiven Verwaltung mehr Freiheit zu haben.


Achten Sie auf Leere Zellen

Wenn Sie eine neue Seite in einer responsiven Website erstellen, sollten Sie darauf achten, dass das Layout-Raster keine Leeren Zellen enthält. Das Programm behandelt Leere Zellen so, als wären sie (leere) Objekte, und weist jeder von ihnen eine Position in der Reihenfolge zu: Diese Positionen können nicht geändert werden, beeinflussen aber die Anordnungsmöglichkeiten der tatsächlichen Objekte. Um beim Anordnen der Objekte möglichst viel Freiheit zu behalten, sollten Sie daher Leere Zellen vermeiden und stattdessen leere Objekte einfügen: Wenn sie manuell eingefügt werden, beeinflussen diese leeren Objekte die Seitenzusammensetzung nicht und können angeordnet werden.


Bewährte Vorgehensweisen

Es gibt keine absolut richtige Reihenfolge: Die beste Lösung hängt von den Inhalten der Seite und dem Ergebnis ab, das Sie in den verschiedenen Ansichten erzielen möchten.


Um Probleme zu vermeiden:

  • legen Sie zuerst fest, welche Inhalte eine höhere Priorität haben sollen;
  • bevorzugen Sie einfache Strukturen, die sich leicht linearisieren lassen;
  • vermeiden Sie unnötig komplexe Anordnungen;
  • prüfen Sie die Bildung von Objektblöcken;
  • begrenzen Sie Unteilbare Blöcke, wenn möglich.


Prüfen Sie abschließend immer in der Vorschau, wie die Seite an den verschiedenen Breakpoints dargestellt wird. Wenn die Inhalte eine schlüssige, gut lesbare und funktionale Reihenfolge beibehalten, können Sie die festgelegte Anordnung beibehalten.


Zusammenfassung

Die Anordnung der Objekte ist einer der wichtigsten Aspekte beim responsiven Design, da sie bestimmt, wie sich die Inhalte an die verschiedenen Auflösungen anpassen.


Mit WebSite X5 können Sie diesen Prozess visuell steuern und eine wirkungsvollere, besser lesbare und strategischere Struktur definieren, ohne direkt am Code arbeiten zu müssen.


Eine gute Anordnung verbessert Benutzerfreundlichkeit, Flexibilität und die Gesamtqualität des Projekts.