Responsive Web Design to taki sposób projektowania stron internetowych, w którym jedna strona internetowa wygląda dobrze we wszystkich urządzeniach: począwszy od komputerów stacjonarnych i laptopów z bardzo szerokimi ekranami (choćby fullhd 1920×1080), przez tablety i netbooki z ekranami o rozmiarze 1024×600, skończywszy na telefonach komórkowych.
W zależności od rozmiaru ekranu urządzenia strona będzie po prostu sama układać się tak, by wyglądać dobrze.
Czasem wymaga to także zmian rozmiaru reklamy, która jest w danym miejscu emitowana, żeby nie rozsuwała za bardzo innych elementów. Dotyczy to także AdSense. Od niedawna można to zrobić za pomocą niewielkich zmian w kodzie jednostki.
Co do zasady nie wolno zmieniać kodu jednostek AdSense, ale niedawno wprowadzono w regulaminie odpowiedni wyjątek.
Przykładowy kod, który pozwoli zmienić jednostkę AdSense zależnie od szerokości ekranu, wklejam poniżej, na podstawie strony z helpa AdSense.
<script type=”text/javascript”>
google_ad_client = „ca-publisher-id”;
width = document.documentElement.clientWidth;
google_ad_slot = „1234567890”;
google_ad_width = 320;
google_ad_height = 50;
if (width > 500) {
google_ad_slot = „3456789012”;
google_ad_width = 468;
google_ad_height = 60;
}
if (width > 800) {
google_ad_slot = „2345678901”;
google_ad_width = 728;
google_ad_height = 90;
}
</script>
<script type=”text/javascript” src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>
Składnia jest dość prosta: początkowo definiujemy domyślną jednostkę o rozmiarze 320×50. Jeśli szerokość ekranu jest większa, niż 500 pikseli, zmieniamy definicję, by wyświetlać jednostkę 468×60. Jeżeli szerokość jest większa, niż 800 pikseli, zmieniamy definicję ponownie, by pokazała się jednostka 728×90. A potem wywołujemy skrypt.
Na pewno można by to było napisać lepiej. 😉
Jutro to sprawdzę. Wiem że jest kłopot z moimi reklamami na przenośnych.
Proste, a rpzydatne – dzięki!
Coś się zmieniło w responsive jeśli chodzi o reklamy adsense czy nadal trzeba stosować ten skrypt? pozdro.
@chwilówki: w tej chwili są osobne kody do jednostek responsywnych: automatycznie dostosowujące rozmiar, albo bardzo podobne do zaprezentowanych tutaj, w których ręcznie zmienia się wielkość jednostki zależnie od rozdzielczości ekranu.