Fenêtres d’affichage mobiles pour les expériences réactives

Les fenêtres d’affichage mobiles vous permettent de prévisualiser vos activités Adobe Target sur des écrans de différentes tailles.

La fonctionnalité d’aperçu des fenêtres d’affichage mobiles est conçue pour les sites réactifs qui s’affichent correctement sur plusieurs appareils, fenêtres et tailles d’écran. Les sites réactifs s’ajustent et s’adaptent automatiquement à n’importe quelle taille d’écran, y compris les ordinateurs de bureau, les ordinateurs portables, les tablettes ou les téléphones portables.

Une fenêtre d’affichage est définie par la taille du rectangle occupé par une page web sur votre écran. La fenêtre d’affichage correspond à la taille de la fenêtre du navigateur, sans les barres de défilement et les barres d’outils. Les navigateurs utilisent les « pixels CSS ». Pour de nombreux périphériques, notamment ceux disposant d’écrans Retina, la fenêtre d’affichage est plus petite que la résolution annoncée du périphérique.

Vous trouverez ci-dessous les fenêtres d’affichage et les résolutions des périphériques populaires. Rappelez-vous d’utiliser la taille de fenêtre d’affichage dans Target.

Pour diffuser une activité aux utilisateurs d’un périphérique précis, choisissez l’audience appropriée pour ce périphérique dans le diagramme d’activité. Utilisez le compositeur web mobile pour modifier la page dans l’activité pour ce périphérique. Pour exécuter une activité sur l’ensemble de votre expérience digitale afin de vous assurer qu’elle s’affiche correctement sur tous les appareils, n’appliquez pas de ciblage. Utilisez plutôt les fenêtres d’affichage mobiles pour prévisualiser l’activité sur chaque taille d’écran.

Si votre site est réactif, il est typiquement conçu pour s’ouvrir dans un affichage différent lorsqu’on y accède par le biais d’un périphérique avec une taille d’écran spécifique. Ces tailles d’écran qui déclenchent les nouveaux affichages sont connues sous le nom de points de rupture CSS. Les points de rupture CSS sont les points où le contenu du site web répond en fonction de la largeur de l’appareil pour afficher la disposition optimale aux visiteurs. Les points de rupture CSS sont également appelés requêtes multimédias.

Enregistrez vos points de rupture CSS dans Target pour pouvoir prévisualiser vos expériences pour chaque affichage défini. Chacune de ces expériences est affichée dans une fenêtre d’affichage mobile dans l’interface Target. Ouvrez l’affichage pour chaque taille d’écran en cliquant sur la fenêtre d’affichage située en haut de l’écran.

Si votre site n’est pas réactif, utilisez le compositeur web mobile pour afficher un site si votre activité cible un périphérique spécifique.

Configuration des fenêtres d’affichage mobiles

Configurez les fenêtres d’affichage mobiles que vous voulez rendre disponibles lors de la création de vos expériences.

1. Cliquez sur Administration > Compositeur d’expérience visuelle.

2. Dans la section Configuration des fenêtres d’affichage mobiles, cliquez sur Ajouter.

   

   Ou

   Pour modifier la configuration d’une fenêtre d’affichage mobile existante, sélectionnez la fenêtre d’affichage puis cliquez sur l’icône Modifier (crayon).

3. Saisissez un nom pour la fenêtre d’affichage mobile.

   Choisissez un nom explicite facile à reconnaître pour votre fenêtre d’affichage mobile. Le nom ne peut excéder 36 caractères.

4. Précisez la taille de l’écran du périphérique mobile (largeur et la hauteur).

   La largeur peut être comprise entre 150 et 968 pixels. La hauteur peut être comprise entre 150 et 1 280 pixels.

5. (Facultatif) Sélectionnez le système d’exploitation du périphérique.

   Options :

   • Android
   • iOS
   • Windows
   • Symbian
   • BlackBerry

   Si vous utilisez le compositeur d’expérience avancé et choisissez un système d’exploitation, Target émule cet appareil lorsque vous affichez la page. Par exemple, si l’apparence est différente sur Android et sur iOS pour votre site réactif, Target reproduit ce comportement.

6. Cliquez sur Enregistrer.

Créer une expérience réactive

Ajoutez des fenêtres d’affichage mobiles à vos activités Target pour créer des expériences réactives pour les écrans mobiles.

1. Créez l’activité souhaitée.

2. Dans le compositeur d’expérience visuelle (VEC), cliquez sur l’icône d’engrenage représentant les Paramètres, puis sélectionnez Ajouter des fenêtres d’affichage mobiles.

   

3. Cliquez sur l’icône Périphériques, puis activez chaque périphérique auquel ajouter une fenêtre d’affichage mobile.

   

   Les fenêtres d’affichage mobiles sont répertoriées de la plus petite à la plus grande selon la largeur.

4. Modifiez les fenêtres d’affichage mobile comme vous le souhaitez.

   Toute modification apportée à l’expérience est appliquée à l’expérience sur tous les appareils. Par exemple, vous modifiez le texte d’un en-tête.

   Placez votre souris sur le nom d’une fenêtre d’affichage pour afficher la taille de celle-ci.

   

5. Si nécessaire, basculez entre les modes portrait et paysage en cliquant sur l’icône d’orientation voulue.

   

Vidéos de formation

Les vidéos suivantes contiennent davantage d’informations sur les concepts abordés dans cet article.

Compositeur d’expérience visuelle (2 de 2) (07:29)

La vidéo de démonstration suivante contient des informations sur l’utilisation du compositeur d’expérience visuelle avec des fenêtres d’affichage mobiles :

• Attribution d’un nouveau nom à une expérience et duplication d’une expérience
• Création d’une expérience de redirection
• Ciblage d’une activité sur une URL unique ou un groupe d’URL
• Création d’une activité multipage
• Prévisualisation et création d’expérience pour des sites web réactifs
• Utilisation de superposition pour mettre en avant des types d’éléments

Préférences du compte dans Adobe Target

Cette vidéo contient des informations sur la configuration des fenêtres d’affichage mobiles, à partir de la minute 4:40.