Sie sehen sich Hilfeinhalte der folgenden Version an:

Ein responsives Layout ist eine Methode, um ein responsives Webdesign zu realisieren. Damit lassen sich Webseiten erstellen, deren Layout und Abmessungen von dem Gerät des Benutzers abhängen.

Hinweis:

Dieser Ansatz ist vergleichbar mit den Mechanismen für mobile Websites, die adaptives Webdesign nutzen (in erster Linie für die klassische Benutzeroberfläche).

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

  • Komponente: Layout-Container
    Diese Komponente bietet ein Raster-Absatzsystem, mit dem Sie Komponenten in einem responsiven Raster hinzufügen und positionieren können. Sie können sie als Standard-ParSys für Ihre Seite nutzen und/oder sie anderen Autoren im Komponenten-Browser zur Verfügung stellen. 
    • Die standardmäßige Layout-Container-Komponente ist definiert unter:
      /libs/wcm/foundation/components/responsivegrid
    • Sie können Layout-Container wie folgt definieren:
      • als Komponente, die Benutzer zu einer Seite hinzufügen können
      • als Standard-ParSys für die Seite
      • beides:
        Sie können den Layout-Container als Standard für die Seite festlegen und es den Benutzern gleichzeitig erlauben, weitere Layout-Container darin hinzuzufügen, z. B. für die Spaltensteuerung.
  • Layout-Modus
    Sobald der Layout-Container auf der Seite positioniert ist, können Sie im Layout-Modus Inhalte im responsiven Raster positionieren.
  • Emulator
    Hiermit können Sie responsive Websites erstellen und bearbeiten, deren Layout durch eine interaktive Größenanpassung der Komponenten an die Größe des Geräts oder Fensters angepasst wird. Der Benutzer kann sich mit dem Emulator ansehen wie der Inhalt für bestimmte Geräte gerendert wird.

Vorsicht:

Auch wenn die Layout-Container-Komponente in der klassischen Benutzeroberfläche verfügbar ist, steht der vollständige Funktionsumfang nur in der Touch-optimierten Benutzeroberfläche zur Verfügung.

Dieser responsive Rastermechanismus bietet folgende Möglichkeiten:

  • Haltepunkte (die eine Gerätegruppierung anzeigen), um unterschiedliches Verhalten der Inhalte basierend auf dem Geräte-Layout zu definieren
  • Ausblenden von Komponenten basierend auf der Gerätegruppe (definieren Sie, an welchem Haltepunkt eine Komponente ausgeblendet werden soll)
  • Horizontale Ausrichtung am Raster (platzieren Sie Komponenten im Raster, passen Sie die Größe an, definieren Sie, wann ein Reduzieren/Umfließen daneben oder drüber/darunter stattfinden soll).
  • Realisieren einer Spaltensteuerung.

Hinweis:

Bei einer vorab konfigurierten Installation wurde das responsive Layout für die We.Retail-Referenzwebsite konfiguriert. Sie müssen die Layout-Container-Komponente für andere Seiten nach wie vor aktivieren.

Konfigurieren des responsiven Emulators

Mit diesen Aufgaben können Sie den responsiven Emulator auf Ihrer Website anzeigen.

Registrieren der Seitenkomponenten für die Emulation

Um die Emulator-Unterstützung für Ihre Seiten zu aktivieren, müssen Sie die Seitenkomponenten registrieren. Weitere Informationen finden Sie unter Registrieren von Seitenkomponenten für die Simulation.

Festlegen der Gerätegruppen

Informationen dazu, wie Sie die Gerätegruppen festlegen, die in der Geräteliste des Emulators angezeigt werden, finden Sie unter Festlegen der Gerätegruppen.

Verknüpfen der Website mit den festgelegten Gerätegruppen

Um den Emulator einzubinden, müssen Sie die Website mit den Gerätegruppen verknüpfen. Siehe Hinzufügen der Geräteliste (für die klassische und die Touch-optimierte Benutzeroberfläche). 

