Kompatibilität:

WebSite X5 Evo und Pro

Beim Responsive Web Design bedeutet die richtige Gestaltung einer Seite nicht nur, festzulegen, welche Inhalte veröffentlicht werden, sondern auch, wie sich diese Inhalte an unterschiedliche Geräte anpassen sollen.


Auf einem breiten Bildschirm können Sie mehrere Elemente nebeneinander anordnen, während es in schmaleren Ansichten notwendig sein kann, ihre Anordnung zu ändern, eine andere Lesereihenfolge festzulegen oder weniger wichtige Inhalte auszublenden.


Mit WebSite X5 können Sie diese Aspekte über die Responsive-Einstellungen verwalten und dabei Reihenfolge, Sichtbarkeit und Anordnung der Objekte an den verschiedenen Breakpoints anpassen.


Warum es wichtig ist, responsive Inhalte zu planen

Wenn Sie eine responsive Seite gestalten, sollten Sie sich fragen:

  • welche Inhalte immer leicht zugänglich sein müssen;
  • in welcher Reihenfolge sie präsentiert werden sollen;
  • welche Elemente in schmaleren Ansichten gegebenenfalls ausgeblendet werden können;
  • wie die Objekte angeordnet werden sollen, wenn nicht mehr genügend Platz vorhanden ist, um sie nebeneinander darzustellen.


Das Ziel besteht nicht einfach darin, Inhalte auf Mobilgeräten zu reduzieren, sondern dafür zu sorgen, dass die Seite bei jeder Auflösung übersichtlich, gut lesbar und funktional bleibt.


Eine praktische Strategie

Bevor Sie die Responsive-Einstellungen anpassen, sollten Sie die Inhalte der Seite betrachten und festlegen, in welcher Reihenfolge sie am verständlichsten und effektivsten genutzt werden können.


Ermitteln Sie die wesentlichen Elemente, bewerten Sie die Beziehungen zwischen Texten, Bildern und anderen Objekten und überlegen Sie, welche ergänzenden Inhalte bei schmaleren Auflösungen gegebenenfalls ausgeblendet werden können.


Diese Bewertung sollte für jede Seite vorgenommen werden, da sich Inhalte und Prioritäten in den verschiedenen Bereichen der Website unterscheiden können.


Praktisches Beispiel

Stellen Sie sich die Seite eines Restaurants vor, auf der in der Desktop-Ansicht Bilder von Gerichten, beschreibende Texte, Kontaktinformationen und Schaltflächen für Reservierungen in mehreren Spalten angeordnet sind.


Wenn der verfügbare Platz kleiner wird, kann dieselbe Anordnung die Seite schwer lesbar machen. Sie können daher festlegen, in welcher Reihenfolge die verschiedenen Inhalte angezeigt werden, dafür sorgen, dass einige Objekte in die nächste Zeile wechseln, und bei Bedarf weniger wichtige Elemente bei bestimmten Auflösungen ausblenden.


Auf diese Weise können sich dieselben Inhalte an den verfügbaren Platz anpassen und gleichzeitig eine klare und leicht erfassbare Struktur beibehalten.


So verwalten Sie responsive Inhalte in WebSite X5

Nachdem Sie in WebSite X5 die Seite so erstellt haben, wie sie auf dem Desktop angezeigt werden soll, können Sie festlegen, welche Änderungen sie abhängig von den verschiedenen aktivierten Breakpoints durchlaufen soll. 

1. Erstellen Sie die Desktop-Seite

  • Gehen Sie zu Schritt 4 - Seiten.
  • Öffnen Sie die Seite, an der Sie arbeiten möchten.
  • Fügen Sie die benötigten Objekte in das Layout-Raster ein und organisieren Sie die Inhalte so, wie sie auf dem Desktop angezeigt werden sollen.

Diese Struktur bildet den Ausgangspunkt für die Definition des Seitenverhaltens bei niedrigeren Auflösungen.

2. Öffnen Sie die Responsive-Einstellungen

  • Klicken Sie auf die Schaltfläche Responsive.
  • Im Fenster Responsive-Einstellungen zeigt die Responsive Bar alle Ansichten an, die durch die für die Website aktivierten Breakpoints bestimmt werden.
  • Wählen Sie zunächst die Ansicht Desktop.

Das Raster zeigt die Seitenstruktur und stellt die Befehle bereit, mit denen Sie festlegen können, wie sie sich in den nachfolgenden Ansichten verändern soll.

3. Legen Sie die Reihenfolge der Objekte fest

Die Reihenfolge bestimmt, in welcher Abfolge die Objekte neu angeordnet werden, wenn sie bei geringerem verfügbaren Platz die auf dem Desktop festgelegte Anordnung nicht mehr beibehalten können.

  • Wählen Sie auf der Responsive Bar die Ansicht Desktop. 
  • Klicken Sie auf die Schaltfläche Reihenfolge.
  • Ändern Sie die Reihenfolge der Objekte entsprechend der logischen Abfolge der Inhalte und der gewünschten Anordnung auf der Seite. 
  • Fahren Sie mit der Anordnung bis zum letzten Objekt auf der Seite fort.

Wenn die Seite in mehrere Abschnitte unterteilt ist, verwaltet WebSite X5 die Reihenfolge der Objekte in jedem Abschnitt separat. Dadurch lässt sich die Reihenfolge der Objekte einfacher und schneller festlegen, insbesondere auf komplexeren Seiten..


