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 :

• Bannière format Desktop : gabarit-desktop.psd - photo_size_select_large 1920x700 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 à 3 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.
• La Main zone qui doit contenir les éléments graphiques secondaires, elle ne sera pas visible sur tous les écrans.
• L’Extra zone qui n’est visible que sur les grands écrans. Néanmoins elle ne doit pas rester complètement vide. Elle peut contenir des éléments graphiques visant à habiller la bannière. (uniquement pour la bannière Desktop)

Exemple d'utilisation pour le Neolidat Challenge :

Voici la bannière final créée pour un challenge fictif Neolidat. Nous pouvons voir que le logo principal est placé au centre, dans la safe zone, symbolisée en rouge sur le schéma ci-dessous. Les carrés de chocolat ainsi que les gouttes de couleurs sont situés autour, dans la main zone et extra zone (en rose et rose 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 3 extra zone n’est visible que sur les très 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 les versions tablette...

...et pour les versions 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.