Responsive Funktionen werden für AMPHTML-Anzeigen nicht unterstützt. Für Videoanzeigen, animierte GIFs und Bildanzeigen können Layouts in mehreren Größen verwendet werden.
Beim responsiven Webdesign wird ein flexibles Layout verwendet, das sich an verschiedene Ausrichtungen oder Größen des Darstellungsbereichs anpasst. Sie müssen also nicht mehrere Layouts erstellen. Google Web Designer bietet verschiedene Tools, mit denen Sie ein responsives Webdesign erstellen können.
Das Dokument sollte mindestens responsive Seitenabmessungen haben. Sie können auch ein fließendes Layout erstellen, indem Sie Objektgrößen und -positionen mit Prozentsätzen definieren. Verwenden Sie Medienregeln, um jedes Element für verschiedene Größen oder Größenbereiche des Darstellungsbereichs anzupassen.
Bildanzeigen können nicht responsiv sein. Der responsive Workflow kann jedoch in einem Layout mit mehreren Größen verwendet werden, um verschiedene Größen aus einem einzigen Dokument zu exportieren.
Abmessungen der responsiven Seite
Gesamtes Dokument responsiv machen
Bei responsiven Dokumenten müssen die Seitenbreite und -höhe auf 100 % gesetzt sein, damit der gesamte verfügbare Platz auf dem Bildschirm ausgefüllt wird.
-
Vorhandene Dokumente: Klicken Sie im Steuerfeld Responsiv auf das Kästchen Responsives Layout.
-
Neue Dateien: Klicken Sie im Dialogfeld „Neue Datei“ das Kästchen Responsives Layout an, wenn Sie Abmessungen festlegen. Diese Option ist nicht für alle Dateitypen verfügbar.
Wenn Sie den Seiteninhalt responsiv machen möchten, können Sie das fließende Layout und Medienregeln verwenden.
Fließendes Layout
Prozentbasierte Größen und Positionen
Übersicht über das Authoring mit Prozentwerten
Zusätzlich zu den Seitengrößen können Sie auch die Größe und Position von Elementen in Prozentsätzen statt in Pixeln festlegen. Bei einem Prozentsatz wird die Größe und Ausrichtung eines Elements relativ zum übergeordneten Container beibehalten, selbst wenn sich dieser ändert.
Wenn Sie Elemente ausrichten, können Sie mit der Option Fließendes Layout für die Ausrichtungs- und Verteilungstools ganz einfach prozentbasierte Positionen festlegen.
Medienregeln
Attribute und CSS-Stile für verschiedene Ausrichtungen und Größen überschreiben
Über Medienregeln kann Ihr Dokument die Größe und Ausrichtung des Darstellungsbereichs erkennen und entsprechend verschiedene Stile und Attribute anwenden. Während Inhalte auf einem Smartphone beispielsweise in einer einzelnen Spalte angezeigt werden, können sie auf einem Tablet in zwei Spalten erscheinen. Diese Änderungen, auch „Überschreibungen“ genannt, sind für bestimmte Größen oder Größenbereiche vorhanden.
Im Steuerfeld Responsiv können Sie zwischen verschiedenen Regelsätzen wechseln:
- Standardregeln: Wählen Sie Basisdokument bearbeiten für Änderungen an den Standardstilen oder für Änderungen, die für alle Größen des Darstellungsbereichs gelten (z. B. Assets, Komponenten oder Ereignisse hinzufügen oder löschen).
- Medienregeln: Wählen Sie eine bestimmte Größe oder einen Größenbereich aus, um die Standardstile und Attribute für diese Größe des Darstellungsbereichs zu überschreiben.
Wenn eine Medienregel ausgewählt wurde, können Sie Stile festlegen, die nur für diese Größe oder diesen Größenbereich gelten. Es lassen sich beispielsweise die Position, Größe, Quelle, Sichtbarkeit oder Animation eines Elements anpassen. Sie können in Google Web Designer auch Textinhalt, Einstellungen zur Textanpassung und Komponenteneigenschaften überschreiben.
