Kompatibilität:

WebSite X5 Evo und Pro

Im Responsive Web Design bedeutet die korrekte Gestaltung einer Seite nicht nur, zu entscheiden, welche Inhalte veröffentlicht werden, sondern auch festzulegen, wie sich diese Inhalte an verschiedene Geräte anpassen sollen.


Ein und derselbe Inhalt kann je nach Darstellung auf Desktop oder Smartphone eine unterschiedliche Rolle spielen: Auf großen Bildschirmen können visuelle Elemente hervorgehoben werden, während auf mobilen Geräten häufig schnelle Zugänglichkeit, Lesbarkeit und der unmittelbare Zugriff auf wesentliche Informationen im Vordergrund stehen.


Aus diesem Grund erfordert eine gute responsive Strategie eine intelligente Organisation der Inhalte, bei der Prioritäten, Reihenfolge der Darstellung und tatsächliche Sichtbarkeit in den verschiedenen Breakpoints festgelegt werden.


Warum es wichtig ist, responsive Inhalte zu planen

Bei der Gestaltung einer responsiven Seite sollten Sie sich fragen:

  • welche Inhalte wirklich wesentlich sind;
  • welche auf mobilen Geräten reduziert oder ausgeblendet werden können;
  • welche Anordnung der Inhalte am effektivsten ist;
  • wie die Benutzererfahrung auf verschiedenen Geräten optimiert werden kann.


Ziel ist es, stets die nützlichsten Inhalte auf die effektivste Weise bereitzustellen.


Eine praktische Strategie

Eine gute Strategie besteht darin, alle Inhalte, die auf einer Seite vorhanden sein sollen, aufzulisten und von den wichtigsten zu den weniger wichtigen zu ordnen: Auf diese Weise lassen sich die wesentlichen Inhalte, die immer verfügbar sein müssen, leichter identifizieren sowie die ergänzenden Inhalte, die bei geringeren Auflösungen ausgeblendet werden können, wenn nur das wirklich Notwendige angezeigt werden soll. Selbstverständlich sollte dieser Ordnungsprozess für jede Seite der Website wiederholt werden.


Praktisches Beispiel

Um diesen Mechanismus besser zu verstehen, betrachten wir das Beispiel einer Restaurant-Website. Wird die Website auf einem Desktop angezeigt, kann man stark auf Bilder und Animationen setzen, die die verschiedenen Gerichte präsentieren und die Nutzer ansprechen sowie neugierig machen. Wird dieselbe Website jedoch auf einem mobilen Gerät aufgerufen, kann man davon ausgehen, dass der Nutzer eher daran interessiert ist, Bewertungen zu lesen oder Kontaktinformationen zu finden, anstatt große Bilder anzusehen. Es wird daher notwendig, den Einsatz von Bildern zu reduzieren, um den Anforderungen eines Nutzers gerecht zu werden, der ein weniger leistungsfähiges Gerät verwendet (kleiner Bildschirm, nicht unbedingt hohe Bandbreite usw.) und unterwegs schnelle und präzise Informationen benötigt.


Wie man responsive Inhalte in WebSite X5 verwaltet

In WebSite X5 können Sie, nachdem Sie die Seite so erstellt haben, wie sie auf dem Desktop angezeigt werden soll, festlegen, welche Änderungen sie je nach den aktivierten Breakpoints durchlaufen soll. 

1. Desktop-Seite erstellen

  • Gehen Sie zu Schritt 4 - Seiten.
  • Erstellen Sie die Seite, indem Sie die erforderlichen Objekte in das Layout-Raster ziehen und die Inhalte einfügen. Die so erstellte Seite wird bei Auflösungen oberhalb des Breakpoints Desktop angezeigt.

2. Responsive Einstellungen öffnen

  • Klicken Sie auf die Schaltfläche Responsive.
  • Im Fenster Responsive Einstellungen zeigt die Responsive Bar alle durch die aktivierten Breakpoints bestimmten Ansichten.

3. Reihenfolge der Objekte verwalten

  • Gehen Sie der Reihe nach vor: Beginnen Sie, indem Sie in der Responsive Bar die Ansicht Desktop auswählen. 
  • Im Raster wird die Konfiguration aus dem Fenster Seitenerstellung übernommen. 
  • Klicken Sie auf die Schaltfläche Reihenfolge, um den Modus zu aktivieren, in dem die Objekte im Raster neu angeordnet werden können. Für jedes Objekt wird eine Nummer angezeigt, die der automatisch vom Programm festgelegten Reihenfolge entspricht.


  • Ändern Sie die Reihenfolge der Objekte entsprechend ihrer Bedeutung und der gewünschten Anordnung auf der Seite. Sie können dabei verschiedene Vorgehensweisen wählen:
    • Wenn Sie Reihenfolge > Alle Objekte von Anfang an neu anordnen auswählen, beginnen Sie, indem Sie auf das Objekt klicken, das an erster Stelle stehen soll, und fahren dann fort, alle weiteren Objekte der Reihe nach auszuwählen.
    • Wenn Sie Reihenfolge > Reihenfolge ab einem Objekt fortsetzen auswählen, klicken Sie auf das Objekt, von dem aus die Reihenfolge fortgesetzt werden soll. Alle vorherigen Objekte werden bestätigt, während Sie für die nachfolgenden Objekte deren Position festlegen müssen.

