Compatibility:

WebSite X5 Evo and Pro

Beim Erstellen einer responsiven Website ist es entscheidend, eine effektive Inhaltsstruktur festzulegen. Es reicht nicht aus, nur zu entscheiden, welche Elemente auf einer Seite enthalten sein sollen: Ebenso wichtig ist es, festzulegen, wie sich diese Inhalte neu anordnen, wenn der verfügbare Platz geringer wird.


Das 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 Darstellung beibehalten.


Mit WebSite X5 erfolgt diese Verwaltung über das Fenster Responsive Einstellungen, in dem Sie die Reihenfolge festlegen können, in der sich die Objekte an die verschiedenen Auflösungen anpassen.


Warum die Anordnung der Objekte wichtig ist

Eine korrekt definierte Reihenfolge der Inhalte ermöglicht es Ihnen:

  • Prioritäten zwischen den Elementen festzulegen;
  • Lesbarkeit und Benutzerfreundlichkeit zu verbessern;
  • unübersichtliche Layouts zu vermeiden;
  • die Linearisierung auf mobilen Geräten zu steuern;
  • das Layout für verschiedene Breakpoints effektiver zu gestalten.


In der Praxis bestimmt die Reihenfolge, wie sich die Seite verhält, wenn die Desktop-Struktur nicht mehr aufrechterhalten werden kann.


Wo die Anordnung in WebSite X5 verwaltet wird

WebSite X5 weist den Objekten automatisch eine anfängliche Reihenfolge zu, doch diese entspricht nicht immer der optimalen Lösung. Daher wird empfohlen:

  • die vorgeschlagene Reihenfolge zu überprüfen;
  • die Hierarchie der Inhalte zu bewerten;
  • bei Bedarf manuell einzugreifen.


Um die Reihenfolge der Inhalte anzupassen, 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: Dort wird eine Responsive Bar mit der Liste der aktiven Breakpoints angezeigt.
  • 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 Anordnung: Die eingefügten Objekte werden halbtransparent dargestellt und die auswählbaren Objekte sind rot umrandet.
  • Wählen Sie das erste Objekt unter den rot markierten aus und klicken Sie darauf. Das ausgewählte Objekt wird wieder vollständig sichtbar und zeigt die zugewiesene Nummer an. Alle anderen Objekte bleiben halbtransparent und ihre Nummerierung wird bei Bedarf aktualisiert.
  • Klicken Sie anschließend auf alle weiteren Objekte der Seite in der Reihenfolge, die für die Linearisierung der Seiteninhalte verwendet werden soll.
  • Um Zeit zu sparen, können Sie – falls die anfängliche Objektreihe nicht geändert werden muss – das Menü der Schaltfläche Anordnung öffnen und Anordnung ab einem Objekt fortsetzen wählen: Klicken Sie in diesem Fall auf das Objekt, ab dem Sie die Anordnung fortsetzen möchten. Alle vorherigen Objekte bleiben unverändert, während Sie für die folgenden Objekte die Reihenfolge neu festlegen.
  • Um den Anordnungsvorgang abzuschließen, können Sie:
    • bis zum letzten Objekt der Seite klicken;
    • den Befehl Anordnung > Anordnung abschließen verwenden: Der Vorgang wird beendet und die aktuelle Reihenfolge bestätigt;
    • den Befehl Anordnung > Anordnung abbrechen verwenden: Der Vorgang wird beendet und die vorgenommenen Änderungen werden verworfen, sodass die ursprüngliche Reihenfolge wiederhergestellt wird.


#tip - Ziel des Anordnungsvorgangs ist es, alle Objekte einer Seite so anzuordnen, dass sie korrekt linearisiert werden können. Das Programm prüft alle möglichen Anordnungen und hebt jeweils nur die Objekte rot hervor, die ausgewählt werden können, ohne Unterbrechungen zu verursachen, die eine korrekte Linearisierung verhindern würden.


Strategie zur Anordnung

Je nachdem, auf welches Objekt Sie während des Anordnungsvorgangs klicken und wie alle Objekte im Layout-Raster angeordnet sind, ändern sich jeweils die rot markierten auswählbaren Objekte. Diese bestimmen, welches Objekt als nächstes in der Reihenfolge gewählt werden kann.


Um diesen Schritt besser zu verstehen, betrachten Sie das folgende Beispiel:


Bild 1. Ausgangsstruktur


Mit dieser Seitenkonfiguration markiert das Programm im Anordnungsmodus alle Objekte der ersten Zeile rot, da nur diese als erstes Element der Reihenfolge ausgewählt werden können.


