Le responsive design tout le monde en parle. Le principe est simple : adapter la mise en page d’un site en fonction du device utilisé par l’internaute (desktop, tablette, smartphone).
Utiliser des publicités Google AdSense sur un site responsif a toujours été un vrai casse-tête pour rester dans les règles d’AdSense : ne pas modifier le code, ne pas masquer les annonces, etc. En effet, afficher une publicité AdSense de 970×90 (appelé « Grand leaderboard ») lorsque le site est vu depuis un smartphone avait pour effet d’exploser la mise en page et le rendu.
Google AdSense a modifié très récemment sa politique d’affichage des annonces et autorise désormais, entre autres choses, l’adaptation des annonces en fonction du device utilisé : « Updates to our ‘Modifying Ad Code’ Policy » :
Responsive design: Enabling publishers to create a single webpage that will adapt to the device on which it’s being viewed, whether it’s a laptop, smartphone or tablet, to maximize user experience.
Par défaut, un code Google AdSense ressemble à ceci :
<script type="text/javascript">
google_ad_client = "ca-pub-1234567890123456";
google_ad_slot = "1234567890";
google_ad_width = 728;
google_ad_height = 90;
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>Désormais, il est possible de créer plusieurs formats d’annonces comme par exemple 728×90, 468×60 et 300×250 puis d’utiliser des conditions if-else en JavaScript pour afficher le bon format adapté à la taille du navigateur.
Exemple de code basique (sans redimensionnement en live) :
<script type="text/javascript">
browserWidth = window.innerWidth;
google_ad_client = "ca-pub-1234567890123456";
if(browserWidth >= 728){
google_ad_slot = "123";
google_ad_width = 728;
google_ad_height = 90;
} else if(browserWidth >= 468){
google_ad_slot = "456";
google_ad_width = 468;
google_ad_height = 60;
} else if(browserWidth >= 300){
google_ad_slot = "789";
google_ad_width = 300;
google_ad_height = 250;
} else{
google_ad_slot = "0";
}
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>Explications :
- Lorsque le navigateur à une largeur de zone de contenu visible supérieure à 728, on affiche le slot 123 au format AdSense 728×90
- Entre 468 et 727 de largeur : on affiche le format 468×60
- Entre 300 et 457 : on affiche le format 300×250
- En dessous de 300 : on n’affiche plus d’annonce