Responsives Layout – Übersicht

Anzeigen mit responsiven Layouts mithilfe von Medienabfragen erstellen
Beim responsiven Webdesign werden für Anzeigen flexible statt feste Layouts verwendet. Sie erstellen also eine einzige Anzeige, deren Elemente sich an die Ausrichtung und Größe des jeweiligen Bildschirms anpassen, anstatt mehrere ähnliche Anzeigen entwerfen zu müssen. In Übereinstimmung mit den Standardprinzipien des responsiven Webdesigns werden in Google Web Designer mithilfe von CSS3-Medienabfragen verschiedene Stilregeln für Anzeigen unterschiedlicher Größe angewendet.

Responsives Dokument erstellen

Wenn Sie eine neue Datei erstellen, ist beim Auswählen der Abmessungen möglicherweise das Kästchen Responsives Layout verfügbar. Klicken Sie es an, so werden die Breite und die Höhe der Seite auf 100 % festgelegt, sodass der gesamte verfügbare Platz auf dem Bildschirm ausgefüllt wird. Sie können auch das Kästchen An Darstellungsbereich anpassen für ein vorhandenes Dokument anklicken. Dies hat die gleiche Wirkung.

Wenn Sie die Elemente in Ihrem Dokument als responsive Elemente festlegen möchten, können Sie das fließende Layout mit prozentbasierten Positionen verwenden und Haltepunkte hinzufügen.

Haltepunkte

Mithilfe von Medienabfragen ändern Webentwickler das Layout und den Stil einer Webseite, wenn diese horizontal maximiert wird. Während der Inhalt auf einem Smartphone möglicherweise in einer einzelnen Spalte dargestellt wird, kann er auf einem Tablet in zwei Spalten erscheinen, da die Ansicht breiter ist. Diese Layoutänderungen finden an Haltepunkten statt. Das sind bestimmte Breiten des Darstellungsbereichs, an denen sich die Stilregeln ändern.

Mit Google Web Designer können Sie sowohl für horizontale als auch für vertikale Änderungen des Darstellungsbereichs Haltepunkte platzieren und so eine einzige Anzeige erstellen, deren Stil sich entsprechend an verschiedene Größen und Ausrichtungen anpasst. Sie haben auch die Möglichkeit, verschiedene Hoch- und Querformate mit einem separaten Satz von Haltepunkten für jede Ausrichtung einzurichten.

Horizontale und vertikale Haltepunkte bilden ein Raster

Wenn Sie sowohl horizontale als auch vertikale Haltepunkte erstellen, definieren Sie mehrere rechteckige Bereiche mit einem jeweils anderen Satz von Stilen. Wenn Sie beispielsweise einen vertikalen und einen horizontalen Haltepunkt verwenden, erstellen Sie vier Stile – einen für jeden eindeutigen Satz von Medienregeln.

Web Designer hilft Ihnen, den Überblick über die verschiedenen horizontalen und vertikalen Bereiche in Ihrer Anzeige zu behalten, denn die einzelnen Bereiche über den Führungslinien werden als verschiedenfarbige Balken angezeigt. Jedes Rechteck, in dem sich unterschiedliche Bereiche überschneiden, wird mit einem eigenen Stil dargestellt.

Durch responsive Layouts ändern sich nur Stile, keine Inhalte

Mit Medienabfragen können Sie Stile ändern, aber keine Inhalte hinzufügen oder entfernen. Ein Beispiel: Angenommen, Sie möchten ein bestimmtes Bild für Anzeigen verwenden, die ein kleines Format haben. Für Anzeigen, die ein gewisses Format überschreiten, soll dagegen ein anderes, größeres Bild erscheinen. Eventuell möchten Sie aber auch einer größeren Anzeige weitere Bilder hinzufügen. Assets wie diese können nicht mithilfe von Medienabfragen hinzugefügt werden, wenn Ihre Anzeige einen Haltepunkt passiert.

Diese Einschränkung können Sie umgehen, indem Sie Assets ausblenden, bis sie erscheinen sollen. Sie können beispielsweise Bilder hinzufügen, die Sie nur in den größeren Versionen Ihrer Anzeige verwenden möchten, in CSS den Stil visibility:hidden festlegen und diesen dann nur in den größeren Versionen Ihrer Anzeige zu visibility:visible ändern.

Fließendes Layout in responsiven Anzeigen

Ein weiteres Element des responsiven Webdesigns ist das fließende Layout. Wenn Sie vor dem Verwenden der Ausrichtungstools in der Symbolleiste "Auswahl" das Kästchen Fließendes Layout anklicken, können Sie eine prozentbasierte Ausrichtung verwenden, bei der die Elemente relativ zueinander und am einschließenden Container ausgerichtet werden, sobald sich die Größe des Containers ändert. Sie können auch eine Kombination aus prozent- und pixelbasierten Elementgrößen verwenden.

War das hilfreich?
Wie können wir die Seite verbessern?