Hinzufügen und Positionieren von Komponenten in einem responsiven Raster
„Ein guter Webdesigner muss Internetseiten ansprechend gestalten können.“
… Wir wissen alle, dass das schon längst nicht mehr zutrifft. Denn er muss beim Design der User Experience die Einhaltung sämtlicher Details der mobilen Internetnutzung im Auge haben, um auf jedem Gerät eine perfekte Customer Experience bieten zu können.
In der heutigen Zeit, in der ein Enduser den Webauftritt auf einem Smartphone, Tablet oder Desktop betrachten kann, muss er das Responsive Webdesign vollkommen beherrschen. Das bedeutet, dass sich Inhalts- und Navigationselemente, sowie auch der strukturelle Aufbau des Layout-Grids einer Website, an die Vielzahl zu bedienender Bildschirmauflösungen anpassen kann.
Dabei sollen in jeder erdenklichen Ansicht Bilder oder Texte im Layout-Grid genau platziert sein und sich Elemente der Website stimmig in das Gestaltungsraster einfügen.
Textkomponenten sollen mit unterschiedlichen Textlängen gepflegt werden können. In Bild-Komponenten sollten Motive mit unterschiedlichen Fokuspunkten und Zuschnitten abbildbar sein. Das stellt in der Planungs- und Konzeptionsphase eine immense Herausforderung dar und für einen Designer ist es häufig nicht möglich, die Vielzahl der Variationen im Blick zu haben.
Daher wäre es doch eine schicke Lösung, wenn der Autor, der für den Inhalt der Komponenten verantwortlich ist, die Breite (also die Anzahl der Gestaltungsraster-Spalten) je nach Inhalt individuell auswählen könnte? Oder?
Adobe Experience Manager (AEM) bietet ab der Version AEM 6.3 eine enorme Erleichterung für das Erstellen eines responsiven Layouts an. Denn der Author, der für die Seitenpflege verantwortlich ist, kann Komponenten in einem responsiven Raster hinzufügen und positionieren.
Dies wird mit dem frei einsetzbaren Layout-Container ermöglicht, welcher vordefinierte Breakpoints verwendet und es somit zulässt, dass sich Komponenten horizontal an einem Raster ausrichten und platzieren lassen.
Der Redakteur kann über den sogenannten Layout-Modus frei definieren, bei welchem Viewport welches Verhalten des Inhalts stattfinden soll (sollen Textblöcke bei der Smartphone-Ansicht untereinander erscheinen, bei einer Desktop-Ansicht jedoch umfließen).
Wie funktioniert das Responsive Grid?
Zunächst verhält es sich wie ein gewöhnlicher Parsys (paragraph system), wobei es sich äußerlich ebenso nicht unterscheidet. Der Platzhalter „Komponenten hierher ziehen" erscheint und der Autor kann die Komponenten in den Layoutcontainer ziehen, die den eigentlichen Inhalt beinhalten.
Bild 1: Herkömmliches Paragraph System
Lasst uns einen Blick hinter die Kulissen werfen. Denn sehen wir uns an dieser Stelle die Implementierung dazu an, stellen wir fest, dass es sich lediglich um eine Erweiterung des herkömmlichen Paragraph System handelt.
Platziert der Author eine Text-Komponente in dem Layoutcontainer, hat er eine zusätzliche Möglichkeit den Text im dynamischen responsiven Layout anzupassen.
< sly data-sly-resource="${'parsys' @ resourceType='wcm/foundation/components/parsys'}"/>
< sly data-sly-resource="${'responsivegrid' @ resourceType='wcm/foundation/components/responsivegrid'}"/>
Bild 2: Responsive Grind: Layout in der Symbolleiste einer Komponente
Ein Autor hat nun die Möglichkeit, die Anzahl der Rasterspalten für den verschachtelten Layoutcontainer zu bestimmen.
Dafür gibt es in der Symbolleiste ein „Layout“ Zeichen (ganz rechts in der Abbildung), um diese Änderung je nach Inhalt der Komponente vorzunehmen und den Layout-Container auf eine beliebige Breite und Position einstellen zu können.
Bild 3: 12-Spalten Raster im AEM Author Interface
Wie man dem Bild entnehmen kann ist, nutzt AEM standardmäßig ein 12-Spalten-Raster - unabhängig davon, wie verschachtelt die Layout-Container sind. Der Autor kann nun mit der automatischen Ausrichtung am Raster und intelligenter Hilfslinien die einzelnen Elemente stimmig im Layout positionieren.
Das vom Designer definierte Grid kann nun je nach Bedarf des Autors für die gewünschte Komponente platziert werden, ohne dass die Stimmigkeit, die Ordnung oder der Charakter des Layouts darunter leiden muss.
In Kombination mit dem AEM Emulator kann der Autor den Seiteninhalt entsprechend der simulierten Benutzeroberfläche angepasst betrachten und gesondert bearbeiten. Standardmäßig verwendet das AEM-Raster drei Haltepunkte für ein 12-Spalten-Raster.
Hierbei kann die gewünschte Positionierung der Komponente an den jeweiligen Viewport angepasst werden. Klickt der Autor z.B. auf das „iPad“ Zeichen in der Emulator-Leiste, kann er diesen angezeigten Bereich (bis zu 768px ) gesondert bearbeiten. Die entsprechenden Anpassungen werden dann lediglich für diesen Viewport gespeichert. Die gepunktete blaue Linie in Bild 4 stellt den „Falz“ für das ausgewählte iPad dar.
Bild 4: Der AEM Emulator ermöglicht es, bestimmte Viewports gesondert zu bearbeiten
Fazit:
Mit Hilfe des AEM Grids ist der Autor flexibler geworden und kann das Layout an seine Bedürfnisse anpassen, ohne dass das Design der Website unstimmig wird.
Der Autor kann somit freier seine Texte und Bilder setzten und ist nicht mehr von dem Platz der jeweiligen Komponente abhängig - denn Content is King wie wir alle wissen.
Früher dagewesene Probleme, dass der Content leiden muss, wenn statische Komponenten nicht den geeigneten Platz bieten, sind somit aus der Welt.
Technisches Aufsetzen:
Sie können gerne jederzeit eine Schulung für sich und Ihr Team in unserem Hause oder bei Ihnen vor Ort vereinbaren, um Ihr technisches AEM Know How zu erweitern.
Um das AEM Grid nutzen zu können, bedarf es in der Entwicklung nur wenige Schritte:
< sly data-sly-resource="${'responsivegrid' @ resourceType='wcm/foundation/components/responsivegrid'}"/>
Name |
com.day.cq.wcm.mobile.core.impl.MobileEmulatorProvider-eggs |
jcr:primaryType: |
sling:OsgiConfig |
mobile.resourceTypes |
eggsproject/components/pages/gridPage (String) |
Die Eigenschaft mobile.resourceTypes stellt den Pfad Ihrer Seiten-Komponente dar, die gerendert wird.
Auf Ihrer entsprechenden Seite wird folgende Eigenschaft (im jcr:content-Knoten) benötigt:
cq:deviceGroups |
/etc/mobile/groups/responsive (String[ ] ) |
Das dynamische responsive Layout wird ermöglicht. Das „Emulator“-Icon ist nun auf Ihrer erstellten Internetseite sichtbar.
Cq:responsive |
nt:unstructured |
breakpoints |
nt:unstructured |
[name] |
nt:unstructured |
Width |
Maximale Breite des Devices (Decimal) |
z.B.:
Beispiel von vordefinierten Breakpoints einer Seite im CRX
Jedes Mal, wenn ein Autor über den Editor eine Layoutänderung vornimmt, wird unter der Komponente, in der das „Responsivegrid“ eingefügt ist, ein neuer Knoten namens cq: responsive mit dem Namen des Viewports und dessen Eigenschaften gespeichert.
Bild 6: Gespeicherte Positionierung und Breite einer Komponente im CRX
Leiter Vertrieb und Marketing
Balanstr. 73, Haus 19 81541 München
E-Mail: info@eggs.de Headquarter: +49 (89) 743456-0