Der Sortiervorgang ist geführt: Nachdem ein Objekt ausgewählt wurde, werden alle Objekte, die als nächstes ausgewählt werden können, mit einem roten Rahmen hervorgehoben. Die für die Ansicht Desktop festgelegte Reihenfolge wird auch für alle weiteren Ansichten übernommen.

  • Der Sortiervorgang endet:
    • wenn Sie auf das letzte Objekt der Seite klicken;
    • wenn Sie auf Reihenfolge > Sortierung abschließen klicken: Die aktuelle Reihenfolge wird bestätigt;
    • wenn Sie auf Reihenfolge > Sortierung abbrechen klicken: Die Änderungen werden verworfen und die ursprüngliche Reihenfolge wird wiederhergestellt.


#tip - Weitere Informationen finden Sie unter Responsive Objektanordnung. Wie lassen sich Inhalte in den verschiedenen Ansichten korrekt organisieren?


4. Inhalte ein-/ausblenden

  • Klicken Sie auf die Schaltfläche Objekt anzeigen/ausblenden: In diesem Modus können Sie Objekte als unsichtbar festlegen. 
  • Klicken Sie auf die Objekte, die bei niedrigeren Auflösungen als der aktuell ausgewählten nicht mehr angezeigt werden sollen.
  • Klicken Sie erneut auf die Schaltfläche Objekt anzeigen/ausblenden, um zu bestätigen und diesen Modus zu verlassen.

5. Zeilenumbrüche verwalten

  • Klicken Sie auf die Schaltfläche Zeilenumbruch: In diesem Modus können Sie die Ausrichtung der Objekte beeinflussen, indem Sie einige davon dazu zwingen, bei niedrigeren Auflösungen als der aktuell ausgewählten Ansicht Desktop in die nächste Zeile zu springen. 
  • An allen Stellen, an denen ein Zeilenumbruch eingefügt werden kann, erscheint eine graue gestrichelte Linie: Klicken Sie auf diese Linien, um die gewünschten Zeilenumbrüche festzulegen. 
  • Klicken Sie erneut auf die Schaltfläche Zeilenumbruch, um zu bestätigen und diesen Modus zu verlassen.


#tip - Weitere Informationen finden Sie unter Responsive Einstellungen. Wie lassen sich flexiblere Layouts mit Zeilenumbrüchen erstellen?


6. Zwischenansichten verwalten

Wenn Sie mit der Pro-Version arbeiten, können Sie bis zu 10 Breakpoints festlegen: Dadurch wird es notwendig, die Darstellung der Inhalte auch bei Zwischenauflösungen zu verwalten.

  • Verwenden Sie die Responsive Bar, um die Ansicht auszuwählen, die auf Desktop folgt. 
  • Das Raster wird entsprechend der Desktop-Konfiguration aktualisiert: Passen Sie diese neue Konfiguration an, indem Sie bei Bedarf weitere Objekte ausblenden oder zusätzliche Zeilenumbrüche einfügen.
  • Wiederholen Sie diese Schritte für alle weiteren Ansichten.

7. Smartphone-Ansicht verwalten

In der Ansicht Smartphone müssen Sie nichts weiter tun, da alle weiterhin sichtbaren Objekte automatisch linearisiert werden, also entsprechend der zuvor festgelegten Reihenfolge untereinander angeordnet werden.


#tip - Das Raster zeigt die Struktur, die die Seite im durch die ausgewählte Ansicht definierten Auflösungsbereich annimmt. Die vorgenommenen Änderungen bestimmen hingegen die Struktur, die die Seite im unmittelbar folgenden Auflösungsbereich annehmen wird.


Achten Sie auf leere Zellen

Wenn Sie eine neue Seite in einer responsiven Website erstellen, achten Sie darauf, dass sich im Layout-Raster keine leeren Zellen befinden. Das Programm behandelt leere Zellen so, als wären sie (leere) Objekte, und weist jedem eine Position in der Reihenfolge zu: Diese Positionen können nicht geändert werden und beeinflussen die Anordnungsmöglichkeiten der tatsächlichen Objekte. Um die größtmögliche Flexibilität bei der Anordnung der Objekte zu behalten, sollten Sie daher leere Zellen vermeiden und stattdessen leere Objekte einfügen: Werden diese manuell eingefügt, beeinflussen sie die Seitenstruktur nicht und können frei angeordnet werden.


Praktische Tipps

Für bessere Ergebnisse:

  • planen Sie Inhalte immer nach Priorität;
  • beginnen Sie mit der Desktop-Version;
  • vereinfachen Sie schrittweise;
  • testen Sie alle Ansichten;
  • bevorzugen Sie Geschwindigkeit und Lesbarkeit auf mobilen Geräten;
  • überprüfen Sie das Ergebnis immer in der Vorschau.


Zusammenfassung

Responsive Inhalte richtig zu verwalten bedeutet, Seiten zu gestalten, die sich nicht nur in ihrer Struktur, sondern auch in der Relevanz und Nutzbarkeit ihrer Inhalte anpassen.


Mit WebSite X5 können Sie Reihenfolge, Sichtbarkeit und Anordnung der Objekte steuern, ohne in den Code eingreifen zu müssen, und so eine effektivere, moderne und für jedes Gerät optimierte Benutzererfahrung schaffen.