Konfigurieren von Layout-Container und Layout-Modus configuring-layout-container-and-layout-mode

Ein responsives Layout ist eine Methode, um ein responsives Webdesign zu realisieren.Dies ermöglicht es der Inhaltsautorinnen und Inhaltsautoren, Web-Seiten zu erstellen, deren Layout und Abmessungen von den Geräten abhängen, die ihre Benutzenden verwenden.

Das responsive Layout für Ihre Seiten wird von AEM durch eine Kombination von Mechanismen ermöglicht:

Mit diesen responsiven Rastermechanismen können Sie:

Aktivieren des Emulators enabling-emulator

Der Projekt-Archetyp und die Standard-Site-Vorlage sind bereits für die Verwendung des Emulators aktiviert. Wenn Sie eigene Inhalte entwickelt haben, die nicht auf den Kernkomponenten oder dem Archetyp basieren, lesen Sie bitte das Dokument Responsives Design, um zu erfahren, wie Sie Ihre Komponenten unter Nutzung dieser Funktionen entwickeln können.

Aktivieren des Layout-Modus für die Website activate-layout-mode-for-your-site

Der Layout-Modus ermöglicht es Ihnen, den Emulator zu verwenden, um das Layout Ihrer Inhalte für verschiedene Geräte anzupassen. Die WKND-Beispielseite ist bereits für den Layout-Modus aktiviert. Führen Sie diese Schritte aus, um Ihre eigene Site zu aktivieren.

Konfigurieren von Breakpoints configure-breakpoints

Breakpoints sind für responsives Design von entscheidender Bedeutung und definieren, wie und wann Inhalte an das Zielgerät angepasst werden. Seien Sie jedoch vorsichtig, da jeder von Ihnen eingeführte Breakpoint für Ihre Autorinnen und Autoren zusätzliche Arbeit zur Anpassung des Inhalts bedeutet. Oft können zwei Breakpoints ausreichend sein, einschließlich des standardmäßigen Breakpoints, der immer vorhanden ist. Adobe empfiehlt, nicht mehr als drei Breakpoints einschließlich des Standardwertes zu erstellen, d. h. nicht mehr als zwei Knoten unter cq:responsive/breakpoint.

Breakpoints sollten sowohl für neue als auch für bestehende Projekte berücksichtigt werden.

Aufgrund der Vererbung müssen Sie dies nur für die Stammseite Ihres Inhalts tun.

Konfigurieren von Breakpoints mithilfe von CRXDE Lite configuring-breakpoints-using-crxde-lite

Konfigurieren von Haltepunkten mit XML configuring-breakpoints-using-xml

Haltepunkte befinden sich im Abschnitt <jcr:content> der Datei .context.html im entsprechenden Vorlagenorder (bzw. Inhaltsordner).

Eine Beispieldefinition:

<cq:responsive jcr:primaryType="nt:unstructured">
  <breakpoints jcr:primaryType="nt:unstructured">
    <phone jcr:primaryType="nt:unstructured" title="{String}Phone" width="{Decimal}768"/>
    <tablet jcr:primaryType="nt:unstructured" title="{String}Tablet" width="{Decimal}1200"/>
  </breakpoints>
</cq:responsive>

Aktivieren der Größenänderung von Komponenten für die Seite enable-component-resizing-for-the-page

Die Größenanpassung von Komponenten im Layout-Modus ist ein wichtiger Bestandteil des responsiven Designs, das auf der WKND-Beispielseite verwendet werden kann. Führen Sie diese Schritte aus, um Ihre eigene Site zu aktivieren.

Festlegen des Layout-Containers als Haupt-Absatzsystem set-layout-container-as-main-parsys

Um festzulegen, dass das Haupt-Absatzsystem Ihrer Seite ein Layout-Container sein sollen, definieren Sie die Absatzsysteme wie folgt:

wcm/foundation/components/responsivegrid

In entweder der:

