Your campaign will be published on your website, blog or app
Your campaign will be a Qualifio iframe. You don’t need programming skills for this, but you need to have access to the HTML code of your website.
You can see the behaviour of Qualifio iframes and how they adapt to smaller screen resolutions with these live examples:
Download PSD source files of those examples
Your campaign will be published on a Qualifio minisite
You can also embed your campaign’s iframe on a dedicated webpage called "minisit". In this case, you have to design two things with Qualifio: your campaign (iframe) and the page around it (minisite).
- Discover all the features of our minisite editor.
- Qualifio provides you with a dedicated URL to access your minisite.If you already have a URL, we can display your minisite on it using a redirect.
You can see the behaviour of a minisite and the campaign with those live examples:
Download the PSD source file of example 2
Campaign look & feel
To design your campaign, you have two options:
Regardless of the option you choose, your design will remain the same from the first to the last step of your campaign. It is not possible to load a different banner or background image in each step of the campaign, the same banner/footer/background image for the whole campaign.
Option 1: banner/footer/background colour
You can test the behaviour of this first design option with this live example:
Option 2: background image + banner/footer/background colour
You can test the behaviour of this second design option with this live example:
Your files, depending on your design choices:
Find below live previews to help you understand why those three background images are the wrong choices:
1. Carefully positioned items / 2. Logo included in the image / 3. Image with a dedicated area for the campaign
👉 You want to get the most out of Qualifio by using our Studio's services and a digital agency will be creating your campaign's design?
To ensure the feasibility of the creative that will be proposed, as well as the quality of your source files, here are some good practices to provide your agency beforehand.
What size for your background image?
If your campaign is an iframe
For the width
You will have to know the width of the zone that will contain the campaign. That zone can be a page or even an article. Your webmaster or webdesigner will be able to give you that value precisely. If your article has a width of 600px, give a width of 600px to your campaign, and prepare a background image that is also 600px wide.
For the height
It will depend on your content. You need to have an idea of the content of your campaign, questions as well as your form. In most cases, a height of 1200px will be more than enough and will give you flexibility for your longest steps.
Ideally, you should first complete all the content of your campaign. Do not forget to already add your images in your questions or your answers if you are planning to have some visual tips, and/or embedded videos, those elements have a major impact on the height of your campaign. Then, test your campaign from the beginning to the end, to see if one of your steps is particularly long.
Choosing to display all your questions on one page or one question per page has also to be taken into consideration. If you see that a step is longer than your background image, you will have to upload a longer background image in consequence.
If your campaign is a minisite
For the width
If your minisite is created for a particular action and you do not have too many graphic constraints, do not hesitate to be generous and occupy the width of the screen at the maximum. It would be a pity to have a small campaign that has only a width of 800px in the middle of a screen with blank spaces on both sides. A good width for a minisite would be 1500px to 2000px.
If the minisite has not been created with our minisite editor and is hosted on your servers, your webmaster or web designer will be able to give you the exact width dedicated for the campaign in the minisite.
For the height
Apply the same procedure as for the background image of a widget. You need to have an idea of the content of your campaign, your questions and your form. If you do not have to possibility to test the campaign with its entire content, consider a background image big enough (a height of 1200px) to not be surprised by a step that would be too long. And if a step is too long, you will have to upload a longer background image.
Things to consider: Not only image dimensions are important, but also the file size. Image sizes greatly influence the user experience and overall campaign performance. Depending on the design, it is generally recommended that the uploaded background image be 500-600KB, with a limit of up to 1MB. Make sure to compress your images – try the Compressor.io image compression tool to keep the quality and reduce the file size of background images!
Which size for your banner and/or your footer?
If your campaign is an iframe
For the width
As for the background image, it is necessary to ask your webmaster/web designer to know the width of the area that will contain the campaign. If your article has a width of 600px, your campaign must have a width of 600px, as well as your banner.
For the height
Unlike the background image that will cover the background of your campaign, the banner will be displayed above the campaign and the longer the banner will be, the more the participant will have to scroll to see the content. In particular on mobile. If you do not have any graphic constraints, you could have a banner that has a height of 600px if you want to, but we recommend a height of a maximum of 250-300px.
If your campaign is a minisite
For the width
As for the background image of a minisite, it is necessary to know the width of the area that will be in the campaign. Open the minisite editor of Qualifio if your minisite has been made with Qualifio, edit the minisite and go in the accordion "Campaign zone". If your minisite has been made otherwise (and is therefore hosted on your servers), contact your webmaster/web designer.
For the height
Unlike the background image that will cover the background of your campaign, the banner will be displayed above the campaign and the longer the banner will be, the more the participant will have to scroll to see the content. In particular on mobile. If you do not have any graphic constraints, you could have a banner that has a height of 600px if you want to, but we recommend a height of a maximum of 250 to 300px.
Some advice for your banner
Some people prefer that the banner is an important visual cut with the content of the campaign, and, on the opposite, some others give more importance to the graphic continuity and prefer that the banner and the rest of the campaign look like one single seamless image. Here are three original ways to work with your banner to improve the graphic continuity in your campaign:
- In the first example, the banner contains only one element, the Batman logo, on a transparent background (therefore, your banner is a .png file) and the yellow background you see behind is simply the background colour of the campaign you can see through the transparent banner.
- In the second example, the bottom of the banner is a soft gradient to the same colour as the background colour of the campaign (pure white in this case).
- In the third example, the banner contains a 'zone' in the same colour as the background colour of your campaign (light pink in this case) and that zone is put behind the prizes. Once the banner is uploaded to the campaign, the prizes look like they are put in the game zone. And it's done without any coding skills! Useful when you need to create a little bit of perspective in your campaign and to help your prizes catch the eyes of your participants.