Fenêtres d’affichage mobiles pour les expériences réactives
Last update: Sat Jul 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
Rubriques :
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.
NOTE
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 appareils populaires. Rappelez-vous d’utiliser la taille de fenêtre d’affichage dans Target.
NOTE
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.
Appareil
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 appareil précis, choisissez 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 cet appareil. 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 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 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 appareil 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 task_B4B161499DC0470584ED922A4D20FCAB
Configurez les fenêtres d’affichage mobiles que vous voulez rendre disponibles lors de la création de vos expériences.
Cliquez sur Administration > Visual Experience Composer.
Dans la section Mobile viewports configuration, cliquez sur Add.
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 Edit (crayon).
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.
Précisez la taille de l’écran de l’appareil 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.
(Facultatif) Sélectionnez le système d’exploitation de l’appareil.
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.
Cliquez sur Save.
NOTE
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 task_D6332438B5EE48CCA8AF199270F1CAEF
Ajoutez des fenêtres d’affichage mobiles à vos activités Target pour créer des expériences réactives pour les écrans mobiles.
Dans le Visual Experience Composer (VEC), cliquez sur l’icône d’engrenage Settings, puis sélectionnez Add Mobile Viewports.
Cliquez sur l’icône Devices, puis activez chaque périphérique qui doit disposer d’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.
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.
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 sur 2) (7: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
