Les outils de promotion ne sont pas tous responive, mais il y a toujours moyen de les intégrer à un site responsive.
Cet article n’est qu’une simple astuce basique : à vous de la compléter et de l’adapter si nécessaire à votre site / intégration. Si vous n’y arrivez pas, n’hésitez pas à faire appel à un commercial 🙂
Cet astuce se prête bien à nos bannières optimisées : Cliquez ici pour découvrir l’outil
1) Placer les promotions :
Le principe est d’avoir une promotion pour les desktop (Voir la classe CSS showDesktop) et une pour les mobiles (Voir la classe CSS showMobile).
|
1 2 3 4 5 6 |
<div class="showDesktop"> Votre pub desktop (Exemple : Une bannière optimisée 468x90) </div> <div class="showMobile"> Votre pub mobile(Exemple : Une bannière optimisée 300x250) </div> |
On pourait même pousser plus loin, en créant des classes intermédiaires pour les tablettes. Mais je garde un exemple simple pour que cette astuce soit claire.
2) Gérer l’affichage en CSS :
Par défaut, c’est la pub desktop qui doit s’afficher.
Le code CSS est le suivant :
|
1 2 3 4 5 6 |
.showDesktop { display: block; } .showMobile { display: none; } |
Mais dans le cas d’un petit écran, il ne faut pas que la grande bannière s’affiche car elle va sortir de l’écran. Dans le cadre de notre bannière 468×60, en comptant une margin de 10px de chaque coté de la bannière, il ne faut pas qu’elle s’affiche si l’écran fait moins de 488 pixels de large.
Voici le code CSS à placer en dessous du précédent :
|
1 2 3 4 5 6 7 8 |
@media only screen and (max-width: 488px) { .showDesktop { display: none; } .showMobile { display: block; } } |
Démonstration : Voir la démonstration
N’hésitez pas à ajouter un alignement au centre (text-align: center;) à l’un des éléments si nécessaire 🙂
Ce simple code va donc gérer à afficher la bonne bannière optimisée en fonction de la résolution de l’écran de l’utilisateur 🙂