Wenn Sie auf Objekt 1 klicken, ändert sich die Darstellung im Raster wie folgt:


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


Wie zu sehen ist, bestätigt ein Klick auf Objekt 1 dessen Position, und das Programm fordert Sie auf, das zweite Objekt aus den Objekten 2, 3 und 4 auszuwählen.


Dies ist nur eine der möglichen Anordnungen: Je nach Inhalt könnte es sinnvoller sein, ein anderes Objekt aus der ersten Zeile als erstes Element festzulegen.


Im weiteren Verlauf nehmen wir an, dass die Positionen der Objekte 1, 2 und 3 bestätigt wurden. An diesem Punkt können Sie entscheiden, ob Sie auf Objekt 4 oder Objekt 5 klicken.


Bild 3. Auswahl zwischen 4 und 5


Die Entscheidung, ob Sie Objekt 4 oder Objekt 5 auswählen, hat Auswirkungen auf die weiteren Schritte. Im ersten Fall ergibt sich eine Seitenstruktur mit Zeilen, im zweiten Fall eine Struktur mit Spalten.


Bild 4. Klick auf 4: Struktur in Zeilen


Bild 5. Klick auf 5: Struktur in Spalten


Objektblöcke

Während des Anordnungsvorgangs können Strukturen entstehen, bei denen sogenannte Objektblöcke gebildet werden: In Bild 5 bilden beispielsweise die Objekte 1, 2, 3 und 4 einen Block, ebenso wie die Objekte 5 und 6 einen weiteren Block bilden. Ein Objektblock verhält sich wie ein einzelnes Objekt und wird zur besseren Übersicht im Raster dargestellt, sobald er entsteht.


Bild 6.


Bild 7.


Die Bilder 6 und 7 zeigen, wie unterschiedliche Anordnungsentscheidungen zu unterschiedlichen Objektblöcken führen, die letztlich alternative Seitenstrukturen bestimmen.


Grundsätzlich ist es nicht garantiert, dass ein Objektblock in allen Ansichten bestehen bleibt.


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, da sie neben Objekt 4 angeordnet sind, das sich über beide Zeilen erstreckt. Wenn jedoch – wie in Bild 9 gezeigt – ein Zeilenumbruch zwischen dem Block und Objekt 4 eingefügt wird (möglich in der Pro-Version) oder Objekt 4 ausgeblendet wird, sind die Objekte 1, 2 und 3 in der nächsten Ansicht nicht mehr neben anderen Objekten angeordnet und bilden keinen Block mehr.


Unteilbare Blöcke

Wenn ein Objektblock in allen Ansichten 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. Auch 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


Bild 10 zeigt ein Beispiel für einen unteilbaren Block. Wie zu sehen ist, lässt die „blumenartige“ Anordnung der Objekte keine klare Struktur in Reihen oder Spalten erkennen. Dies schränkt die Möglichkeiten der Anordnung erheblich ein, verhindert das Einfügen von Zeilenumbrüchen zwischen den betreffenden Objekten (eine Funktion der Pro-Version) und erlaubt es nicht, ein einzelnes Objekt auszublenden, ohne automatisch auch alle anderen Objekte des Blocks auszublenden. Auch wenn solche Blöcke verwaltet werden können, empfiehlt es sich daher, bei ihrem Auftreten die Anordnung der Objekte zu überarbeiten, um sie zu vereinfachen und mehr Flexibilität zu erhalten.


Bewährte Vorgehensweisen

Es ist nicht möglich, allgemein zu sagen, dass eine Anordnung besser oder richtiger ist als eine andere: Alles hängt von den vorhandenen Inhalten und den angestrebten Ergebnissen ab. 


Um Probleme zu vermeiden:

  • bevorzugen Sie einfache Strukturen;
  • vermeiden Sie zu komplexe Kompositionen;
  • überprüfen Sie stets die Bildung von Blöcken;
  • reduzieren Sie unteilbare Blöcke.


Überprüfen Sie in der Vorschau, wie die Seite bei jedem Breakpoint dargestellt wird. Wenn die Inhalte weiterhin logisch angeordnet sind, bedeutet dies, dass die gewählte Anordnung funktioniert und beibehalten werden kann.


Zusammenfassung

Die Anordnung der Objekte ist einer der wichtigsten Aspekte im Responsive Design, da sie bestimmt, wie sich die Inhalte an unterschiedliche Auflösungen anpassen.


Mit WebSite X5 können Sie diesen Prozess visuell steuern und eine effektivere, besser lesbare und strategischere Struktur erstellen, ohne direkt in den Code eingreifen zu müssen.


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