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

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

La fonction de prévisualisation de fenêtres d’affichage mobiles est conçue pour les sites réactifs qui s’affichent correctement sur divers périphériques, fenêtres et tailles d’écran. Les sites réactifs s’adaptent 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 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 des périphériques les plus utilisés. 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. Par exemple, voir 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 fenêtre d’affichage (largeur x hauteur) Résolution du périphérique (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 1 792
iPhone 11 Xr 414 x 896 828 x 1 792
iPhone 11 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 1 334
iPhone 7 Plus 414 x 736 1 080 x 1 920
iPhone 7 375 x 667 750 x 1 334
iPhone 6s Plus 414 x 736 1 080 x 1 920
iPhone 6s 375 x 667 750 x 1 334
iPhone 6 Plus 414 x 736 1 080 x 1 920
iPhone 6 375 x 667 750 x 1 334
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 périphérique particulier, 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 numérique afin de vous assurer qu’elle s’affiche correctement sur tous les périphériques, n’appliquez pas de ciblage. Utilisez plutôt des fenêtres d’affichage mobiles pour prévisualisation de l’activité sur chaque taille d’écran.

Pour les sites réactifs, en règle générale, votre site est conçu pour s’ouvrir dans une vue différente lorsqu’il est consulté par un périphérique doté d’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 des 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 multimédia.

Enregistrez vos points d’arrêt CSS dans Target afin de pouvoir prévisualisation vos expériences pour chaque vue définie. 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 vue à un site si votre activité est ciblée sur un périphérique 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 périphériques, 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 aux fenêtres d’affichage.

Configuration de la fenêtre d’affichage mobile

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 visuel d’expérience.

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

    Ajouter la fenêtre d’affichage

    OU

    Pour modifier la configuration d’une fenêtre d’affichage mobile existante, sélectionnez-la, puis cliquez sur l’icône Modifier (représentant un 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 du périphérique mobile, à la fois sa largeur et sa 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 supprimer la fenêtre d’affichage de ces activités avant de pouvoir la supprimer."

Créer une expérience adaptée

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 Visual Experience Composer (VEC), cliquez sur l’icône d’engrenage Paramètres, puis sélectionnez Ajouter les fenêtres d’affichage mobiles.

    Ajouter les fenêtres d’affichage mobiles, option

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

    Activer les 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 périphériques. Par exemple, vous modifiez le texte d’un titre.

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

    Expérience adaptée à l’iPhone 11 Pro 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 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