Update am 13. Dezember 2012 hinsichtlich unserer Programmrichtlinien.

In unserem letzten Blogpost zum Thema Responsive Design sprachen wir darüber, wie wichtig es ist, Websites für Mobilgeräte zu optimieren und zu verstehen, wie Responsive Design in eure diesbezügliche Planung passt. Heute gehen wir einen Schritt weiter und beschreiben, wie sich AdSense-Anzeigen auf einer Responsive Design-Website effektiv einsetzen lassen. Zunächst möchten wir jedoch noch einmal kurz wiederholen, was unter Responsive Design zu verstehen ist.

Responsive Design ist eine Webdesigntechnik, bei der sich die Website an die Eigenschaften des Geräts anpasst, auf dem sie angezeigt wird. Dies kann zum Beispiel ein Laptop, Smartphone oder Tablet sein. Eine mit Responsive Design erstellte Website verändert bei der Darstellung auf unterschiedlichen Geräten automatisch ihre Größe. Welcher Content für den mobilen Nutzer am wichtigsten ist, bestimmt dabei ihr. 



Zusammen mit dem Content lassen sich auch AdSense-Anzeigen mithilfe eines einfachen JavaScript-Snippets an unterschiedliche Bildschirmgrößen anpassen. Um die Vorteile von Responsive Design zu nutzen, erstellt ihr zunächst mehrere Anzeigengrößen, zum Beispiel 728 x 90, 468 x 60 und 300 x 250. Anschließend implementiert ihr ein Snippet mit einer "if-else"-Bedingung, damit jeweils die passende Anzeigengröße für das Gerät des Nutzers geschaltet wird. Hier seht ihr ein Beispiel für einen solchen JavaScript-Code:

<script type="text/javascript">
google_ad_client = "ca-publisher-id";
if  (window. innerWidth  >= 800) {
google_ad_slot = "1234567890";
google_ad_width = 728;
google_ad_height = 90;
} else if  (window.innerWidth < 400) {
google_ad_slot = "2345678901";
google_ad_width = 300;
google_ad_height = 250;
} else {
google_ad_slot = "3456789012";
google_ad_width = 468;
google_ad_height = 60;
}
</script>
<script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Bitte beachtet, dass es, gemäß der AdSense Programmrichtlinien, nicht erlaubt ist, Veränderungen am AdSense-Code vorzunehmen. Dies ist die einzige empfohlene Veränderung des Codes für Responsive Design Websites. Jegliche Änderung, die nicht dem obigen JavaScript-Code entspricht, wird als Verstoß gegen unsere Programmrichtlinien gewertet.

Nähere Einzelheiten zum Responsive Design erfahrt ihr in diesem Blogpost des Google Webmaster-Teams (nur in englischer Sprache verfügbar).  Und auf www.startmobile.de erhaltet ihr weitere Informationen über die Vorteile mobiler Websites, könnt eure Website testen und nach Entwicklern suchen, die euch bei der Erstellung einer für Mobilgeräte optimierten Website behilflich sein können.

Post von Dairine Kennedy, AdSense Mobile Team