Graphic specifications in Qualifio

Gilles Van Eylen -

Your campaign will be published on your website, blog or app

Your campaign will be a Qualifio iframe.
The idea is to integrate your campaign to your website.
You don’t need programming skills for this, but you need to have access to the HTML code of your website.

1.iframe-en.jpg

You can see the behavior of Qualifio iframes and how they adapt to smaller screen resolutions with those 2 live previews :

Example 1  Example 2

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 «minisite». In this case, you have to design 2 things with Qualifio: your campaign (iframe) and the page around it (minisite).

 

2.minisite-en.jpg

You can see the behavior of a minisite and the campaign with those live previews :

Example 1 Example 2 

Download the PSD source file of example 2 

 

 

Your campaign will be published on a Facebook Page 

3.fb-en.jpg

 

 

Campaign design

To design your campaign, you have two options. 
Regardless of the option you choose, your design will remain the same from the first to last step of your campaign. It is not possible to load a different banner or background image in each step of the campaign, same banner/footer/background image for the whole campaign.

4.devices-en.jpg

 

Details of the option 1 : banner/footer/background colour

5.banneronly-en.jpg

You can test the behavior of this first design option with this live preview 

Example

Download the PSD source file

 

Details of the option 2 : background image + banner/footer/background colour

6.bg-banner-en.jpg

You can test the behavior of this second design option with this live preview 

Example

Download the PSD source file

 

Your files, depending on your design choices:

7.finalfiles-1-en.jpg

8.finalfiles-2-en.jpg

Find below live previews to help you to understand why those 3 last background images are 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?

In order 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.

 

 

 


 

Which 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 in 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.

A common mistake : if your campaign is put in your page but the background image is not displayed, it means that the campaign is larger than the area in your page.
Make sure that the width of the campaign set in the manager is the same as the width of the zone in your page and then make sure that the integration code of the campaign in your page is up to date. If you integrate the campaign too early in your page and then if you modify its size in the manager (height, width), you will have to update the integration code. The integration code contains the size values of your campaign and those values are not updated automatically !

If your campaign is a minisite

For the width : If your minisite is created for a particular action and that you do not have too much graphic constraints, do not hesitate to be generous and to 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 1000px to 1100px.

If the minisite has not been created with our minisite editor and that is hosted on your servers, your webmaster or webdesigner 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.

If your campaign is a Facebook channel

Width: 810px

Height: 1200px (to be adapted if a step is too long)

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 to your webmaster/webdesigner in order 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 recommand a height of maximum 250 to 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 contain 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/webdesigner.

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 recommand a height of maximum 250 to 300px.

If your campaign is a Facebook channel

Width : 810px

Height : 250 à 300px (maximum height advised, but you are free)

Some advices for your banner

Some people prefer that the banner is an important visual cut with content of the campaign, and, at 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 3 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 totally transparent background (therefore, your banner is a .png file) and the yellow background you see behind is simply the background color 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 color as the background color of the campaign (pure white in this case).

In the third example, the banner contains a 'zone' in the same color as the background color of your campaign (light pink in this case) and that zone is put behind the prizes.
Once the banner is uploaded in the campaign, the prizes look like they are put on 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.

faq-banners-en.jpg