Otto offre de nombreuses possibilités d'animation grâce à ses différents blocs et templates de pages. Ces derniers nécessitent la création de visuels sous différents formats. Ce guide regroupe l'ensemble des formats d'image qui sont utilisés dans Otto, et sert de cahier des charges dans la création graphique pour votre service.
Dans cette dernière partie du guide, on va regarder de près les différentes spécificités techniques pour chaque format d'image. Mais avant de donner ces dernières, il y a un dernier point à comprendre.
Pour chaque format, il n'est pas aussi simple que de donner une seule résolution à créer. Il y a les tailles minimales requises par Otto. En revanche, si votre service est distribué via d'autres canaux, par exemple Amazon Prime qui demande des tailles d'images supérieures à celles d'Otto, vous gagnerez du temps à utiliser les plus grandes tailles pour exporter vos créations. L'outil Otto est équipé d'un script qui prend ce plus grand format - ou format pivot - et le décline pour l'affichage à travers votre service.
Pour chaque format d'image, il y a donc 4 spécificités techniques :
Pour mieux comprendre ces différentes spécificités techniques, vous pouvez vous référer à la première partie de ce guide.
Chaque format de visuel sera illustré par des exemples. Le ratio du format sera indiqué en bleu. Parfois, un format d'image peut changer à travers les différents environnements, dans l'objectif de fournir la meilleure expérience visuelle possible. Lorsque le ratio change, une nouvelle couleur marquera chaque ratio différent.
Poster & Poster XL
Au sein d'Otto, les formats Poster et Poster XL ont le même ratio, simplement de tailles différentes. Il est donc possible d'utiliser 1 même fichier image pour les deux formats.
Vignette & Vignette XL
Au sein d'Otto, les formats Vignette et Vignette XL ont le même ratio, simplement de tailles différentes. Il est donc possible d'utiliser 1 même fichier image pour les deux formats.
Bannière
Le format Bannière s'étend de bord à bord du navigateur. Il apparaît par exemple en haut de la page catalogue, ou encore des pages de sélection & pages métadonnées lorsque le visuel est rattaché à ces derniers.
*Attention, pour optimiser l'affichage sur des petits écrans, le ratio de ce visuel change pour l'environnement Mobile.
Demi-bandeau
Le format Demi-bandeau s'affiche selon les grilles des rangées. Le ratio du Demi-bandeau est commun à travers les différents environnements, et équivaut au ratio de la déclinaison Mobile du format Bannière.
Rond
Le format Rond s'affiche selon les grilles des rangées.
Carrousel & Vidéo
Le format Carrousel est un format particulier car il y existe plusieurs ratios possibles. Vous avez le choix entre 3 hauteurs dans le back-office. Les ratios sont les mêmes pour le bloc Vidéo. Il est donc nécessaire de décider de la hauteur des carrousels sur votre service avant de commencer à faire les visuels.
* Attention, pour optimiser l'affichage sur des petits écrans, le ratio de ce visuel change pour l'environnement Mobile. Il n'y a pas de choix de hauteur pour le Mobile, il s'agit d'un ratio unique.
* Attention, pour optimiser l'affichage sur les téléviseurs, le ratio change pour chacune des 3 hauteurs.
Plein-écran
Le bloc plein-écran est un bloc spécifique de la page de présentation du service. Il peut contenir le logo, plusieurs niveaux de texte, et des boutons, avec un visuel en fond. L'affichage de ce visuel de fond varie en fonction de la taille de la fenêtre du navigateur car ce bloc doit toujours occuper 100% de l'écran.
Pour préparer ce visuel, utilisez un format paysage sur le Desktop - ratio 1,77 (16:9). Attention, son ratio s'adapte sur l'environnement mobile. Préparez donc un format portrait pour le mobile - ratio 0,56 (9:16).
Le bloc plein-écran a une spécificité : le ratio du visuel est conservé mais lorsqu'on tire les bords du navigateur, l'image est rognée. Visualisez plutôt cette animation pour comprendre.
Il est donc conseillé de NE PAS écrire du texte à même le visuel, mais d'utiliser plutôt les champs de texte au sein de l'outil. De cette façon, la disposition du texte s'adaptera en fonction de la taille du navigateur.
VISUELS MARKETING
Vignette Offre Tarifaire
Ce format apparaît sur la page de présentation de votre service pour illustrer les cartes offre. Son ratio est le même que pour la Vignette et la Vignette XL.
Argument
Le bloc Arguments, bloc spécifique à la Page de présentation, utilise également un format rond.
