Component Layouting

Das Rückgrat einer jeder AEM-Seite ist eine gute strukturierte Seite mit ausgewählten Components. Gutes Layout spart Zeit, Nerven – und schafft ein konsistentes Nutzererlebnis.

Solide Grundlagen sorgen im Aufbau für Seiten, die funktional sind, gut aussehen auf unterschiedlichen Devices und den Coop-Standards entsprechen.

Layout Modus oder Layout Container?

In AEM unterscheidet sich im Sprachgebrauch der Layout Container und der Layout Modus. Beide beziehen sich auf den allgemeinen Aufbau der Seite (Layout), meinen aber unterschiedliche Dinge:

Der Layout Container

ist eine Komponente, die bereits fix integriert ist beim Anlegen neuer Seiten und Bearbeiten bestehender Seiten.
bietet ein Grid-System, mit dem sich Komponenten innerhalb eines Rasters hinzufügen und positionieren lassen.
kann für verschiedene Viewports unterschiedlich konfiguriert sein.
wird verwendet, um weitere Komponetnen innerhalb des Containers für weitere Inhalte zu platzieren.

Der Layout-Modus

zeigt die Anordnung der Komponenten innerhalb eines Layout Containers.
erlaubt Inhalte in Komponenten im responsiven Raster zu positionieren.
erlaubt das Einstellen von Sichtbarkeiten je Breakpoint (Desktop, Tablet, Smartphone, jeweils horizontal und vertikal).

Kurzum: Der Layout Container beinhaltet die eigentliche Struktur der Seite, der Layout Modus erlaubt das Arbeiten in dieser Struktur.

Im Folgenden beziehen sich Aussagen, sofern nicht anders erwähnt, auf den Layout Container.

Grundlagen: Layouting in AEM

Die Grundlagen des Layoutings in AEM basieren auf der Verwendung von vorher definierten Layout-Komponenten und Containern (wie Layout, Structure und Group Container), die es Redakteur:innen ermöglichen, Inhalte flexibel und strukturiert anzupassen.

AEM ermöglicht die Erstellung von Layouts, die responsiv sind, also auf allen Geräten gut aussehen, ob Desktop, Tablet oder Smartphone. Die Gridsysteme und Medientypen (wie Breakpoints) müssen dabei von Redakteur:innen richtig konfiguriert werden, um eine dynamische Anpassung der Inhalte je nach Bildschirmgröße zu gewährleisten.

Templates sind vorgefertigte Seiten-Vorlagen in AEM. Sie bestimmen das Grundlayout einer Seite (z. B. Spalten, Header, Footer).
Redakteur:innen können damit Seiten schnell und ohne technisches Wissen anlegen und bearbeiten.
Farben, Schriftarten und Abstände sind schon richtig eingestellt.
Es gibt unterschiedliche Templates für verschiedene Seitentypen (z. B. Homepage oder Generic Content für allgemeingültige Inhalte).
Entwickler:innen erstellen Templates einmal – Redakteur:innen nutzen sie immer wieder.
Templates bieten feste Bereiche (z. B. Navigation) und flexible Bereiche für individuelle Inhalte.

Breakpoints sind bestimmte Pixelbreiten, bei denen sich das Layout der Seite verändert. Das sorgt dafür, dass sich Inhalte entsprechend auf Desktop, Tablet und Smartphone darstellen und verhalten.
AEM nutzt Breakpoints, um ein responsives Layout zu ermöglichen. Redakteur:innen können die Seite im Bearbeitungsmodus sowie Layout-Modus auf verschiedenen Endgeräten (Desktop, Tablet, Smartphone) ansehen und adaptieren.
Dies sollte je Breakpoint geprüft werden als Teil der inhaltlichen Qualitätssicherung. Redakteur:innen können im Layout-Modus gezielt Inhalte verstecken, sofern dies notwendig ist.
Entscheidend in der Darstellung ist letztlich nicht das Gerät, sondern die Breite des Browserfensters (Pixelgröße). So bleiben Seiten übersichtlich, nutzerfreundlich und markenkonform – auf allen Endgeräten.

