Saat ini pengguna ponsel yang mengakses internet lebih banyak ketimbang pengguna komputer, hal tersebut terjadi dikarenakan perkembangan ponsel pintar semakin meningkat sehingga mengakses segala website di internet bisa dengan mudah dan sudah layaknya seperti pada komputer.
Begitupula pada website, pemilik situs mulai sekarang tidak boleh memikirkan tampilan untuk desktop saja, tapi juga harus memikirkan tampilan mobile atau seluler supaya mereka bisa betah mengunjungi situsnya dan tidak lekas pergi setelah menemukan apa yang mereka temukan.
Masalahnya bukan dari bagaimana cara membuat tampilan, namun adalah bagaimana caranya mengalihkan perangkat ponsel tersebut supaya masuk secara otomatis ke tampilan seluler. Dan sebenarnya hal tersebut sangat mudah dilakukan dan membutuhkan kode javascript saja.
Baca juga: Cara Membuat Javascript CountDown Timer Dengan Mudah
Mengalihkan Perangkat Ponsel
Melakukan redirect memang bisa dilakukan dengan berbagai cara, tapi untuk saat ini hanya membahas melakukan redirect dengan kode javascript saja sesuai judul. Tapi bukan berarti hanya ada satu kode saja, tapi ada beberapa cara yang memungkinkan pengguna dapat mengalihkan perangkat ponsel secara akurat.
Jadi untuk saat ini hanya ada 3 metode yang akan Saya bagikan. Yang pertama adalah mendeteksi melalui User Agent, yang Saya rasa pengguna harus mengumpulkan jenis perangkat apa saja yang aan dialihkan. Yang kedua adalah mendeteksi melalui lebar ponsel. Dan yang terakhir adalah memakai bantuan modul. Baiklah, mari kita mulai dari yang pertama.
1. Redirect Menggunakan Pendeteksi User-Agent
Cara ini membutuhkan User-Agent yang sangat banyak dari segala perangkat ponsel yang ada di dunia, tapi pengguna bisa menuliskan beberapa dari itu saja. Disini misalnya Saya ingin mengalihkan perangkat iPhone ke tampilan seluler, berikut ini kodenya.
<script>
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
location.replace("http://m.situskamu.tld");
}
</script>
Pengguna bisa menambah parameter OR (||) pada fungsi if diatas dengan User-Agent yang sudah dimiliki. Jadi misalnya ingin menambah sebagian ponsel Nokia, bisa menambah seperti ini (navigator.userAgent.match(/Nokia/i). Jika ini terlalu sulit untuk dilakukan, silakan coba cara kedua.
2. Mendeteksi Ponsel dari Lebar Layar
Apabila memilih-milih User-Agent bukan termasuk kemampuan, maka sebaiknya mengurungkan cara pertama dan mencoba cara yang kedua. Ini cukup sederhana dan bisa mendeteksi sebagian ponsel kecuali perangkat yang memiliki layar yang terlalu lebar. Berikut ini kodenya.
<script type="text/javascript">
if (screen.width <= 720) {
window.location = "http://m.situskamu.tld";
}
</script>
Perhatikan pada angka 720, itu adalah minimal layar yang akan dialihkan ke tampilan seluler. Jadi jika terdapat lebar layar kurang dari itu, maka akan dialihkan secepatnya. Beberapa ponsel sekarang memiliki layar yang besar, contohnya saja tablet. Jadi Saya lebih menyarankan pengguna mengganti angka 720 tersebut menjadi 1081.
3. Menggunakan Bantuan Modul yang Sudah Jadi
Ada 2 modul javascript yang menurut Saya sangat bagus sekali dan 100% akurat dalam mengalihkan perangkat ponsel. Pertama adalah JS Redirection Mobile Site. Dan yang kedua adalah Detect Mobile Browser.
Pada halaman modul pertama, pengguna bisa membaca tutorial cara memakainya dan Saya rasa itu tidak perlu dijabarkan juga disini. Sementara jika modul kedua ini memiliki banyak modul untuk bahasa pemrograman, dan bagian terbaiknya bahwa mereka menyediakan javascript juga.
Jika pengguna menggunakan modul kedua, ketika menekan tombol javascript yang ada disana, secara otomatis akan mengunduh kodenya. Nah kode tersebut cukup tempel pada bagian headtags dan jangan lupa untuk menambah tags script supaya berfungsi. Jangan lupa juga untuk mengubah URL http://detectmobilebrowsers.com/ menjadi URL tampilan seluler pada situs pengguna.
Apakah Masih Bisa Terdeteksi oleh Mesin Pencari?
Ya, tentu saja. Karena mesin pencari semakin lama semakin pintar sehingga kode javascript pun dapat dideteksi dengan sangat baik. Apalagi mesin pencari semacam Google sudah mulai memberlakukan suatu algorima untuk mobile search, sehingga sangat perlu sekali mengoptimisasi tampilan mobile pada website.
Walau kode javascript diatas dapat dipasang pada segala tempat, namun tempat yang paling Saya sarankan adalah dibagian head tags atau contohnya seperti ini.
<head> KODE DISINI </head>
Mengapa hal tersebut diperlukan? Sebab supaya peramban dapat langsung mendeteksi dan mengalihkan saat itu juga tanpa menunggu halaman selesai dimuat, sebab segala peramban pertama kali akan membaca dulu bagian head tags semacam judul dan deksripsi website.
Baca juga: Tehnik Minify untuk Percepat Loading Website
Kesimpulan
Secara keseluruhan, cara yang paling akurat dalam mengalihkan perangkat ponsel melalui kode javascript adalah menggunakan pendeteksi User-Agent. Tapi bukan berarti memakai cara pertama, sebab cara itu dilakukan manual dan sukar untuk banyak orang. Tetapi pakailah cara terakhir, yakni memakai modul.
Selain mudah, memakai modul juga tidak menyita banyak waktu untuk melakukan testing. Intinya setelah memasangnya dibagian head tags, pengguna bisa langsung mencobanya di satu ponsel saja. Jika berfungsi, maka di ponsel lain pun pasti juga akan berfungsi. Apabila ada yang ingin ditanyakan, silakan untuk berkomentar.
Semoga bermanfaat dan Selamat mencoba
