Heute haben immer mehr Menschen Tablets oder Smartphones und greifen damit auch aufs Internet zu. Der Mobile Traffic ist wohl der Traffic der am meisten wächst. Damit ist es immer wichtiger, dass alle Webseiten auf allen Geräten gleich gut aussieht. Früher musste man dafür extra Mobile Webseiten bauen. Heute aber ist das nicht mehr nötig, wenn man sein Design Responsive aufbaut. Dieses adaptiven Layout passt sich nämlich automatisch an den verschiedenen Bildschirmgrössen der jeweiligen Geräte an. So sieht die Webseite immer schön durchgestylte aus egal ob sie mit einem iPad oder iPhone oder via Computer darauf zugreifen.

Natürlich möchte man auch, dass die Werbung sich an die Geräte anpasst und nicht wie ein “Klotz” aus dem Design raushängt.

Auf T3N bin ich nun auf eine Lösung gestossen, wie man Google Adsense auch Responsive in die Webseite integrieren kann. Und das möchte ich kurz hier erklären.

So sieht normalerweise der Adsense Code aus.

Man kann ihn nur an 1 Grösse definieren. Hat man aber nun ein responsives Design angefertigt, dann hängt die Werbung über das Design oder verzieht das Ganze. Das sieht natürlich dann total doof aus. Mit einer kleinen Javascript Erweiterung kann man das aber anpassen.

Zuerst müsst ihr schauen, dass der CSS Container in dem ihr die Adsense Werbung reinlädt overflow:hidden ist.

div.werbebanner {
overflow:hidden;
}

Danach passt ihr euer Adsense Code so an

google_ad_client = "ca-pub-XXXXXXXXXXXXXXXX";
if (window.innerWidth <= 350) {
// Kleine Anzeige
google_ad_slot = "XXXXXXXXXX";
google_ad_width = 320;
google_ad_height = 50;
} else if (window.innerWidth >= 750) {
// Große Anzeige
google_ad_slot = "XXXXXXXXXX";
google_ad_width = 728;
google_ad_height = 90;
} else {
// Mittelgroße (fallback) Anzeige
google_ad_slot = "XXXXXXXXXX";
google_ad_width = 468;
google_ad_height = 60;
}

In diesem Beispiel erstellen wir drei verschiedene Banner-Größen. Klein (320×50) für mobile Geräte, Medium (468×60) für Tablets und Groß (728×90) für Desktop. Die Werte für google_ad_slot, google_ad_width und google_ad_height ersetzt ihr mit den entsprechenden Werten.

Fertig ist diese kleine Google Adsense Erweiterung.

Viel Spass