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 fonction d’aperçu de fenêtre d’affichage mobile est conçue pour les sites réactifs qui s’affichent correctement sur divers 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 et les téléphones mobiles.

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 distinct avec une structure distincte, telle que m.mysite.com, utilisez plutôt une activité multi-page.

  • 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 est de la taille de la fenêtre du navigateur, moins 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 pour les appareils 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.

Device Taille de la fenêtre d’affichage (largeur x hauteur) Résolution de l’appareil (largeur x hauteur)
iPhone 12 390 x 844 1 170 x 2 532
iPhone 12 Mini 360 x 780 1 080 x 2 340
iPhone 12 Pro 390 x 844 1 170 x 2 532
iPhone 12 Pro Max 428 x 926 1 248 x 2 778
iPhone SE 214 x 379 640 x 1 136
iPhone 11 Pro Max 414 x 896 1 242 x 2 688
iPhone 11 Xs Max 414 x 896 1 242 x 2 688
iPhone 11 414 x 896 828 x 1792
iPhone 11 Xr 414 x 896 828 x 1792
iPhone 12 Pro 375 x 812 1 125 x 2 436
iPhone 11 X 375 x 812 1 125 x 2 436
iPhone 11 Xs 375 x 812 1 125 x 2 436
iPhone X 375 x 812 1 125 x 2 436
iPhone 8 Plus 414 x 736 1 080 x 1 920
iPhone 8 375 x 667 750 x 1334
iPhone 7 Plus 414 x 736 1 080 x 1 920
iPhone 7 375 x 667 750 x 1334
iPhone 6s Plus 414 x 736 1 080 x 1 920
iPhone 6s 375 x 667 750 x 1334
iPhone 6 Plus 414 x 736 1 080 x 1 920
iPhone 6 375 x 667 750 x 1334
iPad Pro 1 024 x 1 366 2 048 x 2 732
iPad 3e et 4e génération 768 x 1 024 1 536 x 2 048
iPad Air 1 et 2 768 x 1 024 1 536 x 2 048
iPad Mini 768 x 1 024 768 x 1 024
iPad Mini 2 et 3 768 x 1 024 1 536 x 2 048
Nexus 6P 411 x 731 1 440 x 2 560
Nexus 5X 411 x 731 1 080 x 1 920
Google Pixel 411 x 731 1 080 x 1 920
Google Pixel XL 411 x 731 1 440 x 2 560
Google Pixel 2 411 x 731 1 080 x 1 920
Google Pixel 2 XL 411 x 823 1 440 x 2 880
Samsung Galaxy Note 5 480 x 853 1 440 x 2 560
LG G5 360 (largeur) x 640 (hauteur) 1 440 x 2 560
LG G4 360 (largeur) x 640 (hauteur) 1 440 x 2 560
LG G3 360 (largeur) x 640 (hauteur) 1 440 x 2 560
One Plus 3 480 x 853 1 080 x 1 920
Samsung Galaxy S9 360 x 740 1 440 x 2 960
Samsung Galaxy S9+ 360 x 740 1 440 x 2 960
Samsung Galaxy S8 360 x 740 1 440 x 2 960
Samsung Galaxy S8+ 360 x 740 1 440 x 2 960
Samsung Galaxy S7 360 x 640 1 440 x 2 560
Samsung Galaxy S7 Edge 360 x 640 1 440 x 2 560
Nexus 7 (2013) 600 x 960 1 200 x 1 920
Nexus 9 768 x 1 024 1 536 x 2 048
Samsung Galaxy Tab 10 800 x 1 280 800 x 1 280
Chromebook Pixel 1 280 x 850 2 560 x 1 700

Pour diffuser une activité aux visiteurs sur un appareil particulier, sélectionnez l’audience appropriée pour cet appareil 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 numérique 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.

Pour les sites réactifs, votre site est généralement conçu pour s’ouvrir dans une vue différente lorsqu’il est utilisé par un appareil 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 d’arrêt 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 d’arrêt CSS sont également appelés requêtes de média.

Enregistrez vos points d’arrêt CSS dans Target afin de pouvoir prévisualiser vos expériences pour chaque vue que vous définissez. Chacune de ces expériences s’affiche 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é est ciblée sur un appareil spécifique.

IMPORTANT

Vous pouvez modifier une expérience dans les fenêtres d’affichage mobiles. Toutefois, ces modifications s’appliquent à toutes les fenêtres d’affichage et tous les appareils, et pas seulement à la fenêtre d’affichage dans laquelle vous travaillez. 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 souhaitez 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 cette fenêtre, 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. Spécifiez la taille d’écran de l’appareil mobile, à la fois la 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, émule cet appareil lorsque vous affichez la page. Target Par exemple, s’il existe un aspect différent pour Android et pour iOS sur votre site réactif, Target imite 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 afin de 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 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.

    Toutes les modifications apportées à l’expérience sont appliquées à 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.

    iPhone 11 Pro Expérience réactive max

  5. Si vous le souhaitez, basculez entre les modes portrait et paysage en cliquant sur l’icône d’orientation de votre choix.

    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 d’aperçu

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 de compte dans Adobe Target Badge Aperçu

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

Sur cette page