Spécificités graphiques dans Qualifio

Gilles Van Eylen -

Votre campagne sera publiée sur votre site web, blog ou app

Votre campagne sera un iframe Qualifio. Aucune connaissance en programmation n'est nécessaire pour cela ; vous aurez uniquement besoin d'avoir accès au code HTML de votre page web.

1.iframe-fr.jpg

Testez le comportement des iframes Qualifio et leur redimensionnement en fonction de la résolution avec ces deux exemples :

Exemple 1  Exemple 2

Télécharger le fichier source PSD de ces exemples

Votre campagne sera publiée sur un mini-site Qualifio

Vous pouvez également placer votre campagne Qualifio sur une page web dédiée appelée «mini-site». Dans ce cas, vous devrez travailler l'apparence de deux éléments : votre campagne (iframe) et la page qui l'accueillera (mini-site).

2.minisite-fr.jpg

Testez la réactivité d'un mini-site Qualifio et de la campagne qu'il contient avec ces deux exemples :

Exemple 1 Exemple 2 

Télécharger le fichier source PSD de l'exemple 2

L'apparence de votre campagne

Pour le design de votre campagne, vous avez deux options :

4.devices-fr.jpg

Indépendamment de votre choix, votre design restera le même de la première à la dernière étape de votre campagne. Il n'est pas possible d'afficher une bannière différente ou une autre image de fond dans chaque étape de la campagne, les mêmes bannière/footer/image de fond sont utilisés pour l'entièreté de votre campagne.

Option 1 : bannière/footer/couleur de fond

5.banneronly-fr.jpg

Testez le comportement de cette première option de design avec cette live preview :

Exemple

Télécharger le fichier source PSD de cet exemple

Détails de l'option 2 : image de fond + bannière/footer/couleur de fond

6.bg-banner-fr.jpg

Testez le comportement de cette seconde option de design avec cet exemple :

Exemple

Télécharger le fichier source PSD de cet exemple

Vos fichiers finaux, en fonction de vos choix de design :

7.finalfiles-1-fr.jpg

8.finalfiles-2-fr.jpg

Testez les previews suivantes pour vous aider à comprendre et visualiser pourquoi les trois images de fond ci-avant ne conviennent pas :

1. Éléments positionnés avec attention / 2. Logo inclus dans l'image / 3. Image avec une zone dédiée pour la campagne

👉 Vous souhaitez tirer parti au maximum de Qualifio en bénéficiant des services de notre Studio et une agence digitale réalise la créa de votre campagne ?

Afin de s'assurer de la faisabilité de la créa qui sera proposée ainsi que de la qualité de vos fichiers source, voici quelques bonnes pratiques à fournir au préalable à votre agence.

Quelle taille pour votre image de fond ?

Si votre campagne est un iframe

Pour la largeur

Il est nécessaire de connaitre la largeur de la zone dans laquelle la campagne sera placée. Cette zone peut être dans une page ou même dans un article. Votre webmaster ou webdesigner sera en mesure de vous donner précisément cette valeur. Si votre article fait 600px de large, donnez une largeur de 600px à votre campagne, et préparez une image de fond de 600px de large également

Pour la hauteur

Tout dépendra de votre contenu. Il est nécessaire d'avoir une idée du contenu de votre campagne, du contenu de vos questions et de votre formulaire. Dans la plupart des cas, une hauteur de 1200px suffira largement et vous donnera assez de flexibilité pour les étapes les plus longues. L'idéal serait de compléter entièrement une campagne avec son contenu, en pensant à vos indices image et/ou vidéo s'il y en a, et de la tester de bout en bout pour se rendre compte si une étape est vraiment longue. Tout dépendra aussi si vous décidez d'afficher toutes les questions sur une seule page ou de laisser une question par page. Si vous constatez qu'une étape déborde de votre image de fond, il sera nécessaire d'augmenter la hauteur de votre image de fond en conséquence.

Erreur fréquente : si votre campagne est placée dans votre page mais que l'image de fond ne s'affiche pas, cela veut simplement dire que la campagne est plus large que la zone de votre page. Assurez-vous que la largeur de la campagne indiquée dans Qualifio correspond bien à la largeur de la zone dans votre page et vérifiez ensuite que le code d'intégration de la campagne est à jour. Si vous intégrez votre campagne trop tot dans votre page et que vous modifiez ensuite sa taille dans Qualifio (hauteur, largeur), il sera nécessaire de remettre le code d'intégration à jour. En effet, celui-ci contient les valeurs de taille de votre campagne et ces dernières ne se mettent pas automatiquement à jour.

Si votre campagne est un mini-site

Pour la largeur

