Les fonctionnalités responsives ne sont pas compatibles avec les annonces AMP HTML. Les annonces vidéo, les GIF animés et les annonces illustrées peuvent utiliser des mises en page multitailles.
Le responsive design utilise un format flexible qui s'adapte à différentes orientations ou tailles de fenêtre d'affichage pour vous éviter d'avoir à créer plusieurs formats. Google Web Designer propose plusieurs outils permettant d'utiliser le responsive design pour vos créations.
Votre document doit au minimum contenir des dimensions de pages responsives. Vous pouvez également créer une mise en page fluide en définissant les tailles et les positions des objets en pourcentages. Pour personnaliser chaque élément en fonction de différentes tailles ou plages de tailles de fenêtre d'affichage, utilisez des réglages multimédias.
Les annonces illustrées ne peuvent pas être responsives, mais elles peuvent utiliser le workflow responsif dans les mises en page multitailles afin de vous permettre d'exporter différentes tailles à partir d'un seul document.
Dimensions des pages responsives
Rendre le document entièrement responsif
La largeur et la hauteur de page des documents responsifs doivent être définies sur 100 % afin de pouvoir remplir tout l'espace disponible à l'écran.
-
Documents existants : cochez la case Format responsif dans le panneau Responsive.
-
Nouveaux fichiers : dans la boîte de dialogue "Nouveau fichier", cochez la case Format responsif lorsque vous spécifiez des dimensions. (Cette option n'est pas disponible pour tous les types de fichiers.)
Pour que le contenu de la page soit responsif, vous pouvez utiliser une mise en page fluide et des réglages multimédias.
Mise en page fluide
Tailles et positions basées sur un pourcentage
Présentation de la mise en page de contenus basée sur les pourcentages
Outre les dimensions de la page, vous pouvez aussi définir la taille et la position des éléments en pourcentages plutôt qu'en pixels. Cela permet de conserver la taille et l'alignement d'un élément par rapport au conteneur parent, même en cas de modification de celui-ci.
Lorsque vous alignez des éléments, l'option Mise en page fluide des outils d'alignement et de distribution vous permet de définir facilement des positions exprimées en pourcentage.
Réglages multimédias
Ignorer des attributs et des styles CSS pour différentes orientations et tailles
Les réglages multimédias permettent à votre document de détecter la taille et l'orientation de la fenêtre d'affichage, et d'appliquer différents styles et attributs en conséquence. Par exemple, du contenu peut être affiché dans une seule colonne sur un téléphone, alors qu'il peut l'être dans deux colonnes sur une tablette. Ces changements, appelés forçages, s'appliquent aux tailles ou plages de tailles spécifiées.
Vous pouvez passer d'un ensemble de réglages à l'autre depuis le panneau "Responsive" :
- Réglages par défaut : sélectionnez Modifier les propriétés de base du document lorsque vous modifiez l'ensemble de styles par défaut ou que vous effectuez des changements qui s'appliquent à toutes les tailles de fenêtre d'affichage (ajout ou suppression d'éléments, de composants ou d'événements, par exemple).
- Réglages multimédias : sélectionnez une taille spécifique ou une plage de tailles afin de remplacer les styles et attributs par défaut associés à cette fenêtre d'affichage.
Lorsqu'un réglage multimédia est sélectionné, vous pouvez définir des styles et attributs qui ne s'appliquent qu'à cette taille ou plage de tailles. Par exemple, vous pouvez ajuster la position, la taille, la source, la visibilité ou l'animation d'un élément. Google Web Designer vous permet également d'ignorer les paramètres de contenu textuel et d'ajustement de texte, ainsi que les propriétés de composant.
En savoir plus sur les réglages multimédias et les forçages
