Graphic specifications in Qualifio

Gilles Van Eylen -

Example 1 : Banner + footer + background color

It's the case we recommand the most: easy to design and works on every devices!

layout01-en.jpg

Download this example (.psd) 

 


 

Example 2 : background image + banner + footer + background color

More technical than the first case : your background image is intended to be displayed only on large devices (like a desktop). But your background image will be hidden on tablets & mobiles! That's why you also need to add a banner AND a background color to your campaign. For more information, click here
layout02-en.jpg

Download this example (.psd) 

 


 

Which size for your background image ?

If your campaign is a widget

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 a widget

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

 

Powered by Zendesk