Si le mini-site sera créé spécialement pour votre opération et que vous êtes assez "libres", n'hésitez pas à être généreux et à occuper un maximum la largeur de l'écran. Il serait dommage d'avoir une campagne minuscule de 800px de large au milieu de l'écran avec un vide conséquent de part et d'autre. Si vous êtes en charge de créer le mini-site ou si un graphiste s'en charge pour vous, vous pouvez prévoir une largeur de campagne de 1500px voir 2000px. Si le mini-site n'a pas été créé depuis notre éditeur de mini-site et que ce dernier est hébergé en interne chez vous, votre webmaster ou webdesigner sera en mesure de vous indiquer la largeur prévue dans le mini-site pour afficher la campagne.

Pour la hauteur

Il faut appliquer la même procédure qu'expliquée pour l'image de fond d'un widget : il est nécessaire d'avoir une idée du contenu de votre campagne, du contenu de vos questions et de votre formulaire. Si vous n'avez pas la possibilité de tester votre campagne avec l'entièreté de son contenu (questions, formulaire, ...), prévoyez alors une image de fond suffisamment grande (1200px de haut) pour ne pas avoir de surprise sur les étapes les plus longues de votre campagne. Il sera peut-être nécessaire d'ajuster la hauteur de votre image de fond si jamais une étape venait à déborder de celle-ci.

Éléments à prendre en considération : Les dimensions de l'image ne sont pas les seules à être importantes, la taille du fichier l'est également. En effet, le poids des images influence grandement l'expérience de l'utilisateur et les performances globales de la campagne. En fonction du design, il est généralement recommandé que l'image de fond soit de 500 à 600 Ko, avec une limite allant jusqu'à 1 Mo. Veillez à compresser vos images : essayez l'outil de compression d'images Compressor.io pour conserver la qualité et réduire la taille du fichier de vos images !

Quelle taille pour votre bannière et/ou votre footer?

Si votre campagne est un iframe

Pour la largeur

Comme pour l'image de fond, il est nécessaire de se tourner vers votre webmaster/webdesigner afin de connaître la largeur de la zone dans laquelle sera affichée votre campagne. Si votre article fait 600px de large, votre campagne devra faire 600px de large ainsi que votre bannière.

Pour la hauteur

Contrairement à l'image de fond qui vient recouvrir le fond de la campagne, la bannière s'affiche tout en haut de votre campagne. Plus elle sera haute, plus votre contenu sera bas et cela demandera à vos participants de scroller pour le voir (en particulier sur mobile). Vous êtes totalement libre quant à la hauteur, mais nous vous suggérons de vous limiter à 250-300px de haut.

Si votre campagne est un mini-site

Pour la largeur

Suivez le même principe que pour l'image de fond d'un mini-site, cela nécessite de connaitre la largeur de la zone dans laquelle la campagne apparaitra. Passez par l'éditeur de mini-site de Qualifio si votre mini-site a été fait via Qualifio (éditez le mini-site et allez dans l'accordéon "Zone de la campagne") ou si votre mini-site a été fait en dehors (et est donc hébergé chez vous), adressez-vous à votre webmaster/web designer.

Pour la hauteur

Contrairement à l'image de fond qui vient recouvrir le fond de la campagne, la bannière, elle, s'affiche tout au dessus de votre campagne et plus celle-ci sera haute, plus votre contenu sera bas et cela demandera à vos participants de scroller pour le voir. En particulier sur mobile. Vous êtes totalement libre sur la hauteur, rien ne vous empêche de préparer un visuel de 600px de haut mais si vous en avez la possibilité, limitez-vous à 250/300px de haut.

Derniers conseils pour votre bannière

Certains préfèrent que la bannière tranche totalement avec le contenu de la campagne, tandis que d'autres préfèrent au contraire donner une impression de continuité avec le reste de la campagne.Voici trois manières originales de travailler pour améliorer la continuité de votre visuel :

  1. Dans le premier exemple, la bannière ne contient qu'un élément sur fond totalement transparent (une bannière au format .png) et le fond que vous voyez derrière la bannière n'est rien d'autre que la couleur de fond de la campagne.
  2. Dans le second exemple, le bas de la bannière est un léger dégradé dans la même couleur que la couleur de fond de la campagne (blanc intense, dans ce cas-ci).
  3. Dans le troisième exemple, la bannière contient une zone de la même couleur que la couleur de fond de la campagne (rose clair) qui est placée en bas et derrière les lots. Une fois que la bannière est ajoutée dans la campagne, les lots donnent l'impression d'être placés sur la zone de jeu, et ce, sans avoir utilisé une seule ligne de code. Pratique pour donner un peu de relief à votre campagne et faire ressortir votre dotation !
faq-banners-fr.jpg

 

Cet article vous a-t-il été utile ?

Can’t find the answer you need?

Send us a question and connect with an expert to get personal assistance.

Contact support

Vous ne trouvez pas les réponses que vous cherchez ?

Nous sommes là pour vous aider. Envoyez-nous une demande en direct !

Contacter le support
helpcenter experts