Seite auswählen

Responsive Webdesign ist im heutigen Zeitalter rund um Smartphones, Tablets usw. schon etwas sehr hilfreiches. Durch Responsive Webdesign versucht ein Webdesigner/-programmierer sein Projekt auf so vielen Medien wie möglich in bestmöglicher Auflösung und Übersicht zu präsentieren. Wie genau so etwas aussehen kann, könnt ihr ja anhand meiner Seite testen. Verändert doch einfach die Größe eures Browserfensters oder ruft meine Seite in eurem Smartphone/Tablet auf. Gelöst wird das Ganze mittels CSS und Media Queries.

Wer sich schon damit beschäftigt hat, wird wissen, dass man anfangs schnell erste Erfolge feiert. Doch langsam aber sicher kommen dann kleine und größere Steine, die sich einem in den Weg legen. Egal ob es sich um die Anzeige von Bildern, Videos oder – der Grund unseres Artikels – Google Adsense Werbung dreht. Es ist teilweise schon etwas knifflig.

Google hat da nämlich so seine Einschränkungen:

  1. Es dürfen nur 3 Anzeigen pro Seite geladen werden
  2. Der Code darf nicht verändert werden
  3. Auf keinen Fall – was die ganze Sache so erschwärt – darf Adsense-Werbung mit display: none; ausgeblendet werden

Um nun aber trotzdem zu einem Responsive-Erfolg zu kommen, gibt es eine Möglichkeit, die auch mit den Anforderungen von Google konform geht.

Adsense Anzeigen für ein Responsive Webdesign anpassen

Mit dem neuen asynchronen Anzeigencode kann man die Größe seiner Anzeige über CSS und optional über Medienanfragen festlegen, damit die Anzeige in die Responsive Website passt.

<style type="text/css">
.adslot_1 { width: 320px; height: 50px; }
@media (min-width:500px)
{.adslot_1 { width: 468px; height: 60px; }}
@media (min-width:800px)
{.adslot_1 { width: 728px; height: 90px; }}
</style>
<script async
src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle adslot_1" style="display:inline-block;" data-ad-client="DEINE CA-PUB-DATEN" data-ad-slot="DEINE DATEN"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Man muss die Größen, die man hier verwendet, aber vorher natürlich bei Google Adsense auch angelegt haben.

Dieser Code ist allerdings nur beim erstmaligen Ladevorgang einer Seite adaptiv. Nachfolgende Änderungen, beispielsweise Änderungen an der Fenstergröße oder der Geräteausrichtung sind nicht adaptiv. Nur wenn man die Seite in der veränderten Größe/Ausrichtung neu lädt, wird die richtige Einschaltung wieder angezeigt.

Das ist der große und vor allem unschöne Haken an der Sache.