Aujourd’hui un grand nombre de sites internet sont soit créés spécifiquement, soit adaptés pour l’affichage sur smartphones et ou tablettes. Et la question se pose pour un grand nombre d’entre nous : comment monétiser notre travail ? A l’heure actuelle nous sommes nombreux à avoir opté pour des formats publicitaires classiques : bannières et / ou interstitiel.

Oui mais comment être sûr que la bannière présentée sera adaptée à l’écran sur lequel elle va être affichée ? On va procéder en deux étapes :

• Un petit travail de création pour créer non pas une bannière, mais 6 pour s’adapter à toutes les situations ;
• La mise en place une feuille de style responsive pour sélectionner le bon fichier en fonction de l’écran.

Les formats standards de la publicité mobile

Oubliez les classiques 468×60 ou 728×90, la publicité pour mobile utilise un ratio 6:1 et les tailles standard sont les suivantes :

• 120×20 : leur poids doit être < 1 ko en gif et < 1,5 ko en gif animé
• 168×28 : leur poids doit être < 2 ko en gif et < 3 ko en gif animé
• 216×36 : leur poids doit être<3 ko en gif et < 4,5 ko en gif animé
• 300×50 : leur poids doit être < 5 ko en gif et < 7.5 ko en gif animé
• 320×53 : leur poids doit être < 10 ko en gif ou gif animé
• 640×107 : leur poids doit être < 15 ko en gif ou en gif animé

Il est aussi possible d’utiliser un ratio 4:1, pour les formats suivants

• 120×30
• 168×42
• 216×54
• 300×75
• 320×80
• 640×160

La différence ne semble pas énorme mais par exemple pour un écran en 320 x 240px, vous perdez 18 pixels d’affichage utile soir plus de 5% de l’écran en utilisant le ratio 4:1 au lieu du 6:1

Prévoir une bannière publicitaire par type d’écran

Il ne s’agit pas ici de créer une bannière en haute résolution et de la redimensionner pour la faire rentrer dans un petit écran, il s’agit de créer une version optimisée pour chaque résolution.

Ainsi, si la bannière de base en 640x107px est celle-ci :

on ne peut pas accepter d’avoir ça en 120×20 : le titre est à peine lisible et la baseline est simplement inutile

Par contre si l’on crée une version spécifique pour chaque résolution, en gérant les dégradations, on peut obtenir un résultat bien plus satisfaisant dans toutes les situations :

Le principe est de prévoir la dégradation qui résulte de la réduction de la bannière et d’adapter images et textes à chaque format, ainsi on perd la baseline en dessous de 300x50px et on abandonne complètement le logo en 120x20px. Même si la bannière n’est pas extraordinaire (pour être poli), elle reste visible dans tous les cas et à aucun moment on n’a l’impression d’avoir une image toute tassée à l’écran

Intégration de notre publicité en responsive design

Maintenant nous sommes prêts à passer à la mise en place de notre publicité, il s’agit d’un simple lien avec une image transparente dont le fond est affiché en css :

Le code html :

<a href="url" target="_blank"><img src="transparent.png" class="publicite" /></a>

Le css correspondant :

@media (max-width: 167px) {
	.publicite { background: url(120x20.png); width:120px; height:20px; }
}
@media (min-width: 168px) and (max-width: 215px) {
	.publicite{ background: url(168x28.png); width:168px; height:28px; }
}
@media (min-width: 216px) and (max-width: 299px) {
	.publicite{ background: url(216x36.png); width:216px; height:36px; }
}
@media (min-width: 300px) and (max-width: 319px) {
	.publicite{ background: url(300x50.png); width:300px; height:50px; }
}
@media (min-width: 320px) and (max-width: 639px) {
	.publicite{ background: url(320x53.png); width:320px; height:53px; }
}
@media (min-width: 640px) {
	.publicite{ background: url(640x107.png); width:640px; height:107px; }
}

Avec ces quelques lignes le fond et les dimensions de l’image s’adapteront automatiquement au type d’écran qui doit les afficher : PC, tablette, smartphone, et même les changements d’orientation seront pris en compte par la règle @media.

Pour aller plus loin

Vous aurez remarqué que le code est minimaliste, ceci par souci de clarté, mais il est possible d’ajouter des options au media quer, par exemple de spécifier que la publicité ne doit s’afficher que sur des écrans (@media screen) et ne doit pas s’afficher quand on imprime le document (@media print).

Il est aussi possible de regrouper toutes ces images dans un sprite pour gagner un peu de temps de chargement : sur un iphone le code ci-dessus affichera deux images différentes selon que l’on sera au format portrait ou paysage, donc nous devrons charger deux fichiers différents. Si vous arrivez à additionner 6 images de 1ko pour obtenir une seule image de 3ko, le jeu en vaut la chandelle.

Source : Mobile Marketing Association France