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.
Testez le comportement des iframes Qualifio et leur redimensionnement en fonction de la résolution avec ces deux exemples :
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).
- Découvrez toutes les fonctionnalités de notre éditeur de mini-site.
- Qualifio vous fournit une URL dédiée pour accéder à votre mini-site.Si vous possédez déjà une URL, vous pouvez afficher votre mini-site dessus en mettant en place une redirection.
Testez la réactivité d'un mini-site Qualifio et de la campagne qu'il contient avec ces deux exemples :
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 :
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
Testez le comportement de cette première option de design avec cette live preview :
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
Testez le comportement de cette seconde option de design avec cet exemple :
Télécharger le fichier source PSD de cet exemple
Vos fichiers finaux, en fonction de vos choix de design :
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.
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 :
- 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.
- 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).
- 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 !