Die folgenden beiden Beispiele veranschaulichen die Definition:

Einschließen von responsivem CSS include-the-responsive-css

CSS für Breakpoints mit LESS css-for-breakpoints-using-less

AEM verwendet LESS, um Teile des erforderlichen CSS zu generieren. Diese müssen für Ihre Projekte einbezogen werden.

Sie müssen auch eine Client-Bibliothek erstellen, um zusätzliche Konfigurations- und Funktionsaufrufe bereitzustellen. Der folgende LESS-Extrakt ist ein Beispiel für das Minimum, das Sie zum Projekt hinzufügen müssen:

@import (once) "/libs/wcm/foundation/clientlibs/grid/grid_base.less";

/* maximum amount of grid cells to be provided */
@max_col: 12;

/* default breakpoint */
.aem-Grid {
  .generate-grid(default, @max_col);
}

/* phone breakpoint */
@media (max-width: 768px) {
  .aem-Grid {
    .generate-grid(phone, @max_col);
  }
}

/* tablet breakpoint */
@media (min-width: 769px) and (max-width: 1200px) {
  .aem-Grid {
    .generate-grid(tablet, @max_col);
  }
}

Die Basisrasterdefinition finden Sie unter:

/libs/wcm/foundation/clientlibs/grid/grid_base.less

Überlegungen zur Gestaltung styling-considerations

Die Größe von Komponenten in einem responsiven Container wird (zusammen mit den entsprechenden HTML-DOM-Elementen) entsprechend der Größe des responsiven Rasters geändert. Daher empfehlen wir in diesen Fällen, Definitionen von (enthaltenen) DOM-Elementen mit fester Breite zu vermeiden (oder zu aktualisieren).

Zum Beispiel:

Größenanpassung und adaptive Bildkompatibilität resizing-and-adaptive-image-compliance

Jede Änderung der Größe einer Komponente innerhalb des Rasters löst mindestens einen der folgende Listener aus:

Um die Größe eines adaptiven Bildes in einem responsiven Raster ordnungsgemäß zu ändern und die Inhalte des Bildes zu aktualisieren, müssen Sie den Listener afterEdit, dessen Wert auf REFRESH_PAGE festgelegt ist, zur EditConfig-Datei aller enthaltenen Komponenten hinzufügen.

Zum Beispiel:

<cq:listeners jcr:primaryType="cq:EditListenersConfig" afteredit="REFRESH_PAGE" />

Der Mechanismus für adaptive Bilder wird über ein Skript zur Verfügung gestellt, das die Auswahl des richtigen Bildes für die aktuelle Fenstergröße steuert. Es wird aktiviert, wenn das DOM bereit ist oder ein dediziertes Ereignis empfangen wird. Derzeit muss die Seite aktualisiert werden, um das Ergebnis der Benutzeraktion korrekt widerzuspiegeln.

Aktivieren der Layout-Container-Komponente für die Seite enable-the-layout-container-component-for-page

Für ein effizientes responsives Layout muss die Inhaltsautorin bzw. der Inhaltsautor Instanzen der Layout-Container-Komponente auf die Seite ziehen können. Dies ist für die WKND-Beispiel-Site bereits aktiviert. Führen Sie diese Schritte aus, um Ihre eigene Site zu aktivieren.

Aktivieren der Layout-Container-Komponente für die Seitenbearbeitung enable-the-layout-container-component-for-page-editing

Damit Autorinnen und Autoren weitere responsive Raster zu den Inhaltsseiten hinzufügen können, müssen Sie die Layout-Container-Komponente für Ihre Seite aktivieren. Möglich ist dies über folgende Optionen:

Konfigurieren des Rasters des Layout-Containers configure-the-grid-of-the-layout-container

Sie können die Anzahl der für jede spezifische Instanz des Layout-Containers verfügbaren Spalten konfigurieren, indem Sie Ihre Seitenvorlagen bearbeiten.