Emulatoren in AEM zeigen, wie eine Seite auf konkreten Geräten aussieht – direkt im Seiteneditor. Sie ergänzen Breakpoints durch realistische Gerätevorschauen.
Im Emulator lässt sich zwischen Hoch- und Querformat wechseln, um beide Ansichten zu validieren.
Eine blaue gestrichelte Linie zeigt den sichtbaren Bereich des jeweiligen Geräts.
Emulatoren ermöglichen eine dedizierte Content Qualitätskontrolle, um zu überprüfen, wie sich Breakpoints auf realen Geräten verhalten.

Anpassung von Breite und Darstellung

Um die Breite und das übergeordnete Layout eines Inhaltsbereichs in AEM anzupassen, sollten Redakteur:innen die Seite in logische Abschnitte (Structure Container) unterteilen und zusammenhängende Bereiche zusammenfassen (Group Container). Der Layout Container kann und soll ebenfalls nicht weiter in der Breite angepasst werden.

Ein Structure Container kann mehrfach auf einer Seite gebaut werden als logischer Absatz für Inhalte. Dieser Structure Container sollte idealerweise nicht in der Breite angepasst werden, sondern als Rahmen in der vollen Breite bleiben.

Innerhalb des Structure Containers sollte dann ein Group Container verwendet werden, um die eigentlichen Komponenten (z. B. Text, Bild, Button) zu gruppieren und übersichtlich zu strukturieren.

Der Group Container kann und darf individuell in der Breite angepasst werden.

Der Aufbau und Einbau in einem Group Container sorgt dafür, dass die Komponenten auch in unterschiedlichen Breakpoints die richtige Reihenfolge aufweisen, zum Beispiel also korrekt untereinander dargestellt werden.

Beispiel mit kombinierten Komponenten Text und Bild

Mehrere eingefügte Text- und Bildkomponenten OHNE einen Group Container werden in der mobilen Ansicht nicht, wie vielleicht gedacht, in der Kombination Bild-Text ausgegeben. Zuerst erscheinen mobil die Bilder, dann die Texte. Im einzelnen Group Container bilden Bild und Text eine Einheit (einen Container), so dass mehrere nebeneinander platzierte Group Container mobil nacheinander mit Bild-Text, Bild-Text dargestellt werden.

Das folgende Schema veranschaulicht die Darstellung der Komponenten ohne und mit Group Container.

Beispielhaftes Schema zeigt Umbruch mit Group Container im oberen Bereich und ohne Group Container im unteren Bereich

Auf einen Blick: Welcher Container für was?

Layout Container: Die visuelle Grundstruktur für weitere Komponenten. Standarddarstellung auf 12 Spalten, keine Anpassung möglich.
Structure Container: Komponente für einen übergeordneten, logischen Abschnitt zur Unterteilung der Seite. Darf nicht in der Breite angepasst werden.
Group Container: Der Group Container fasst mehrere Elemente logisch zusammen. Dieser Container bildet dann die Maximalbreite des Inhalt für alle weiteren darin befindlichen Komponenten.

Dos and Don'ts für den Seitenaufbau

Dos

Verwenden von Structure Containern zur Unterteilung einer Seite in Abschnitte, generieren von Abständen, definieren einer Hintergrundfarbe und -bilder.
Mehrere Structure Container verwenden, wenn mehrere logische Abschnitte und Absätze vorliegen
Nutzen von Group Container für mehrspaltige Layouts
Halten an vordefinierte Breiten (Abstände der Spalten links und rechts) und bestehende Layoutvorgaben.

Dont's

Alles in einen Structure Container bauen ohne weitere Überlegung der Darstellung
Vermeiden unnötiger Verschachtelungen (diese erschweren die Pflege)
Vermeiden übermäßige Nutzung von Textblöcken (keine Wall-of-Text)
Kein bis wenig Testing: Überprüfe die Darstellung der Seite immer auf den gewünschten Breakpoints und Devices
Übermäßiger Breakpoint-spezifischer Inhalt: Zwar lassen sich Inhalte für bestimmte Viewports ausblenden, dies wird aber auf der Seite als solche nicht angezeigt oder festgehalten als Information. Für eine einfache Pflege sollte dies eher die Ausnahme als die Regel sein.