Aktivieren des Layout-Modus für die Website

Mit diesen Vorgängen aktivieren Sie den Layout-Modus auf Ihrer Website.

Konfigurieren der Haltepunkte

Haltepunkte:

  • werden bei responsiven Designs genutzt
  • können folgendermaßen definiert werden:
    • auf der Seitenvorlage, von der die Einstellungen auf alle Seiten kopiert werden, die mit dieser Vorlage erstellt wurden
    • auf dem Seitenknoten, von dem die Einstellungen von allen untergeordneten Seiten geerbt werden
  • definieren einen Titel und eine Breite:
    • Der Titel beschreibt die allgemeine Gerätegruppierung, bei Bedarf mit Ausrichtung; z. B. phone, tablet, tabletlandscape.
    • Die Breite definiert die Höchstbreite in Pixel für diese allgemeine Gerätegruppierung. Wenn beispielsweise der Haltepunkt „phone“ eine Breite von 768 hat, ist das die Höchstbreite des Layouts, das für ein Smartphone genutzt wird.
  • sind als Markierung oben auf dem Seiten-Editor sichtbar, wenn Sie den Emulator nutzen
  • werden von der übergeordneten Knotenhierarchie geerbt und können beliebig überschrieben werden
  • Es gibt einen standardmäßigen (vorab konfigurierten) Haltepunkt, der alles über dem letzten konfigurierten Haltepunkt abdeckt.

Haltepunkte können Sie mit CRXDE Lite oder XML definieren.

Hinweis:

Wenn Sie ein neues Projekt einrichten:

  • müssen Sie Haltepunkte zu den Vorlagen hinzufügen.

Wenn Sie ein vorhandenes Projekt (mit vorhandenen Inhalten) migrieren, müssen Sie:

  • Haltepunkte zu den Vorlagen hinzufügen
  • dieselben Haltepunkte zu den vorhandenen Seiten hinzufügen.
    Wenn die Vererbung durchgeführt wird, können Sie dies auf die Stammseite Ihrer Inhalte begrenzen.

Konfigurieren von Haltepunkten mit CRXDE Lite

  1. Wenn Sie CRXDE Lite (o. ä.) verwenden, navigieren Sie wahlweise zu einer der folgenden Optionen:

    • der Vorlagendefinition
    • dem Knoten jcr:content Ihrer Seite
  2. Erstellen Sie unter jcr:content den Knoten:

    • Name: cq:responsive
    • Typ: nt:unstructured
  3. Erstellen Sie darunter den Knoten:

    • Name: breakpoints
    • Typ: nt:unstructured
  4. Unter dem Haltepunktknoten können Sie eine beliebige Anzahl an Haltepunkten erstellen. Jede Definition ist ein einziger Knoten mit den folgenden Eigenschaften:

    • Name: <beschreibender Name>
    • Typ: nt:unstructured
    • Title: Zeichenfolge <beschreibender Titel, angezeigt im Emulator>
    • Breite: Dezimalzahl <Wert des Haltepunkts>

Konfigurieren von Haltepunkten mit 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>

Hinzufügen eines responsiven Informationsanbieters

Hinweis:

Dies ist nur erforderlich, wenn die Seitenkomponente nicht auf der Foundation-Seitenkomponente basiert.

Kopieren Sie die folgende cq:infoProviders-Knotenstruktur in die übergeordnete Seitenkomponente:

/libs/foundation/components/page/cq:infoProviders/responsive

Aktivieren der Größenänderung von Komponenten für die Seite

Sie müssen diese Vorgänge durchführen, um Komponenten im Layout-Modus durchzuführen.

Festlegen des Layout-Containers als Haupt-ParSys

Um einen Layout-Container als Haupt-ParSys einer Seite festzulegen, müssen Sie das ParSys wie folgt definieren:

wcm/foundation/components/responsivegrid

Wahlweise in der:

  • Seitenkomponente
  • Seitenvorlage (für die zukünftige Verwendung)

Die folgenden beiden Beispiele veranschaulichen die Definition:

  • HTL:

    <sly data-sly-resource="${'par' @ resourceType='wcm/foundation/components/responsivegrid'}/>
  • JSP:

    <cq:include path="par" resourceType="wcm/foundation/components/responsivegrid" />

Einschließen von responsivem CSS

CSS für Haltepunkte mit LESS

AEM nutzt LESS, um Teile des erforderlichen CSS zu erstellen. Sie müssen für Ihre Projekte eingeschlossen sein.

Sie müssen auch eine Client-Bibliothek erstellen, um zusätzliche Konfigurationen und Funktionsaufrufe bereitzustellen. Der folgende LESS-Ausschnitt ist ein Beispiel für den Code, den Sie mindestens zu Ihrem Projekt hinzufügen müssen:

@import (once) "/etc/clientlibs/wcm/foundation/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:

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

Überlegungen zum Stil

Die Größe von Komponenten in einem responsiven Container (und ihren entsprechenden HTML-DOM-Elementen) wird gemäß 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).

Beispiel:

  • Vorher:
    • width=100px
  • Nachher:
    • max-width=100px

Größenänderung und adaptive Bild-Compliance

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

  • beforeedit
  • beforechildedit
  • afteredit
  • afterchildedit  

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.

Beispiel:

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

Der adaptive Bildmechanismus wird über ein Skript bereitgestellt, das die Auswahl des korrekten Bildes für die aktuelle Fenstergröße steuert. Es wird aktiviert, wenn das DOM bereit ist oder ein dediziertes Ereignis empfangen wird. Zurzeit muss die Seite aktualisiert werden, um das Ergebnis der Benutzeraktion korrekt widerzuspiegeln.

Vorsicht:

Benutzerdefinierte Stylesheet-ClientLibs müssen als Teil der Kopfzeile geladen werden, damit sie bei Autor und bei Veröffentlichung ordnungsgemäß funktionieren.

Aktivieren der Layout-Container-Komponente für die Seite

Mit den folgenden Aufgaben können Autoren Instanzen der Layout-Container-Komponente auf die Seite verschieben.

Aktivieren der Layout-Container-Komponente für die Seitenbearbeitung

Um es Autoren zu erlauben, weitere responsive Raster zu den Inhaltsseiten hinzuzufügen, müssen Sie die Layout-Container-Komponente für Ihre Seite hinzufügen. Möglich ist dies über folgende Optionen:

  • Autorenumgebung

    Aktivieren Sie im Design-Modus die Layout-Container-Komponente für eine Seite.

  • Komponentendefinition

    Nutzen Sie beim Definieren der Komponente allowedComponent oder ein Static Include.

Konfigurieren des Rasters des Layout-Containers

Sie können die Anzahl an Spalten konfigurieren, die für jede spezifische Instanz des Layout-Containers verfügbar sind:

  1. Autorenumgebung

    Sie können die Anzahl an Spalten konfigurieren, die für jede spezifische Instanz des Layout-Containers verfügbar sind.

    Öffnen Sie dazu im Design-Modus das Design-Dialogfeld für den betroffenen Container. Hier können Sie festlegen, wie viele Spalten für die Positionierung und Größeneinstellung vorhanden sein sollen. Standard: 12.

  2. XML

    Die Definitionen für das responsive Raster werden in folgender Datei festgelegt:

    etc/design/<Ihr Projektname>/.content.xml  

    Sie können die folgenden Parameter festlegen:

    • Anzahl an verfügbaren Spalten:
      • columns="{String}8"
    • Komponenten, die zur aktuellen Komponente hinzugefügt werden können:
      • components="[/libs/wcm/foundation/components/responsivegrid, ...

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie