Responsivität

Was Sie wissen müssen

Bilder

Responsive Fotografie

Im Bild rechts sehen Sie, wie Bilder auf verschiedenen Geräten erscheinen. Wenn Sie ein Landschaftsbild auf einem Hochformatgerät (z.B. einem Mobiltelefon) verwenden, werden die Seiten abgeschnitten. Wenn Sie ein Hochformatbild auf einem Querformatgerät (z.B. einem Desktop) verwenden, werden Ober- und Unterseite abgeschnitten.


Stellen Sie sicher, dass Sie von jedem Hintergrundbild zwei Versionen haben: eine Quer- und eine Hochformatversion. Wenn Sie einen eigenen Fotografen haben, den Sie beauftragen können, dann bitten Sie diesen, direkt beide Versionen aufzunehmen. Wenn Sie keinen Fotografen haben, wählen Sie zwei Bilder selbst aus oder schneiden Sie diese auf eine mobile-/tablet-freundliche Version zu. Das Zuschneiden kann im Editor mit dem "Cropper" (Zuschneidewerkzeug) in Ihrer Medienbibliothek durchgeführt werden.

Bildfokus

Sie können den Fokus Ihres Bildes anhand des Fokusrasters bestimmen. Sie finden diese Option in der Desktop-Ansicht: Gehen Sie zu Block “Settings > Background > Background > Background Focus”.

Erstellen

Ränder und Paddings

Wenn Sie mit der Erstellung Ihrer Publikation beginnen, starten Sie immer mit der Desktop-Ansicht. Mit der Option "Column-Alignment" (Spaltenausrichtung) können Sie Ihre Texte und Bilder (horizontal und vertikal) positionieren und über das "Margin and Padding" feinjustieren. Sie sollten diese beiden Optionen lediglich zur Feinabstimmung nutzen!

Columns (Spalten)

Auf einem Hochformat-Gerät wie einem Tablet oder Mobiltelefon werden alle Spalten untereinander angezeigt. Seien Sie sich dessen stets bewusst! Sie können jedoch die Spalten auf dem Handy/Tablett leicht umordnen, um die folgende Situation zu vermeiden (Text - Bild - Bild - Bild - Text):

Hotspots

Dieser kann wirklich knifflig sein! Glücklicherweise sind Ihre Probleme gelöst, wenn Sie ein alternatives Bild für Tablet-/Handy-Hochformat hochladen und die Hotspots separat positionieren.

Sichtbarkeit – Blöcke, Bilder und Buttons

Wenn es einen Block, ein Bild oder einen Button gibt, die Sie nicht auf einem bestimmten Gerät anzeigen möchten, können Sie dies über die Option "Visibility" (Sichtbarkeit) einstellen.

Fullscreen-Hintergrundvideos

Sie können zwei Arten von Videos in Ihre Publikation einfügen:

● Ein Videoelement, das startet, wenn Sie auf die Wiedergabetaste klicken.

● Ein Fullscreen Hintergrundvideo, das automatisch startet, wenn Sie die Seite öffnen.


Das Fullscreen-Hintergrundvideo funktioniert nicht auf dem Handy (weil die Mobilfunkanbieter es blockiert haben) oder auf iPads (das iPad unterstützt kein Flash, das für das Autoplay benötigt wird).


Also: Wenn Sie ein Fullscreen-Hintergrundvideo haben, müssen Sie auch ein Overlay erstellen. In dieses Overlay können Sie das gleiche Video einfügen, jedoch als Element. Verwenden Sie einen starken Handlungsaufruf ("Call-to-Action") bei der Benennung des Buttons, wie z.B. " Video ansehen" und blenden Sie diesen mit der oben beschriebenen Option “Visibility” (Sichtbarkeit) aus der Desktop-Ansicht aus.

Tablet- und Handy-Ansicht (Hochformat) im Editor

Sie können Ihre Publikation feinjustieren, indem Sie auf das Desktop-Symbol in der oberen Mitte Ihres Editor-Bildschirms klicken und Tablet und Mobile View auswählen.

Feinjustierung von Margin und Padding

Nehmen Sie Anpassungen vor, indem Sie Margin und Padding hinzufügen. Sie können Ihren Inhalt nach oben, unten, links und rechts verschieben, so dass sich Ihr Hintergrundbild an der richtigen Stelle befindet und der Text wichtige Teile des Bildes nicht bedeckt.


Durch Hinzufügen von Padding am oberen Rand Ihrer Seite können Sie verhindern, dass der Seitentitel von der Navigationsleiste überlagert wird. Möglicherweise müssen Sie die Navigationsleiste ausblenden (Desktop-Symbol > Navigation anzeigen: aus), um dieses Padding entsprechend zu ändern.


Wenn Sie einen Block mit nur einem Hintergrundbild (ohne Text) haben, könnte er auf dem Handy und dem Tablett sehr klein aussehen, da er keinen Inhalt enthält. Ziehen Sie das Padding in den Block um die Höhe zu erhöhen, so dass das Bild vollständig sichtbar ist.


Feinjustierung der Schriftgröße

Sie können die Größe der Schriften so anpassen, dass Ihre Titel auf jedes Gerät passen, selbst auf die kleinsten! Sie können dies tun, indem Sie auf ein Textfeld klicken und die Größe des Textes in der (Styling-)Leiste oben auf der Seite ändern. Es ist auch möglich, Ihrer Schrift eine andere Farbe zu geben. Es hat keinen Einfluss auf das Styling, das Sie auf den beiden anderen Geräten haben.


Die mobile Ansicht ist eine allgemeine Größe. Es ist ratsam, Ihre Publikation auch auf Ihrem eigenen (echten!) Handy zu überprüfen. Ein iPhone 5 ist das kleinste Gerät, das Sie überprüfen sollten. Wörter mit vielen Zeichen passen manchmal nicht auf dieses Gerät, so dass Sie die Schriftgröße für das Handy verringern können. Die Desktop- und Tablet-Versionen behalten ihre ursprüngliche Schriftgröße.


Sie können das Design für jedes Ansichtsfenster bearbeiten, indem Sie die "Themes" (Designeinstellungen) in dem jeweiligen Ansichtsfenster öffnen.

Bilder austauschen

Wenn Sie zur Tablet-/Mobilnsicht wechseln, können Sie auch das Hintergrundbild eines Blocks ersetzen.


Dies kann nützlich sein, wenn Sie ein Bild haben, z.B. mit einer Person auf der linken und einer Person auf der rechten Seite. Auf ein “Hochformatsgerät” passt nur eine Person. Deshalb braucht man ein Bild, in dem die beiden Menschen näher beieinander sind. Wie bereits erwähnt, stellen Sie bitte sicher, dass Sie zwei Fotomöglichkeiten haben (Querformat und Hochformat), so dass Sie eine Alternative für Handy und Tablet haben.