Dimensions de la bannière d'un challenge

Avant de créer la bannière de votre challenge, nous vous conseillons de lire l’article qui présente les pages publiques de présentation d’un challenge pour visualiser l'apparence d'une page de challenge et où se situe la bannière.

Créer la bannière du challenge

La plateforme Agorize est responsive, c’est à dire qu’elle est optimisée pour s’adapter automatiquement à l'espace disponible à l'écran sur desktop, tablette et mobile.

Il est donc nécessaire de créer 3 formats différents de bannière pour que le contenu soit visible des participants. Vous trouverez ci-dessous les gabarits exacts utilisables directement sur vos éditeurs d'éléments graphiques :

• Bannière format Desktop : gabarit-desktop.psd - photo_size_select_large 2500x700 pixels
• Bannière format Tablette : gabarit-tablet.psd - photo_size_select_large 992x700 pixels
• Bannière format Mobile : gabarit-mobile.psd - photo_size_select_large 768x700 pixels

Attention, ces 3 formats de bannière sont chacun composés de 2 parties. En effet, tous les écrans d’ordinateur n’ont pas la même résolution. Chaque gabarit comprend donc :

• La Safe zone qui doit comprendre les éléments les plus importants car elle est la seule zone visible par tous les écrans. Elle doit comprendre le texte, le logo, l’élément graphique principal.
• L’Extra zone qui doit contenir les éléments graphiques secondaires visant à habiller la bannière, et qui n’est visible que sur les grands écrans. C'est pourquoi elle ne doit pas rester complètement vide.

Exemple d'utilisation pour un challenge :

Voici la bannière finale créée pour un challenge. Nous pouvons voir que le logo et les éléments principaux sont placés au centre, dans la safe zone, symbolisée en bleu foncé sur le schéma ci-dessous. Les côtés et les éléments d'arrière-plan ne contiennent aucune information importante et sont placés dans l'extra zone (en bleu clair).

Nous pouvons voir sur les ordinateurs ci-dessous, que l’affichage change selon le format d’écran.

La partie 1 safe zone reste toujours visible, tandis que la partie 2 extra zone n’est visible que sur les grands écrans, et disparaît complètement sur les formats plus petits.

Il est donc très important de mettre les logos, textes et éléments importants uniquement dans la safe zone sous peine de ne pas les voir sur les petits écrans.

Il en est de même pour la visualisation de la bannière sur une tablette : 

...et pour les versions pour mobile :

Animer la bannière du challenge

Il est possible d’animer la bannière d’un challenge sur desktop en le remplaçant par une vidéo Youtube. Vous pouvez voir un exemple de vidéo sur ce lien

Attention, plusieurs points sont à prendre en considération :

• Il faut tout de même créer les 3 bannières fixes présentés ci-dessus.
  • La bannière tablette et la bannière mobile ne seront pas remplacées par la vidéo et resteront fixes ceci dans le but de ne pas forcer la consommation de data des utilisateurs.
  • La bannière desktop sera chargée en premier en attendant le chargement de la vidéo. Si la vidéo ne se lance pas, cela permet d’avoir une image de remplacement.
• La vidéo doit impérativement être hébergée sur Youtube et pas sur un autre hébergeur de vidéo.
• Le format du plugin youtube que nous utilisons impose d'avoir des bandes noires sur certaines tailles d'écran pour adapter la vidéo correctement. Sur la plupart des écrans standards, la vidéo est bien en plein écran.
• La qualité de la vidéo se charge automatiquement selon le débit de l'utilisateur. Un utilisateur avec une faible connexion à internet pourra donc se retrouver avec une qualité de vidéo assez basse.