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.
L'idée est d'intégrer la campagne dans votre site web.
Aucune connaissance en programmation est nécessaire pour cela, mais vous aurez besoin d'avoir accès au code HTML de votre page.

1.iframe-fr.jpg

Testez le comportement des iframes Qualifio et leur redimensionnement en fonction de la résolution avec ces 2 live previews :

Exemple 1  Exemple 2

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

 

 

Votre campagne sera publiée sur un minisite Qualifio

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

 

2.minisite-fr.jpg

Testez la réactivité d'un minisite Qualifio et de la campagne qu'il contient avec ces live previews :

Exemple 1 Exemple 2 

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

 

 

Votre campagne sera publiée sur une page Facebook 

3.fb-fr.jpg

 

 

Le design de votre campagne

Pour le design de votre campagne, vous avez deux options. 
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 banner différente ou une autre image de fond dans chaque étape de la campagne, les mêmes banner/footer/image de fond sont utilisés pour l'entièreté de votre campagne.

4.devices-fr.jpg

 

Details de l'option 1 : banner/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

 

Details de l'option 2 : image de fond + banner/footer/couleur de fond

6.bg-banner-fr.jpg

Testez le comportement de cette seconde option de design avec cette live preview 

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 3 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 1 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.

Une erreur commune : 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 le manager 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 le manager (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 minisite

Pour la largeur : Si le minisite 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 minisite ou si un graphiste s'en charge pour vous, vous pouvez prévoir une largeur de campagne de 1000px voir 1100px.

Si le minisite n'a pas été créé depuis notre éditeur de minisite 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 minisite 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.

Si votre campagne est un canal Facebook

Largeur: 810px

Hauteur: 1200px (à ajuster si une étape déborde)

Quelle taille pour votre banner 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 banner.

Pour la hauteur : Contrairement à l'image de fond qui vient recouvrir le fond de la campagne, la banner, 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.

Si votre campagne est un minisite

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

Pour la hauteur : Contrairement à l'image de fond qui vient recouvrir le fond de la campagne, la banner, 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.

Si votre campagne est un canal Facebook

Largeur : 810px

Hauteur : 250 à 300px (hauteur max conseillée, mais vous êtes libre)

Quelques conseils pour votre banner

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 3 manières originales de travailler pour améliorer la continuité de votre visuel :

Dans le premier exemple, la banner ne contient qu'un élément sur fond totalement transparent (une banner en .png donc) et le fond que vous voyez derrière la banner n'est rien d'autre que la couleur de fond de la campagne.

Dans le second exemple, le bas de la banner 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)

Dans le troisième exemple, la banner contient une 'zone' de la même couleur que la couleur de fond de la campagne (rose clair ici) qui est placée en bas et derrière les lots.
Une fois que la banner 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 vos lots

faq-banners-fr.jpg