Show Menu
SUJETS×

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

Les fenêtres d’affichage mobiles vous aident à prévisualiser la manière dont les activités apparaissent sur des écrans de différentes tailles.
La fonctionnalité d’aperçu des fenêtres d’affichage mobiles est conçue pour des sites réactifs. 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 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. Il s’agit 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 certains périphériques populaires. Rappelez-vous d’utiliser la taille de fenêtre d’affichage dans Target.
Périphérique
Taille de fenêtre d’affichage
Résolution du périphérique
iPhone X
375 (largeur) x 812 (hauteur)
1 125 (largeur) x 2 436 (hauteur)
iPhone 8 Plus
414 (largeur) x 736 (hauteur)
1 080 (largeur) x 1 920 (hauteur)
iPhone 8
375 (largeur) x 667 (hauteur)
750 (largeur) x 1 334 (hauteur)
iPhone 7 Plus
414 (largeur) x 736 (hauteur)
1 080 (largeur) x 1 920 (hauteur)
iPhone 7
375 (largeur) x 667 (hauteur)
750 (largeur) x 1 334 (hauteur)
iPhone 6
375 (largeur) x 667 (hauteur)
750 (largeur) x 1 334 (hauteur)
iPhone 6s
414 (largeur) x 736 (hauteur)
1 080 (largeur) x 1 920 (hauteur)
iPad Pro
1 024 (largeur) x 1 366 (hauteur)
2 048 (largeur) x 2 732 (hauteur)
iPad 3e et 4e génération
768 (largeur) x 1 024 (hauteur)
1 536 (largeur) x 2 048 (hauteur)
iPad Air 1 et 2
768 (largeur) x 1 024 (hauteur)
1 536 (largeur) x 2 048 (hauteur)
iPad Mini
768 (largeur) x 1 024 (hauteur)
768 (largeur) x 1 024 (hauteur)
iPad Mini 2 et 3
768 (largeur) x 1 024 (hauteur)
1 536 (largeur) x 2 048 (hauteur)
Nexus 6P
411 (largeur) x 731 (hauteur)
1 440 (largeur) x 2 560 (hauteur)
Nexus 5X
411 (largeur) x 731 (hauteur)
1 080 (largeur) x 1 920 (hauteur)
Google Pixel
411 (largeur) x 731 (hauteur)
1 080 (largeur) x 1 920 (hauteur)
Google Pixel XL
411 (largeur) x 731 (hauteur)
1 440 (largeur) x 2 560 (hauteur)
Google Pixel 2
411 (largeur) x 731 (hauteur)
1 080 (largeur) x 1 920 (hauteur)
Google Pixel 2 XL
411 (largeur) x 731 (hauteur)
1 440 (largeur) x 2 560 (hauteur)
Samsung Galaxy Note 5
480 (largeur) x 853 (hauteur)
1 440 (largeur) x 2 560 (hauteur)
LG G5
480 (largeur) x 853 (hauteur)
1 440 (largeur) x 2 560 (hauteur)
One Plus 3
480 (largeur) x 853 (hauteur)
1 080 (largeur) x 1 920 (hauteur)
Samsung Galaxy S9
360 (largeur) x 740 (hauteur)
1 440 (largeur) x 2 960 (hauteur)
Samsung Galaxy S9+
360 (largeur) x 740 (hauteur)
1 440 (largeur) x 2 960 (hauteur)
Samsung Galaxy S8
360 (largeur) x 740 (hauteur)
1 440 (largeur) x 2 960 (hauteur)
Samsung Galaxy S8+
360 (largeur) x 740 (hauteur)
1 440 (largeur) x 2 960 (hauteur)
Samsung Galaxy S7
360 (largeur) x 640 (hauteur)
1 440 (largeur) x 2 560 (hauteur)
Samsung Galaxy S7 Edge
360 (largeur) x 640 (hauteur)
1 440 (largeur) x 2 560 (hauteur)
Nexus 7 (2013)
600 (largeur) x 960 (hauteur)
1 200 (largeur) x 1 920 (hauteur)
Nexus 9
768 (largeur) x 1 024 (hauteur)
1 536 (largeur) x 2 048 (hauteur)
Samsung Galaxy Tab 10
800 (largeur) x 1 280 (hauteur)
800 (largeur) x 1 280 (hauteur)
Chromebook Pixel
1 280 (largeur) x 850 (hauteur)
2 560 (largeur) x 1 700 (hauteur)
Plusieurs sites web répertorient les tailles de fenêtres d’affichage pour les appareils populaires. Par exemple, voir https://viewportsizer.com/devices/ ou consultez le site Web du fabricant de périphériques.
Si vous souhaitez 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. Si vous voulez exécuter une activité sur l’ensemble de votre expérience numérique et vous assurer qu’elle s’affiche correctement sur tous les périphériques, n’appliquez pas de ciblage et utilisez 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 . 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, vous pouvez quand même utiliser le compositeur web mobile pour afficher un site si votre activité cible un périphérique spécifique.
Bien que vous puissiez modifier une expérience directement dans les fenêtres d’affichage mobiles, ces changements s’appliquent à toutes les fenêtres d’affichage et tous les périphériques, 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. La modification des pages spécifiques aux fenêtres d’affichage n’est pour le moment pas prise en charge.

