Responsives Layout
Mit WebAcappella können Sie responsive Websites erstellen, die sich automatisch an verschiedene Bildschirmgrößen anpassen: Computer, Tablet und Mobilgeräte.
Die Software funktioniert wie ein modulares System, das auf Boxen, Zeilen und Spalten basiert.
Den Responsive-Modus verstehen
- Eine responsive Website muss sich anpassen, ohne an Lesbarkeit oder Ergonomie einzubüßen.
- WebAcappella enthält mehrere Breakpoints, mit denen das Layout an die 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 mittelgroße Bildschirme.
✔ Mobil-Modus: Optimierung für Smartphones.
Zugriff auf die Bildschirmoptionen
- Suchen Sie die Symbole für die verschiedenen Bildschirmgrößen oberhalb der Arbeitsfläche.
- Klicken Sie auf das Symbol, um jederzeit eine Vorschau der Website anzuzeigen.
Responsive Eigenschaften
- Bestimmte Eigenschaften können je nach Anzeigemodus (Desktop, Tablet, Mobilgerät) angepasst werden.
- Wenn eine Einstellung für einen bestimmten Bildschirm geändert werden kann, wird neben der Einstellung ein Symbol für den responsiven Modus angezeigt.
Durch Aktivieren dieser Optionen erhält jeder Anzeigemodus seine eigene Einstellung, ohne die anderen zu beeinflussen.
Ein weiteres Anwendungsbeispiel: Anpassen der Schriftgröße. Zu großer Text kann auf Mobilgeräten schwer lesbar sein.
Größe der Spalten ändern
Jede Zeile enthält eine oder mehrere Spalten, deren Breite zwischen 1 und 12 Einheiten variiert.
Durch Aktivieren des Spaltenmodus mit gedrückter Optionstaste (Mac) / Alt-Taste (Windows) lassen sich die Spalten leichter auswählen.
Wenn eine Spalte ausgewählt ist, können Sie:
- Sie verschieben, um die Struktur neu zu ordnen.
- Sie können ihre Größe ändern, um ihren Platz in der Zeile anzupassen.
- Verwenden Sie ein flüssiges Layout: Die Spalten werden automatisch entsprechend dem Bildschirm neu angeordnet.
- Überprüfen Sie die Größenanpassung der Spalten: Sie müssen angepasst werden, um eine zu enge Darstellung auf Mobilgeräten zu vermeiden.
Kaskadenmodus: Elemente in einer Spalte stapeln
Der Kaskadenmodus ermöglicht es, die vertikale Stapelung der in einer Spalte enthaltenen Elemente auf einem bestimmten Bildschirm zu erzwingen.
Dies ist besonders auf Mobilgeräten nützlich, um eine zu enge horizontale Anordnung zu vermeiden und die Lesbarkeit zu verbessern.
- Wählen Sie eine Zeile aus.
- Rufen Sie die Zeileneinstellungen auf (rechtes Fenster).
- Aktivieren Sie den Modus „Kaskade” für den aktuell ausgewählten Bildschirm.
- Die Elemente jeder Spalte werden automatisch vertikal gestapelt.
Verwenden Sie einen „Break”, um einen Zeilenumbruch zu erzwingen
Mit dem Element „Break” kann eine Zeile auf einem bestimmten Bildschirm unter die vorherige Zeile gesetzt werden. Diese Einstellung wird auf Bildschirme mit geringerer Größe übertragen, wodurch eine bessere Anpassung des Inhalts gewährleistet wird.
- Es muss eine Zeile ausgewählt werden.
- Öffnen Sie die Symbolleiste der Elemente.
- Wählen Sie das Element „Break” aus.
- Ziehen Sie den Break per Drag & Drop an die Stelle, an der Sie einen Zeilenumbruch erzwingen möchten.
⚠ Ein in eine Zeile eingefügter Break ist auf diesem Bildschirm und den darunter liegenden Bildschirmen aktiv.
Elemente je nach Bildschirm ausblenden
Wenn ein Element für einen kleinen Bildschirm zu komplex ist, kann es je nach Bildschirmgröße ausgeblendet werden.
- Wählen Sie ein Element aus.
- Rufen Sie die Sichtbarkeitsoptionen auf (in den Eigenschaften auf der rechten Seite).
- Aktivieren oder deaktivieren Sie die Optionen, um das Element auf Desktop, Tablet oder Mobilgerät anzuzeigen oder auszublenden.
Anzeige testen und fertigstellen
- Wechseln Sie regelmäßig in den mobilen Modus, um die Darstellung zu überprüfen.
- Passen Sie die Ränder und Abstände an, um zu enge Elemente zu vermeiden.
- Verwenden Sie die Vorschau (Cmd + T / Strg + T), um die Darstellung unter realen Bedingungen zu sehen.
Bewährte Verfahren
- Verwenden Sie eine flexible Spaltenstruktur für eine bessere Anpassungsfähigkeit.
- Aktivieren Sie den Kaskadenmodus für bestimmte Zeilen, um zu vermeiden, dass Elemente auf Mobilgeräten falsch ausgerichtet sind.
- Verwenden Sie einen Zeilenumbruch, wenn eine Zeile auf einem bestimmten Bildschirm unter die anderen Zeilen rutschen würde.
- Testen Sie jeden Anzeigemodus vor der Veröffentlichung.
- Optimieren Sie Bilder und Texte, um eine gute Lesbarkeit auf allen Bildschirmen zu gewährleisten.