Les sondages d'EngagementHQ sont conçues pour être mobiles afin de garantir que l'engagement communautaire est accessible à tous. Les questions et l'interface de notre sondage sont conçues pour être utilisables et réactives sur tous les appareils. Si votre sondage ne s'affiche pas correctement, cela peut être dû à un élément dans la description du sondage ou dans le titre et la description d'une section, comme un tableau ou des images.
Nous vous recommandons de tester tous les nouveaux sondages clonés sur tous les appareils, en particulier si vous avez des tableaux, des images ou des vidéos dans la description ou si vous avez ajouté des personnalisations HTML.
Tester sur votre propre appareil mobile est la meilleure option qui s'offre à vous. Vous aurez ainsi une idée plus précise de l'aspect de votre sondage sur un écran plus petit, et vous pourrez vous assurer que votre sondage est accessible à tous les utilisateurs.
Vous pouvez également utiliser votre navigateur pour reproduire la taille d'un écran portable:
Sélectionnez Aperçu sur votre sondage pour ouvrir la page de sondage autonome.
Ouvrez vos outils de développement en utilisant Ctrl + Shift +I (sur PC) ou ⌘ +Option + C (sur Mac). Vous pouvez également cliquer sur le bouton droit de la souris > Inspecter.
Lorsque les outils de développement sont ouverts, utilisez Ctrl + Shift +M (sur PC) ou ⌘ + Shift +M (sur Mac). Il s'agit du mode Responsive Design.
En mode Responsive Design, vous pouvez utiliser le menu déroulant en haut de l'écran pour passer d'un appareil à l'autre ou spécifier une largeur d'écran en pixels.
Vous pouvez ajouter du HTML personnalisé à vos sondage via code view (< >). Veuillez noter que cette option n'est pas prise en charge et que nous vous recommandons d'utiliser la fonctionnalité existante autant que possible. Si vous choisissez d'ajouter du HTML personnalisé, nous vous recommandons d'avoir des connaissances sur le responsive design avant de commencer.
Résolution des problèmes liés aux tableaux
Lorsque vous créez un tableau à l'aide de l'éditeur de texte de l'onglet Détails, il est automatiquement réactif. La largeur du tableau et des colonnes qu'il contient utilise des pourcentages, de sorte que la zone de contenu s'adapte lorsqu'elle est visualisée sur un ordinateur de bureau, une tablette ou un portable.
Par exemple, un tableau à quatre colonnes aura une largeur de 100 %, tandis que chaque colonne aura une largeur de 25 %. En utilisant une largeur réactive, tout texte à l'intérieur des colonnes sera enveloppé, en augmentant la hauteur pour que tout le texte soit lisible.
Si la largeur de votre tableau dépasse le contenu de votre sondage, sélectionnez < > pour ouvrir code view, recherchez tout code dont la largeur correspond à un nombre de pixels spécifié et remplacez-le par un pourcentage. Par exemple, <table style="width : 999px"> doit être remplacé par <table style="width : 100%">.
Les tableaux ne doivent être utilisés que pour les données tabulaires et non pour la mise en page. Si vous devez utiliser un tableau pour la mise en page, maintenez la largeur de la colonne à un pourcentage et ajoutez une balise role="presentation" à la balise <table>. Le code HTML de votre tableau commencerait comme suit : <table role="presentation">
Résolution des problèmes d'images
Par défaut, lorsque vous ajoutez une image à l'éditeur de texte dans un champ Description, elle apparaît à une largeur de 300px.
Pour modifier la largeur par défaut de votre image, sélectionnez-la et choisissez l'icône de la règle pour ouvrir les options de Modification de la taille. Vous pouvez modifier la Largeur et la Hauteur en pixels ou en pourcentage et sélectionner Mettre à jour pour appliquer.
Quelle que soit leur taille, les images d'un tableau s'adaptent à la colonne. Si vos images sont plus larges que la largeur du tableau ou des colonnes, elles risquent d'être plus petites que prévu. Si cela pose problème, envisagez de placer l'image dans le texte en utilisant les options d'alignement et d'affichage de l'image plutôt que dans un tableau.
Si vous avez une question à choix multiples sur une série d'images, envisagez d'utiliser les types de questions à Cocher ou Radio, qui vous permettent tous deux de convertir les options en images.
Résolution des problèmes des Vidéos
Les vidéos placées dans un éditeur de texte du champ Description auront par défaut une largeur de 100 % de la zone contextuelle. Une largeur de 100 % garantit que la vidéo sera adaptée à tous les écrans et que les utilisateurs mobiles pourront la regarder sans problème.
Bien que nous recommandions de placer une vidéo directement dans le champ Description, si vous avez besoin de modifier la taille de la vidéo, vous pouvez placer la vidéo dans un tableau et redimensionner le tableau. Pour aligner la vidéo à gauche ou à droite, créez un tableau à deux colonnes et placez la vidéo de chaque côté. Pour centrer la vidéo, créez un tableau à trois colonnes avec une colonne centrale plus large que les colonnes de gauche et de droite, puis placez la vidéo au centre.
Veuillez noter que les tableaux sont également réactifs, de sorte qu'une vidéo dans un tableau peut être beaucoup plus petite sur un appareil portable. Vous devrez cliquer sur prévisualiser la vidéo sur tous les écrans pour vous assurer que sa taille est correcte.