Configuration des fenêtres d’affichage mobiles

Configurez toutes les fenêtres d’affichage mobiles que vous voulez rendre disponibles lors de la création de vos expériences.
  1. Cliquez sur Configuration  > Préférences .
  2. Dans la section Configuration des fenêtres d’affichage mobiles de la page Préférences de compte, cliquez sur Ajouter pour ajouter une fenêtre d’affichage mobile.
    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 doit être comprise entre 150 et 968 pixels. La hauteur doit ê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éation d’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 une activité.
  2. Dans le compositeur d’expérience visuelle, 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 (par exemple, si vous changez le texte d’un titre) sera appliquée à l’expérience sur tous les périphériques.
    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.
    • Portrait :
    • Paysage :

Cas d’utilisation : Ciblage de deux versions de l’iPhone

Ce cas d’utilisation décrit comment configurer des expériences pour deux versions de l’iPhone, l’iPhone 6 et l’iPhone 6 Plus, à l’aide de la fonctionnalité de fenêtres d’affichage mobiles de Target Standard.
  1. Dans Target Standard, cliquez sur Configuration  > Préférences .
  2. Dans la section de configuration des fenêtres d’affichage mobiles de la page des préférences, créez des fenêtres d’affichage mobiles pour l’iPhone 6 et l’iPhone 6 Plus.
    Utilisez les paramètres suivants pour chaque fenêtre d’affichage :
    Nom
    Largeur
    Hauteur
    Système d’exploitation
    iPhone 6
    375
    667
    iOS
    iPhone 6 Plus
    414
    736
    iOS
  3. Créez une activité comprenant une expérience que vous souhaitez cibler.
  4. Sélectionnez l’expérience que vous souhaitez cibler pour les visiteurs qui accèdent à votre site depuis un iPhone 6 ou un iPhone 6 Plus.
  5. Lorsque vous sélectionnez votre cible, cliquez sur Créer une audience , puis configurez une audience comme illustré dans l’image ci-dessous :
    Étant donné que le téléphone peut être pivoté en mode paysage, ce qui requiert à la fois une longueur et une largeur supérieures à 320, cela créé une condition que seuls les iPhone 6 et 6 Plus sont capables d’observer, lorsqu’elle est combinée avec le modèle de périphérique iPhone.
  6. Cliquez sur Enregistrer .
  7. Continuez à configurer votre activité comme vous l’auriez normalement fait.

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

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 le badge

Cette vidéo contient des informations sur la configuration des fenêtres d’affichage mobiles dans les préférences du compte, à partir de la minute 4:40.