#tip - Weitere Informationen finden Sie unter Responsive Objektanordnung. Wie organisiert man Inhalte korrekt in den verschiedenen Ansichten?


4. Wählen Sie, welche Objekte angezeigt oder ausgeblendet werden sollen

Nicht alle Objekte müssen bei jeder Auflösung angezeigt werden. Wenn ein Inhalt in einer schmaleren Ansicht weniger nützlich wird oder zu viel Platz einnimmt, können Sie entscheiden, ihn nicht anzuzeigen.


Gehen Sie dazu wie folgt vor:

  • Wählen Sie auf der Responsive Bar die Ansicht aus, von der aus Sie beginnen möchten.
  • Klicken Sie auf die Schaltfläche Objekt anzeigen/ausblenden. 
  • Klicken Sie auf die Objekte, die bei niedrigeren Auflösungen nicht angezeigt werden sollen.
  • Klicken Sie erneut auf die Schaltfläche Objekt anzeigen/ausblenden, um zu bestätigen und den Modus zu verlassen.

Ausgeblendete Objekte sind in den nachfolgenden Ansichten nicht vorhanden und die übrigen Inhalte werden im verfügbaren Platz neu angeordnet.


Berücksichtigen Sie dabei immer die tatsächliche Bedeutung der Inhalte: Das Ausblenden eines Objekts kann hilfreich sein, um die Seite zu vereinfachen, sollte jedoch wichtige Informationen nicht weniger zugänglich machen.

5. Verwenden Sie Zeilenumbrüche, um die Anordnung zu steuern

Wenn mehrere Objekte nebeneinander angeordnet sind, möchten Sie bei einer niedrigeren Auflösung möglicherweise genau festlegen, an welcher Stelle sie in die nächste Zeile wechseln sollen.


Genau dafür sind Zeilenumbrüche vorgesehen: Sie ermöglichen es, die Anordnung der Objekte in den nachfolgenden Ansichten zu verändern, ohne ihre Reihenfolge zu ändern.


So verwenden Sie diese Funktion, die nur in der Pro-Edition verfügbar ist:

  • Wählen Sie die gewünschte Ansicht.
  • Klicken Sie auf die Schaltfläche Zeilenumbruch.
  • An allen Stellen, an denen ein Zeilenumbruch eingefügt werden kann, erscheint eine graue gestrichelte Linie: Klicken Sie auf die gestrichelten Linien, um die gewünschten Zeilenumbrüche festzulegen. 
  • Klicken Sie erneut auf die Schaltfläche Zeilenumbruch, um zu bestätigen und den Modus zu verlassen.


#tip - Abschnitte und Zeilenumbrüche erfüllen unterschiedliche Funktionen. Abschnitte strukturieren das Layout-Raster, während Zeilenumbrüche steuern, wie die Objekte in den verschiedenen responsiven Ansichten in die nächste Zeile wechseln. Weitere Informationen finden Sie unter Responsive-Einstellungen. Wie erstellt man flexiblere Layouts mit Zeilenumbrüchen?


6. Verwalten Sie die Zwischenansichten

Wenn Sie mit der Pro-Edition arbeiten, können Sie insgesamt bis zu 10 Breakpoints festlegen. Nachdem Sie die Desktop-Ansicht eingerichtet haben, fahren Sie mit den nachfolgenden Ansichten in der Reihenfolge fort, die in der Responsive Bar angezeigt wird.

  • Verwenden Sie die Responsive Bar, um die Ansicht auszuwählen, die auf die Desktop-Ansicht folgt. 
  • Das Raster wird entsprechend den Einstellungen für die Desktop-Ansicht aktualisiert: Auf Grundlage dieser neuen Konfiguration können Sie bei Bedarf weitere Objekte ausblenden und zusätzliche Zeilenumbrüche einfügen.
  • Wiederholen Sie diese Schritte für alle nachfolgenden Ansichten.


#tip - Das Raster zeigt die Struktur, die die Seite in der ausgewählten Ansicht annimmt. Die von Ihnen vorgenommenen Änderungen bestimmen dagegen, wie die Seite in der unmittelbar folgenden Ansicht organisiert wird.


7. Verwalten Sie die Smartphone-Ansicht

Wenn Sie die Smartphone-Ansicht erreichen, sind keine weiteren Einstellungen erforderlich.


Die weiterhin sichtbaren Objekte werden vollständig linearisiert und entsprechend der ursprünglich festgelegten Reihenfolge untereinander angeordnet.


Prüfen Sie das Ergebnis dennoch, um sicherzustellen, dass die Abfolge der Inhalte verständlich bleibt und die wichtigsten Informationen leicht zugänglich sind.


Praktische Tipps

So erzielen Sie ein gutes responsives Ergebnis:

  • berücksichtigen Sie die logische Reihenfolge der Inhalte und nicht nur deren Wichtigkeit;
  • beginnen Sie mit der Desktop-Ansicht und gehen Sie der Reihe nach zu den schmaleren Ansichten über;
  • blenden Sie Inhalte nur aus, wenn sie in der jeweiligen Ansicht nicht erforderlich sind;
  • verwenden Sie Zeilenumbrüche, um den Übergang von einer nebeneinander angeordneten Darstellung zu einer Anordnung über mehrere Zeilen zu steuern;
  • halten Sie wichtige Inhalte auch in den schmaleren Ansichten gut lesbar und leicht zugänglich;
  • prüfen Sie das Ergebnis immer in der Vorschau an den verschiedenen Breakpoints.