Kompatibilität:
WebSite X5 Evo und Pro
Beim responsiven Webdesign ist es grundlegend, ganz unabhängig von der Komplexität der Website, die erstellt werden soll, dass eine gute Strategie für die Verwaltung der Inhalte entwickelt wird, dabei ist es nicht nur wichtig, welche Inhalte erscheinen sollen, sondern auch, wie diese präsentiert werden:
- Welche Inhalte sollen auf der Seite erscheinen?
- Sollen sowohl für den Desktop als auch für die mobilen Geräte dieselben Inhalte erscheinen?
- Falls nicht, welche Inhalte sollen für das mobile Gerät weggelassen werden?
- In welcher Reihenfolge sollen die Inhalte angeordnet werden?
- Usw..
Eine gute Strategie ist es, eine Liste aller Inhalte zu machen, die auf einer Seite erscheinen sollen und diese nach wichtigeren und unwichtigeren Inhalten zu ordnen: Auf diese Weise ist es einfacher, wesentliche Inhalte zu identifizieren, also solche die immer sichtbar bleiben müssen, sowie zusätzliche Inhalte, die dagegen verborgen werden können, wenn, bei geringeren Auflösungen, nur das präsentiert werden kann, was wirklich wichtig ist. Diese Anordnung muss dann für jede Seite der Website wiederholt werden.
Um diesen Mechanismus besser zu verstehen, kann die Website eines Restaurants als klassisches Beispiel genannt werden. Wenn die Website auf einem Desktop angezeigt wird, kann man viel mit Bildern und Animationen arbeiten, die die verschiedenen Gerichte, die das Restaurant anbietet, vorstellen, um die Besucher der Website neugierig zu machen und Appetit zu machen. Wird jedoch diese Website von einem mobilen Gerät aus besucht, kann man davon ausgehen, dass der Nutzer die Beurteilungen anderer Gäste lesen möchte und die Adresse und Kontaktinformationen des Restaurants sucht, großformatige Bilder sind in diesem Fall nicht von Nutzen. Daher ist es erforderlich bei der Darstellung für das mobile Gerät an Bildern zu sparen, um die Anforderungen eines Benutzers zu erfüllen, der mit einem mobilen Gerät auf die Seite zugreift (kleiner Bildschirm, möglicherweise keine schnelle Internetverbindung u.a.) und der unterwegs schnelle und genaue Informationen benötigt.
In WebSite X5 ist es möglich, die Seite, sobald sie erstellt wurde, wie sie für die Desktop-Ansicht angezeigt wird (siehe Einrichtung einer Seite mit dem Gestaltungsraster (Grid), festzulegen, welche Änderungen an dieser Seite in Abhängigkeit von den verschiedenen aktivierten Umbruchpunkte vorgenommen werden müssen. Genauer gesagt, muss wie folgt vorgegangen werden:
- Auf Schritt 4 - Seiten wird die Seite erstellt, indem die erforderlichen Objekte ins Gestaltungsraster gezogen werden und dann die jeweiligen Inhalte eingegeben werden. Die so erstellte Seite ist die, die für Auflösungen angezeigt wird, die größer sind als der Desktop-Umbruchpunkt.
- Nachdem die Seite erstellt wurde, auf die Schaltfläche
Responsive klicken, um das folgende Fenster aufzurufen. In diesem Fenster wird ebenfalls die Responsiv-Leiste mit allen Ansichten angezeigt, die von den für die Website aktivierten Umbruchpunkten bestimmt werden. Markieren Sie hier die Intervalle auf der Responsiv-Leiste, beginnend mit der Desktop-Ansicht und dann absteigend die weiteren bis zur Smartphone-Ansicht. - Nach Auswahl der Desktop-Ansicht wird im Raster die im Fenster eingestellte Konfiguration eingestellt Erstellen der Seiten. Klicken Sie auf die Schaltfläche
Anordnung, um den Modus zu aktivieren, in dem die Anordnung der ins Gestaltungsraster eingefügten Objekte vorgenommen werden kann. Für jedes in das Gestaltungsraster eingefügte Objekt wird eine Zahl auf der Grundlage der automatisch vom Programm durchgeführten Anordnung zugewiesen.
- Ändern Sie die Anordnung der Objekte in Abhängigkeit von der Wichtigkeit, die bestimmte Inhalte haben, und wie diese auf der Seite angeordnet werden. Um mit der Anordnung fortzufahren, gibt es verschiedene Möglichkeiten:
- Durch die Einstellung der Anordnung> Alle Objekte von Anfang an anordnen muss man damit beginnen, auf das Objekt zu klicken, das zuerst positioniert werden soll, und dann unter Beachtung der Reihenfolge auf alle anderen Objekte.
- Bei der Einstellung von Anordnung > Mit der Anordnung eines Objekts fortfahren muss man auf das Objekt klicken, mit dem man dann in der Anordnung fortfahren will. Alle vorangehenden Objekte werden bestätigt, während man auf alle nachfolgenden Objekte klicken muss, um die Position in der Anordnung zu definieren.
WebSite X5 führt durch den Anordnungsvorgang: Sobald ein Objekt ausgewählt wird, werden alle Objekte, auf die man klicken kann ausgewählt, um das festzulegen, das folgen soll. Die für die Desktop-Ansicht eingestellte Anordnung wird auch für die anderen Ansichten angezeigt (mehr Informationen dazu: Wie funktioniert die Anordnung der Objekte).
- Die Anordnung endet:
- Wenn man auf das letzte Objekt der Seite klickt.
- Wenn man auf Anordnung> Anordnung abschließen klickt: So wird der Vorgang beendet, indem die aktuelle Anordnung bestätigt wird.
- Wenn man auf Anordnung > Anordnung abbrechen klickt: So wird der Vorgang beendet, indem die durchgeführten Änderungen annulliert und die ursprüngliche Anordnung wiederhergestellt wird.
- Klicken Sie auf die Schaltfläche
Objekt einblenden/ausblenden, um den Modus zu aktivieren, in dem die Objekte als ausgeblendet eingerichtet werden können. Klicken Sie auf die Objekte, die bei Auflösungen, die niedriger sind als die ausgewählte, nicht mehr angezeigt werden sollen. Klicken Sie ein zweites Mal auf die Schaltfläche 
Objekt einblenden/ausblenden, um diesen Modus zu verlassen. 
Klicken Sie auf die Schaltfläche 
, um den Modus zu starten, in dem es möglich ist, auf die Ausrichtung der Objekte einzuwirken, indem einige gezwungen werden, einen neuen Absatz einzunehmen und damit in eine neue Zeile zu gehen, bei Auflösungen, die geringer sind, als die Desktop-Auflösung (die zur Zeit ausgewählt ist). An allen Stellen, an denen ein Zeilenumbruch eingefügt werden kann, erscheint eine graue gestrichelte Linie: Klicken Sie auf die gestrichelte Linie, um die gewünschten Zeilenumbrüche einzustellen. Klicken Sie erneut auf die Schaltfläche 
Zeilenumbruch um zu bestätigen und diesen Modus zu verlassen (mehr Informationen dazu: Warum und wie werden Umbrüche eingestellt)
In der Edition Pro können insgesamt bis zu 10 Umbruchpunkte eingestellt werden. Sind Zwischenansichten vorhanden, klicken Sie auf die Responsiv-Leiste, um die der Desktop-Ansicht folgende Ansicht auszuwählen. Das Gestaltungsraster (Grid) wird auf der Grundlage der Einstellungen für die Desktop-Ansicht eingerichtet: Für diese neue Konfiguration können, falls erforderlich, weitere Objekte als nicht sichtbar eingerichtet werden oder weitere Umbrüche definiert werden. Wiederholen Sie diese Schritte für alle folgenden Ansichten.- Wenn Sie die Smartphone-Ansicht erreichen, müssen Sie nichts mehr tun, da sämtliche noch sichtbaren Objekte einfach linearisiert werden, dass heißt auf der Grundlage der zu Beginn eingestellten Anordnung unter einander angeordnet werden.
In dieser Weise kann man sehen, dass das Gestaltungsraster (Grid) dieselbe Struktur zeigt, die die Seite im Intervall der Auflösungen einnimmt, die in der ausgewählten Ansicht identifiziert ist. Alle Änderungen, die vorgenommen werden, bestimmen dagegen die Struktur, die die Seite im Auflösungsintervall einnimmt, die mit der unmittelbar folgenden Ansicht verbunden ist.
#Tipp - Leere Zellen. Wird eine neue Seite in einer Website erstellt, die reponsiv gemacht werden soll, wird empfohlen, dafür zu sorgen, dass das Gestaltungsraster nicht aus leeren Zellen besteht. Das Programm behandelt die leeren Zellen nämlich, als ob es sich um Objekte (leere Objekte) handelte und weist jedem dieser Objekte eine Position in der Anordnung zu: Diese Positionen können nicht geändert werden, beeinflussen aber die Anordnungsmöglichkeiten der tatsächlichen Objekte. Um sich für die Anordnung der Objekte eine größtmögliche Gestaltungsfreiheit zu bewahren, ist es daher besser, leere Zellen zu vermeiden und dafür lieber leere Objekte einzufügen: Wenn diese Objekte manuell eingefügt werden, beeinflussen sie die Komposition der Seite nicht und können manuell angeordnet werden.