Responsive Layout

WebAcappella ermöglicht die Erstellung von adaptiven (responsiven) Websites, die sich automatisch an die verschiedenen Bildschirmgrößen anpassen können: Computer, Tablet und Handy.

Die Software funktioniert wie ein modulares System, das auf Boxen, Zeilen und Spalten basiert.

Den responsiven Modus verstehen

  • Eine responsive Website muss sich anpassen, ohne an Lesbarkeit oder Ergonomie zu verlieren.

  • WebAcappella enthält mehrere Unterbrechungspunkte (breakpoints), mit denen das Layout an die jeweilige Bildschirmgröße angepasst werden kann.

  • Die drei wichtigsten verfügbaren Anzeigemodi sind :

    ✔ Desktop-Modus: Anzeige auf einem großen Bildschirm (PC, Mac).

    ✔ Tablet-Modus: Anpassung an mittlere Bildschirme.

    ✔ Mobile Mode: Optimierung für Smartphones.

Auf die Bildschirmauswahl zugreifen

  1. Achten Sie auf die Symbole für die verschiedenen Bildschirmgrößen über der Arbeitsfläche.

  2. Klicken Sie auf das Symbol, um jederzeit die Seitenübersicht anzuzeigen.

../../_images/pt_1_2.png

Responsive Eigenschaften

  1. Einige Eigenschaften können je nach Anzeigemodus (Desktop, Tablet, Mobile) angepasst werden.

  2. Wenn eine Einstellung für einen bestimmten Bildschirm geändert werden kann, wird neben der Einstellung ein Symbol für den responsiven Modus angezeigt.

    ../../_images/pt_3_4.png

Wenn Sie diese Optionen aktivieren, hat jeder Anzeigemodus seine eigene Einstellung, ohne die anderen zu beeinflussen.

Ein weiteres Anwendungsbeispiel ist das Anpassen der Schriftgröße. Ein zu großer Text kann auf dem Handy schwer zu lesen sein.

Die Größe von Spalten ändern

Jede Zeile enthält eine oder mehrere Spalten, deren Breite zwischen 1 und 12 Einheiten variiert.

Wenn Sie den Spaltenmodus aktivieren, indem Sie die Optionstaste (Mac) / Alt-Taste (Windows) gedrückt halten, können Sie die Spalten leichter auswählen.

Wenn eine Spalte ausgewählt ist, können Sie :

  • Verschieben Sie sie, um die Struktur neu zu ordnen.

  • Ändern Sie ihre Größe, um ihre Belegung in der Zeile anzupassen.

  • Fließende Anordnung verwenden : Die Spalten ordnen sich automatisch neu an, je nachdem, wie der Bildschirm aussieht.

  • Überprüfen Sie die Größe der Spalten: Sie müssen angepasst werden, damit sie auf Mobilgeräten nicht zu eng angezeigt werden.

Kaskadenmodus: Elemente in einer Spalte stapeln

Mit dem Kaskadenmodus können Sie erzwingen, dass die in einer Spalte enthaltenen Elemente auf einem bestimmten Bildschirm vertikal gestapelt werden.

Sie ist besonders auf Mobilgeräten nützlich, um eine zu enge horizontale Anordnung zu vermeiden und die Lesbarkeit zu verbessern.

  1. Eine Zeile auswählen.

  2. Greifen Sie auf die Einstellungen der Zeile zu (rechtes Panel).

  3. Aktiviert den Modus „Wasserfall“ für den aktuell ausgewählten Bildschirm.

  • Die Elemente in jeder Spalte werden automatisch vertikal gestapelt.

    ../../_images/pt_5_7.png

Einen „Break“ verwenden, um einen Zeilenumbruch zu erzwingen

Mit dem Break-Element können Sie auf einem bestimmten Bildschirm erzwingen, dass eine Zeile unterhalb der vorherigen Zeile verläuft. Diese Einstellung wird auf kleinere Bildschirmgrößen vererbt und garantiert eine bessere Anpassung des Inhalts.

  • Es ist notwendig, eine Zeile auszuwählen.

  1. Öffnet die Symbolleiste für Elemente.

  2. Wählen Sie das Element Break aus.

../../_images/break_00.png

  1. Drag & Drop des Break in eine Zeile, in der ein Zeilenumbruch erzwungen werden soll.

⚠ Ein in eine Zeile eingefügter Break wird auf diesem Bildschirm und den kleineren Größen aktiv sein.

../../_images/break_10.png

Elemente je nach Bildschirm ausblenden

Wenn ein Element für einen kleinen Bildschirm zu komplex ist, kann es je nach Bildschirmgröße ausgeblendet werden.

  1. Wählen Sie ein Element aus.

  2. Greifen Sie auf die Sichtbarkeitsoptionen zu (in den Eigenschaften auf der rechten Seite).

  3. Aktivieren oder deaktivieren Sie die Optionen, um das Element auf dem Desktop, Tablet oder Handy anzuzeigen oder auszublenden.

../../_images/masquage_00.png

Testen und Fertigstellen der Anzeige

  • Wechseln Sie regelmäßig in den mobilen Modus, um das Rendering zu überprüfen.

  • Passen Sie die Ränder und Abstände an, um zu enge Elemente zu vermeiden.

  • Verwenden Sie die Vorschau (Cmd + T / Ctrl + T), um das Rendering unter realen Bedingungen zu sehen.

Gute Praktiken

  • Verwenden Sie eine flexible Säulenstruktur für eine bessere Anpassungsfähigkeit.

  • Aktivieren Sie den Wasserfallmodus für einige Zeilen, um zu verhindern, dass Elemente auf mobilen Geräten falsch ausgerichtet sind.

  • Verwenden Sie einen Break in einer Zeile, wenn sie von einem bestimmten Bildschirm aus unter den anderen hindurchgehen soll.

  • Testen Sie jeden Anzeigemodus vor der Veröffentlichung.

  • Optimieren Sie Bilder und Texte, um eine gute Lesbarkeit auf allen Bildschirmen zu gewährleisten.