Desain web responsif adalah sebuah teknik sederhana namun kuat yang membuat website Anda terlihat baik di semua ukuran layar baik di hp, tablet, desktop maupun TV.
Google juga merekomendasikan penggunaan desain web responsif untuk meningkatkan indeks website karena “desain web responsif membuat konten website di mobile dan komputer hanya berada pada 1 URL”. Tanpa responsif, desainer web perlu membuat tampilan web untuk perangkat mobile yang biasanya alamat situsnya seperti m.kaskus.co.id.
Iklan Google di Website Responsif
Jika Anda sudah menggunakan iklan Google AdSense di website responsif, Anda mungkin sudah menyadarinya, tidak seperti konten Anda, iklan Google punya lebar yang tetap dan iklan tersebut tidak akan mengecil atau membesar berdasarkan ukuran layar.
Misalnya, jika Anda menggunakan iklan berukuran 728 × 90, iklan tersebut akan terlihat lebar melewati layar jika seseorang mengunjungi website Anda pada hp dengan lebar 320 pixel atau memakai tablet dengan resolusi yang lebih rendah.
Iklan Google AdSense tidak responsif secara default tetapi Anda bisa menggunakan sedikit kode JavaScript untuk membuatnya bisa merespon sesuai dengan ukuran layar. Logikanya sangat sederhana. Anda membuat beberapa unit iklan (katakanlah 768×90, 468×60 dan 300×250) dan berdasarkan pada ukuran (lebar) dari perangkat pengguna, ukuran layar tertentu akan menampilkan iklan dengan ukuran tertentu pula.
Berikut ini kode JavaScript-nya:
<script type="text/javascript"> google_ad_client = "ca-publisher-id"; if (window.innerWidth >= 800) { google_ad_slot = "ad-unit-1"; google_ad_width = 728; google_ad_height = 60; } else if (window.innerWidth < 400) { google_ad_slot = "ad-unit-2"; google_ad_width = 300; google_ad_height = 250; } else { google_ad_slot = "ad-unit-3"; google_ad_width = 468; google_ad_height = 60; } </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
Jangan lupa untuk mengganti nilai dari google_ad_client dan google_ad_slot dengan nilai Anda sendiri (Anda bisa dengan mudah menemukan mereka pada kode JavaScript AdSense yang asli).
Dalam kode tersebut yang melakukan semua magic-nya adalah properti window.innerWidth. Properti ini berisi lebar (dalam piksel) dari jendela browser pengguna dan setelah Anda mengetahui nilai tersebut, Anda bisa menggunakan ukuran iklan Adsense yang lebih besar atau yang lebih kecil.
Disarankan Anda menghubungi Google terlebih dahulu apakah ini menyalahkan aturan TOS Adsense atau tidak. Pendapat kami, hal ini tidak menyalahi aturan TOS Adsense karena kita tidak mengubah ukuran iklan atau memodifikasi kode JavaScript. Kita hanya menampilkan unit iklan yang berbeda berdasarkan pada ukuran layar pengunjung.
