Responsive Design
Avec le responsive design, les mêmes expériences peuvent être affichées efficacement sur plusieurs appareils dans plusieurs orientations.
CONSEIL- Pour les personnes créant du contenu, les détails sur l’utilisation des fonctionnalités de conception réactive sur une page de contenu sont disponibles dans le document Disposition réactive.
- Pour les administrateurs de site, les détails de la configuration du conteneur de mises en page pour vos sites sont décrits dans le document Configuration du conteneur et du mode de mise en page.
Vue d’ensemble
Concevez vos expériences afin qu’elles s’adaptent à la fenêtre dans laquelle elles sont affichées. Le Responsive Design permet d’afficher efficacement les mêmes pages sur plusieurs appareils dans les deux orientations. L’image suivante montre certaines façons dont une page peut répondre aux modifications de la taille de la fenêtre d’affichage :
- Mise en page : utilisez des mises en page à une seule colonne pour les fenêtres d’affichage plus petites et des mises en page à plusieurs colonnes pour les fenêtres d’affichage plus grandes.
- Taille du texte : utilisez une taille de texte plus grande (le cas échéant, comme des en-têtes) dans les fenêtres d’affichage plus grandes.
- Contenu : incluez uniquement le contenu le plus important lors de l’affichage sur des appareils plus petits.
- Navigation : des outils spécifiques à l’appareil sont fournis pour accéder à d’autres pages.
- Images : diffusion de rendus d’image adaptés à la fenêtre d’affichage client en fonction des dimensions de la fenêtre.
Développez des applications Adobe Experience Manager (AEM) qui génèrent du code HTML5 s’adaptant à plusieurs tailles de fenêtre et orientations. Par exemple, les plages de largeurs de fenêtre d’affichage suivantes correspondent à divers types d’appareils et orientations :
- Largeur maximale de 480 pixels (téléphone, portrait)
- Largeur maximale de 767 pixels (téléphone, paysage)
- Largeur entre 768 pixels et 979 pixels (tablette, portrait)
- Largeur entre 980 pixels et 1 199 pixels (tablette, paysage)
- Largeur de 1 200 px ou plus (ordinateur de bureau)
Consultez les rubriques suivantes pour en savoir plus sur l’implémentation du comportement Responsive Design :
Lors de la phase de conception, utilisez la barre d’outils Émulateur afin d’afficher un aperçu de vos pages pour différents formats d’écran.
Avant Le Développement
Avant de développer l’application AEM qui prend en charge vos pages web, plusieurs décisions de conception doivent être prises. Par exemple, vous devez disposer des informations suivantes :
- Appareils ciblés
- Tailles de fenêtre d’affichage ciblées
- Mises en page de chacune des tailles de fenêtre d’affichage ciblées
Structure d’application
La structure d’application AEM type prend en charge toutes les implémentations de Responsive Design :
- Les composants de page résident sous
/apps/<application_name>/components - Les modèles résident sous
/apps/<application_name>/templates
Utilisation de requêtes de média
Les requêtes de média permettent l’utilisation sélective de styles CSS pour le rendu des pages. Les outils et fonctionnalités de développement AEM vous permettent d’implémenter de manière efficace et efficiente des requêtes de média dans vos applications.
Le groupe W3C fournit la recommandation Media Queries (Requêtes de média) qui décrit cette fonctionnalité CSS3, ainsi que la syntaxe.
Création du fichier CSS
Dans votre fichier CSS, définissez des requêtes de média en fonction des propriétés des appareils que vous ciblez. La stratégie d’implémentation suivante est efficace pour gérer les styles pour chaque requête de média :
- Utilisez un dossier de bibliothèques clientes pour définir le CSS qui est assemblé lors du rendu de la page.
- Définissez chaque requête de média et les styles associés dans des fichiers CSS distincts. Il est conseillé d’utiliser des noms de fichier qui représentent les fonctionnalités de périphérique de la requête de média.
- Définissez des styles communs à tous les appareils dans un fichier CSS distinct.
- Dans le fichier css.txt du dossier Bibliothèque cliente, classez les fichiers CSS comme l’exige le fichier CSS assemblé.
Le tutoriel WKND utilise cette stratégie pour définir des styles dans la conception du site. Le fichier CSS utilisé par WKND se trouve dans /apps/wknd/clientlibs/clientlib-grid/less/grid.less.
