Jika anda mempunyai dua website dengan konten sama yang satu dioptimalkan untuk pengguna desktop dan satunya dioptimalkan untuk pengguna gadget, anda tentunya ingin agar pengunjung yang menggunakan smartphone dapat secara otomatis dialihkan dan diarahkan langsung menuju situs atau blog versi mobile anda. Pengakses situs atau blog anda tidak perlu lagi repot pindah ke situs atau blog versie mobile anda secara manual. Apalagi sekarang Google dalam menentukan peringkat di halaman Google Search mensyaratkan semua situs agar mobile friendly.
Secara sederhana pengunjung website yang memakai ponsel termasuk smartphone dapat dialihkan ke website atau blog versie mobile anda dengan javascript sederhana sebagai berikut:
<script type="text/javascript">
if (window.screen.width <= 699) {
document.location.href = "URL_WEBSITE_VERSIE_MOBILE_ANDA";
}
</script>
jika diasumsikan besaran lebar layar ponsel adalah di bawah 700 piksel. Namun script ini tidak mempan untuk mengalihkan iPhone dan/atau iPod. Untuk dua jenis ponsel tersebut gunakan script berikut:
<script language=javascript>
if ((navigator.userAgent.match(iPhone/i)) || (navigator.userAgent.match(iPod))) {
location.replace("http://url_ponsel_anda");
}
</script>
Ada lagi script, yang ini all in one yaitu satu script digunakan untuk mengarahkan segala jenis ponsel dan tablet yang akan masuk website versi desktop menuju website versi ponsel.
Script itu adanya di sini. Di sana ada beberapa file. File yang siap dipakai adalah redirection_mobile.min.js yang sudah di ‘kompres’ (ditandai dengan kata “.min”) sedemikian rupa agar ukuran file menjadi minimal sehingga loading time menjadi sesingkat mungkin.
File ini harus anda upload di suatu directory di bawah directory utama public_html server website versi desktop anda, misalnya saja directory “js”. Kemudian file ini nantinya di impor dengan memanggilnya melalui kode script yang diletakkan di antara tag <head></head>:
<script src="/js/redirection_mobile.js"></script>
Setelah itu, masih di antara tag <head></head>, panggil fungsi utama dari script tersebut dengan kode berikut:
<script>
SA.redirection_mobile ({
});
</script>
Secara default, pengunjung akan dialihkan ke alamat mobile site yang berawalan “m” (misalnya: m.contoh.com). Jika website versi ponsel anda berawalan “mobile” (misalnya: mobile.contoh.com), maka parameter yang digunakan adalah:
<script>
SA.redirection_mobile ({
mobile_prefix : "mobile"
});
</script>
Secara default juga device sejenis tablet seperti iPad, Samsung Tab, Amazon Kindle dan Xoom tidak dialihkan ke situs versi mobile anda. Artinya device jenis ini akan tetap masuk ke website versi desktop anda. Namun jika anda telah merancang web khusus untuk tablet, anda bisa mengalihkan pengunjung dengan menambahkan parameter:
<script>
SA.redirection_mobile ({
mobile_url : "mobile.contoh.com",
tablet_url : "tablet.contoh.com",
});
</script>
maka pengunjung yang memakai ponsel dan smartphone akan dialihkan ke “mobile.contoh.com”, sedangkan mereka yang memakai tablet (iPad, Galaxy Tab, Xoom dan Amazon Kindle) akan dialihkan ke “tablet.contoh.com”. Jika kita tidak mempunyai situs khusus untuk tablet, baris tablet_url : “tablet.contoh.com” bisa dihapus saja.
Jika seorang pengunjung datang dari Google dan misalnya ingin menuju ke “www.contoh.com/halaman_1”, maka kita dapat mengalihkan pengunjung tersebut ke “mobile.contoh.com/halaman_1” dengan memakai parameter berikut:
<script>
SA.redirection_mobile ({
mobile_prefix : "mobile",
keep_path : true,
keep_query : true
});
</script>
Pengunjung yang sudah dialihkan ke versi mobile masih bisa ke mengunjungi web versi desktop tentunya jika anda menyediakan link menuju ke sana yang anda letakkan di setiap halaman situs versi mobile anda, tanpa akan dialihkan lagi.
Selengkapnya anda bisa mendapatkan informasi di situs resmi penulis script ini di link yang telah saya sertakan di atas, dan jika ada yang belum dimengerti silahkan tanya ke blog penulisnya di sini, jangan ke saya. Dulu saya juga tanya-tanya di situ.
N.B. Script ini saya aplikasikan di situs saya lainnya indoresep, tidak di blog ini. Dan berikut potongan contoh laporan visitor/pengunjung yang dialihkan dari situs desktop ke situs mobile:
Keterangan:
Seperti dapat dilihat, seorang pengunjung memakai iPhone dengan resolusi layar 320X480 piksel akan masuk ke situs desktop (www.indoresep.web.id/sambal_soto.html) yang secara otomatis langsung diarahkan menuju situs versi mobile (m.indoresep.web.id/sambal_soto.html) dengan konten yang sama yaitu resep sambal soto.
Sebaliknya, untuk antisipasi agar pc desktop, netbook dan tablet yang notabene mempunyai layar dengan resolusi tinggi, maka saya mencegatnya dengan script sederhana yang diletakkan di bagian tag <head> di situs yang versi mobile, yaitu :
<script type="text/javascript" language="javascript">
if (window.screen.width >= 700) {
document.location.href = "http://www.indoresep.web.id" + document.location.pathname;
}
</script>
Dengan script ini maka system dengan resolusi lebar layar minimal 700 piksel ke atas, akan dialihkan ke website versi desktop dan diarahkan ke halaman dengan konten yang ingin dikunjungi.
Hal ini saya lakukan karena bisa saja seseorang yang memakai pc desktop saat mencari informasi melalui search engine menemukan website versi mobile saya dan mengklik link yang ada di situ. Sehingga pc desktop ini tidak akan nyelonong ke situs versi ponsel. Sejauh ini mujarab termasuk untuk mengalihkan jenis tablet.
Penggunaan Plugin dan Tema WordPress
Bagi anda pengguna wordpress yang tidak ingin mempunyai situs versi desktop dan versie mobile secara terpisah, anda bisa memanfaatkan plugin dan theme wordpress yang mobile friendly yang sudah banyak tersedia. Seperti yang dipakai di blog ini, saya memakai kombinasi plugin Any Mobile Theme Switcher dan dua tema wordpress yaitu tema versie desktop Simplenotes dan tema versie mobile MobileTheme. Plugin ini kerjanya secara otomatis akan mendeteksi perangkat yang digunakan pengakses blog ini, jika menggunakan personal komputer maka akan diteruskan ke tema versie desktop dan jika menggunakan gadget maka akan dialihkan ke tema versie mobile.
Pengujian
Untuk menguji apakah situs atau blog anda sudah mobile-friendly atau belum menurut Google, anda bisa melakukan pengujian di tool Mobile Friendly Test milik Google ini.
Kok saya masih bingung ya peletakkan kodenya
makasih infonya gan