Responsive Design responsive-design

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.

Exemples de Responsive Design

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 de procéder au développement before-you-develop

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 application-structure

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 des requêtes de média using-media-queries

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 creating-the-css-file

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.

Utiliser des requêtes de média avec des pages AEM using-media-queries-with-aem-pages

Exemple de projet WKND et AEM Archétype de projet utilisez la méthode Composant principal de page, qui inclut les bibliothèques clientes via la stratégie de page.

Si votre propre composant de page n’est pas basé sur le composant principal Page, vous pouvez également inclure le dossier de bibliothèque cliente dans le script HTL ou JSP de celui-ci. Cela générera et référencera le fichier CSS avec les requêtes de média nécessaires au fonctionnement de la grille réactive.

HTL htl

<sly data-sly-use.clientlib="${'/libs/granite/sightly/templates/clientlib.html'}">
<sly data-sly-call="${clientlib.all @ categories='apps.weretail.all'}"/>

JSP jsp

<ui:includeClientLib categories="apps.weretail.all"/>

Le script JSP génère le code HTML suivant qui référence les feuilles de style :

<link rel="stylesheet" href="/etc/designs/weretail/clientlibs-all.css" type="text/css">
<link href="/etc/designs/weretail.css" rel="stylesheet" type="text/css">

Aperçu pour des périphériques spécifiques previewing-for-specific-devices

L’émulateur vous permet de prévisualiser vos pages dans différentes tailles de fenêtre d’affichage afin que vous puissiez tester le comportement de votre conception réactive. Lorsque vous modifiez une page dans la console Sites, vous pouvez appuyer ou cliquer sur le bouton Émulateur pour afficher l’émulateur.

Icône de l’émulateur dans la barre d’outils

Dans la barre d’outils de l’émulateur, appuyez ou cliquez sur le bouton Périphériques pour afficher un menu déroulant dans lequel vous pouvez sélectionner un appareil. Lorsque vous sélectionnez un appareil, la page change afin de s’adapter à la taille de la fenêtre d’affichage.

Barre d’outils de l’émulateur

Spécification des groupes d’appareils specifying-device-groups

Pour spécifier les groupes d’appareils qui apparaissent dans le Périphériques liste, ajouter une cq:deviceGroups à la propriété jcr:content noeud de la page de modèle de votre site. La valeur de la propriété est un tableau de chemins d’accès pointant vers les nœuds du groupe d’appareils.

Par exemple, la page de modèle du site WKND est : /conf/wknd/settings/wcm/template-types/empty-page/structure. Et le jcr:content sous , la propriété suivante est incluse :

  • Nom : cq:deviceGroups
  • Type : String[]
  • Valeur : mobile/groups/responsive

Les nœuds du groupe d’appareils sont situés dans le dossier /etc/mobile/groups.

Images réactives responsive-images

Les pages réactives s’adaptent dynamiquement au périphérique sur lequel elles sont générées, offrant ainsi une meilleure expérience à l’utilisateur. Toutefois, il est également important que les ressources soient optimisées au point d’arrêt et sur l’appareil afin de réduire le temps de chargement des pages.

Composant d’image des composants principaux fonctions telles que la sélection d’images adaptatives.

  • Par défaut, le composant d’image utilise la variable Servlet d’image adaptative pour fournir le rendu approprié.
  • Diffusion d’images optimisée pour le web est également disponible par le biais d’une simple case à cocher dans sa stratégie, qui fournit des ressources d’image à partir de la gestion des actifs numériques au format WebP et peut réduire la taille de téléchargement d’une image d’environ 25 % en moyenne.

Conteneur de mises en page layout-container

AEM Conteneur de mises en page permet d’implémenter efficacement une mise en page réactive afin d’adapter les dimensions de la page à la fenêtre d’affichage client.

Consultez le document Configuration du conteneur de mises en page et du mode Mise en page pour plus d’informations sur le fonctionnement du conteneur de mises en page et sur l’activation de mises en page réactives pour votre contenu.

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab