Responsives Design
Responsives Design ermöglicht die effektive Darstellung derselben Erlebnisse auf verschiedenen Geräten in verschiedenen Ausrichtungen.
TIPP- Informationen zur Verwendung von responsiven Design-Funktionen auf einer Inhaltsseite für Inhaltsautorinnen und -autoren finden Sie im Dokument Responsives Layout für Ihre Inhaltsseiten.
- Für Site-Admins werden Details zum Konfigurieren des Layout-Containers für Ihre Sites unter Konfigurieren von Layout-Container und Layout-Modus beschrieben.
Überblick
Gestalten Sie Ihre Erlebnisse so, dass sie sich dem Client-Darstellungsfeld anpassen, auf dem sie angezeigt werden. Responsives Design ermöglicht die effektive Darstellung derselben Web-Seiten auf verschiedenen Geräten in beiden Ausrichtungen. Die folgende Abbildung zeigt einige Möglichkeiten, wie eine Seite auf Größenänderungen des Darstellungsfelds reagieren kann:
- Layout: Verwenden Sie einspaltige Layouts für kleinere Darstellungsfelder und mehrspaltige Layouts für größere Darstellungsfelder.
- Textgröße: Verwenden Sie in größeren Darstellungsfeldern eine größere Textgröße (wo passend, z. B. Überschriften).
- Inhalt: Schließen Sie bei der Anzeige auf kleineren Geräten nur die wichtigsten Inhalte ein.
- Navigation: Für den Zugriff auf andere Seiten werden gerätespezifische Tools bereitgestellt.
- Bilder: Stellen Sie anhand der Fenstergröße dem Client-Darstellungsfeld entsprechende Ausgabedarstellungen zur Verfügung.
Entwickeln Sie Adobe Experience Manager (AEM)-Programme, die HTML5-Inhalte generieren, die sich an verschiedene Fenstergrößen und Ausrichtungen anpassen. Beispielsweise entsprechen die folgenden Breiten von Darstellungsfeldern verschiedenen Gerätetypen und -ausrichtungen.
- Maximale Breite von 480 Pixeln (Smartphone, Hochformat)
- Maximale Breite von 767 Pixeln (Smartphone, Querformat)
- Breite zwischen 768 Pixeln und 979 Pixeln (Tablet, Hochformat)
- Breite zwischen 980 Pixel und 1199 Pixel (Tablet, Querformat)
- Breite von 1200 Pixel oder mehr (Desktop)
Weitere Informationen finden Sie unter den folgenden Themen zur Implementierung von responsivem Design:
Nutzen Sie während des Design-Vorgangs die Emulator-Symbolleiste, um Vorschauen Ihrer Seiten in verschiedenen Bildschirmgrößen anzuzeigen.
Vor dem Entwicklungsvorgang
Vor der Entwicklung eines AEM-Programms, das Ihre Web-Seiten unterstützt, müssen Sie einige Design-Entscheidungen treffen. Sie müssen beispielsweise über die folgenden Informationen verfügen:
- Auf welche Geräte der Entwicklungsprozess ausgerichtet ist
- Die Größe der Zieldarstellungsfelder
- Die Seiten-Layouts für die berücksichtigten Zieldarstellungsfelder
Anwendungsstruktur
Die typische AEM-Programmstruktur unterstützt alle Implementierungen responsiven Designs:
- Seitenkomponenten befinden sich unter
/apps/<application_name>/components - Vorlagen befinden sich unter
/apps/<application_name>/templates
Nutzung von Medienabfragen
Medienabfragen ermöglichen die selektive Verwendung von CSS-Stilen für das Rendern von Seiten. AEM-Entwicklungs-Tools und -funktionen ermöglichen Ihnen die effektive und effiziente Implementierung von Medienabfragen in Programmen.
Die W3C-Gruppe stellt die Medienabfragen-Empfehlung zur Verfügung, die diese CSS3-Funktion und die Syntax beschreibt.
Erstellen der CSS-Datei
Definieren Sie in der CSS-Datei Medienabfragen anhand der Eigenschaften der Zielgeräte. Die folgende Implementierungsstrategie kann für die Verwaltung der Stile der verschiedenen Medienabfragen verwendet werden:
- Verwenden Sie einen Client-Bibliotheksordner, um das CSS zu definieren, das zusammengestellt wird, wenn die Seite gerendert wird.
- Definieren Sie die Medienabfragen und die zugehörigen Stile in separaten CSS-Dateien. Es ist nützlich, Dateinamen zu verwenden, die die Geräteeigenschaften der Medienabfrage darstellen.
- Definieren Sie Stile, die alle Geräte gemeinsam haben, in einer separaten CSS-Datei.
- Sortieren Sie in der Datei „css.txt“ des Client-Bibliotheksordners die Liste der CSS-Dateien, wie es in der zusammengestellten CSS-Datei erforderlich ist.
Das WKND-Tutorial verwendet diese Strategie zur Definition von Stilen beim Website-Design. Die von WKND verwendete CSS-Datei befindet sich unter /apps/wknd/clientlibs/clientlib-grid/less/grid.less.
