Redimensionner ou composer chaque format de bannière

La méthode la plus courte semble évidente : concevoir un pavé de 300 × 250, puis le réduire ou l’étirer jusqu’au 728 × 90 et au 160 × 600. Ce guide explique pourquoi le résultat ne tient pas, et ce que veut dire composer chaque format pour sa propre forme.

Le problème, c’est le ratio

Deux formats de même ratio peuvent se déduire l’un de l’autre, si le texte reste lisible. Deux formats de ratios différents, non. Le ratio compare la largeur à la hauteur : 1,2:1 pour un 300 × 250, 8,09:1 pour un 728 × 90, 0,27:1 pour un 160 × 600, 9:16 pour une story en 1080 × 1920.

Faites le calcul avec un pavé que l’on voudrait transformer en mégabannière.

• À la hauteur du 728 × 90, le pavé est réduit à 36 % de sa taille : il occupe 108 pixels sur 728, et un titre de 24 pixels tombe à moins de 9 pixels. Le reste du bandeau est vide.
• À la largeur du 728 × 90, il est agrandi de 2,43 fois et mesure 607 pixels de haut. Seuls 90 pixels restent visibles, soit moins de 15 % de la création.
• Étiré pour remplir le cadre, il déforme le logo, la photo et chaque lettre.

Aucune de ces trois options ne donne une bannière publiable. Le format n’est pas une version plus grande ou plus petite d’un autre : c’est un autre espace, avec une autre manière de lire.

Cinq formes, cinq manières de lire

Sizewright classe chaque format dans l’une de cinq formes, selon son ratio largeur/hauteur. Chaque forme a sa propre composition, quelle que soit la taille exacte du format.^[1]

Le classement réserve quelques surprises utiles. Le 970 × 250 n’est pas un bandeau mais un paysage : il a la hauteur d’une vraie image à côté du texte. Le 1080 × 1350 du fil Meta reste un carré, et le 300 × 600 est un portrait, pas une colonne.^[1]

Ce qui se déplace dans chaque forme

Composer, c’est décider où va chaque élément selon la place disponible. Voici les règles que suivent les mises en page de Sizewright.

• Bandeau. Une ligne de lecture : logo, titre, bouton. Il n’y a pas de place pour une deuxième ligne de texte, alors le sous-titre est laissé de côté. L’image se réduit à un fragment lisible à la hauteur du bandeau, et le bouton prend sa propre place en fin de ligne.^[2]
• Paysage. Le cadre se partage : l’image d’un côté, le titre et le bouton de l’autre, pour que l’un ne recouvre jamais l’autre. Le sujet de la photo se place du côté opposé au texte.
• Carré. Un empilement dans un ordre clair : titre, image ou offre, bouton, logo. Gardez une marge tout autour, car un petit carré se remplit vite.
• Portrait. L’image dans une moitié, le texte dans l’autre, le bouton en dernier. Le titre a la place de deux ou trois lignes : ne le réduisez pas à une seule.
• Colonne. Logo, titre, image, bouton, dans cet ordre. Le titre se coupe en lignes d’un ou deux mots, et le bouton s’étend sur toute la largeur en pied de colonne pour se lire encore comme un bouton.^[3]

728 × 90

160 × 600

Une taille de texte minimale par format

Une mise à l’échelle fait varier la taille du texte avec celle de la création, pas avec ce que le format peut afficher. Résultat : un titre lisible dans un 300 × 600 devient illisible une fois ramené à la hauteur d’un 320 × 50.

Sizewright fixe donc la taille minimale du texte d’après chaque format : 4 % de son petit côté, et jamais moins de 10 pixels.

Si le texte ne tient pas au-dessus de ce minimum, ce n’est pas la taille qu’il faut réduire, c’est le texte.

Un texte en trois longueurs

Composer par forme suppose d’avoir plusieurs versions du même message. Un concept Sizewright rédige son titre en version courte, moyenne et longue, un sous-titre facultatif dans les mêmes trois longueurs et un texte de bouton court et long. Le moteur prend pour chaque format la version qu’il peut accueillir.^[5]

Dans la campagne Noordkaap ci-dessus, la mégabannière dit « Torréfié cette semaine. », tandis que le 300 × 600 de la même déclinaison dit « Fraîchement torréfié, livré chaque semaine. » et ajoute un sous-titre. Même idée, deux longueurs.

Le texte est mesuré dans un vrai navigateur, jusqu’à dix fois par bannière. Quand il ne tient pas, le moteur prend d’abord le bouton court, puis le sous-titre et le titre plus courts, puis supprime une ligne facultative. Chaque format est en outre rendu dans deux variantes de sa mise en page, et la plus réussie est retenue.^[6]

Ce qu’il faut retenir

1. Un format se définit par son ratio, pas par sa taille.
2. Chaque forme a sa composition : bandeau, paysage, carré, portrait, colonne.
3. Le texte a une taille minimale par format ; quand il ne tient pas, raccourcissez-le.
4. Écrivez chaque élément du texte en plusieurs longueurs avant de composer.

Pour aller plus loin

Les modèles montrent les douze familles de mise en page de Sizewright, chacune composée pour les cinq formes. La page Tous les formats décrit comment une seule idée remplit chaque format du catalogue, et le guide des formats de bannières donne la forme, la zone de sécurité et la taille de texte minimale de chacun.