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.

REMARQUE
  • Utilisez les fenêtres d’affichage mobiles si votre site est réactif et que les éléments de votre page de bureau sont également utilisés sur votre page mobile dans une configuration différente. Si vous disposez d’un site mobile séparé avec une structure séparée, tel que m.mysite.com, utilisez plutôt une activité multipage.

  • Les fenêtres d’affichage mobiles ne sont pas disponibles si elles sont recouvertes par une offre de redirection.

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.

REMARQUE

Plusieurs sites web répertorient les tailles de fenêtres d’affichage pour les appareils populaires. Pour obtenir un exemple, reportez-vous à la section https://viewportsizer.com/devices/. Consultez le site web du fabricant de l’appareil pour obtenir les informations les plus précises et les plus récentes.

Périphérique Taille de la fenêtre d’affichage (largeur x hauteur) Résolution de l’appareil (largeur x hauteur)
iPhone 12 390 x 844 1170 x 2532
iPhone 12 Mini 360 x 780 1080 x 2340
iPhone 12 Pro 390 x 844 1170 x 2532
iPhone 12 Pro Max 428 x 926 1248 x 2778
iPhone SE 214 x 379 640 x 1136
iPhone 11 Pro Max 414 x 896 1242 x 2688
iPhone 11 Xs Max 414 x 896 1242 x 2688
iPhone 11 414 x 896 828 x 1792
iPhone 11 Xr 414 x 896 828 x 1792
iPhone 11 Pro 375 x 812 1125 x 2436
iPhone 11 X 375 x 812 1125 x 2436
iPhone 11 Xs 375 x 812 1125 x 2436
iPhone X 375 x 812 1125 x 2436
iPhone 8 Plus 414 x 736 1080 x 1920
iPhone 8 375 x 667 750 x 1334
iPhone 7 Plus 414 x 736 1080 x 1920
iPhone 7 375 x 667 750 x 1334
iPhone 6s Plus 414 x 736 1080 x 1920
iPhone 6s 375 x 667 750 x 1334
iPhone 6 Plus 414 x 736 1080 x 1920
iPhone 6 375 x 667 750 x 1334
iPad Pro 1024 x 1366 2048 x 2732
iPad 3e et 4e génération 768 x 1024 1536 x 2048
iPad Air 1 et 2 768 x 1024 1536 x 2048
iPad Mini 768 x 1024 768 x 1024
iPad Mini 2 et 3 768 x 1024 1536 x 2048
Nexus 6P 411 x 731 1440 x 2560
Nexus 5X 411 x 731 1080 x 1920
Google Pixel 411 x 731 1080 x 1920
Google Pixel XL 411 x 731 1440 x 2560
Google Pixel 2 411 x 731 1080 x 1920
Google Pixel 2 XL 411 x 823 1440 x 2880
Samsung Galaxy Note 5 480 x 853 1440 x 2560
LG G5 360 x 640 1440 x 2560
LG G4 360 x 640 1440 x 2560
LG G3 360 x 640 1440 x 2560
One Plus 3 480 x 853 1080 x 1920
Samsung Galaxy S9 360 x 740 1440 x 2960
Samsung Galaxy S9+ 360 x 740 1440 x 2960
Samsung Galaxy S8 360 x 740 1440 x 2960
Samsung Galaxy S8+ 360 x 740 1440 x 2960
Samsung Galaxy S7 360 x 640 1440 x 2560
Samsung Galaxy S7 Edge 360 x 640 1440 x 2560
Nexus 7 (2013) 600 x 960 1200 x 1920
Nexus 9 768 x 1024 1536 x 2048
Samsung Galaxy Tab 10 800 x 1280 800 x 1280
Chromebook Pixel 1280 x 850 2560 x 1700

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.

IMPORTANT

Vous pouvez modifier une expérience depuis les fenêtres d’affichage mobiles. Toutefois, ces modifications ne s’appliquent pas seulement à la fenêtre d’affichage dans laquelle vous travaillez, mais à toutes les fenêtres d’affichage et à tous les appareils. De même, la modification d’une expérience dans l’affichage de bureau classique entraîne la modification de la page pour toutes les tailles d’écran, pas seulement pour l’affichage de bureau. Actuellement, Target ne prend pas en charge les modifications de page spécifiques à la fenêtre d’affichage.

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.

    Ajout de la fenêtre d’affichage

    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.

REMARQUE

Si vous tentez de supprimer une fenêtre d’affichage mobile en cours d’utilisation, le message suivant s’affiche : « Cette fenêtre d’affichage est actuellement associée à une ou plusieurs activités. Vous devez retirer la fenêtre d’affichage de ces activités avant de pouvoir la supprimer. »

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.

    Option 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.

    Activation des fenêtres d’affichage mobiles

    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.

    Expérience réactive iPhone 11 Pro Max

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

    Options d’orientation

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) Badge de présentation

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 Badge de présentation

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

Sur cette page