Size of the challenge banner

Before creating the banner for your challenge, we invite you to read our article on the public presentation pages of the challenge, in order to view a model of a challenge page and see where the banner is located.

Creating the challenge banner

The Agorize platform is responsive, which means that it has been optimized to automatically adapt to the remaining free space of all your devices screens (mobile phone, tablet, desktop PC).

It is therefore necessary to create 3 different banner formats so that the content can be seen by all participants:

• Desktop format banner: gabarit-desktop.psd - photo_size_select_large 2500x700 pixels
• Tablet format banner: gabarit-tablet.psd - photo_size_select_large 992x700 pixels
• Mobile format banner: gabarit-mobile.psd - photo_size_select_large 768x700 pixels

Important: each of these 3 banner formats is divided into 2 sections. Since computer screens do not all have the same screen resolution, the design template needs to have 2 separate zones:

• A Safe zone containing the most important items: it will be the only zone viewable on all screens. It must include the textual content, the logo, and the main graphical element.
• An Extra zone that will only be viewable on wider screens. However, it should not be left completely empty. It can contain graphical elements intended to decorate the banner.

Here is an example from a challenge:

This is the final banner created for a challenge. We can see that the main logo is placed in the middle, within the Safe zone, which we have indicated in a dark blue color in the below illustration. As you can see, there is no important information on the edges, within the Extra Zone (highlighted in a light blue color).

In the following illustration, we can notice that the display changes according to the screen format.

Part 1 represents the Safe zone and remains constantly visible, whereas part 2, the Extra zone, is only viewable on wider screens.

It is therefore very important to add every relevant elements such as the logo, text, or any other component, only in the Safe zone, otherwise you will not be able to view them on smaller screens.

The same applies to tablet screens...

… and to mobile phone screens:

How to animate the challenge banner?

You can have your challenge banner animated if you are using a desktop PC, just by replacing the static banner with a YouTube link video. You can check out an example of video by clicking on this link.

Important: there are several aspects to take into account:

• You still need to create the three fixed banners shown above.
  • The tablet banner and the mobile phone banner will not be replaced by the video and will remain unchanged, so that users do not have to consume too much of their data.
  • The desktop banner will appear first while the video is buffering. That way, a back-up image will always be available should the video would not load.
• The video must imperatively be from YouTube and not from any other video server.
• The Youtube plugin format that we use requires black bands on certain screen sizes in order to properly fit to the video. On most regular computers, the video will be instantly displayed using the full screen.
• The quality of the video will always depend on the user internet speed. A user with a poor internet connection will view the video with a rather low-quality.