Find out how to create a responsive banner for your challenge, well suited for mobile phones, tablets, and desktop PCs.
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 1920x700 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 to 3 sections. Since computer screens do not all have the same screen resolution, the design template needs to have 3 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.
- A Main zone containing all secondary graphical elements, which will not be displayed on all screens.
- 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 (only for the desktop PC banner).
Here is an example from the Neolidat Challenge:
This is the final banner created for the fictive Neolidat challenge. We can see that the main logo is placed in the middle, within the Safe zone, which we have indicated in a red color in the below illustration. The chocolate squares as well as the colored droplets are located all around the main logo and all over the page, within the Main zone and the Extra zone (respectively highlighted in a pink and a light pink 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 3, the Extra zone, is only viewable on very wide screens, and completely disappears when set on a smaller screen.
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.