Cara Mendeteksi Perangkat Seluler yang Memukul Halaman Web Anda

Selama bertahun-tahun sekarang, para ahli telah mengatakan bahwa lalu lintas ke situs web dari pengunjung di perangkat seluler telah meningkat secara dramatis. Karena alasan ini, banyak perusahaan yang secara cerdas mulai menerapkan strategi seluler untuk kehadiran online mereka, menciptakan pengalaman yang sesuai untuk telepon dan perangkat seluler lainnya.

Setelah Anda menghabiskan waktu untuk mempelajari caranya desain halaman web untuk ponsel, dan menerapkan strategi Anda, Anda juga ingin memastikan bahwa pengunjung situs Anda dapat melihat desain tersebut. Ada banyak cara Anda dapat melakukan ini dan beberapa bekerja lebih baik daripada yang lain. Berikut adalah tampilan metode yang dapat Anda gunakan untuk menerapkan dukungan seluler di situs web Anda - bersama dengan rekomendasi di bagian akhir tentang metode terbaik untuk mencapainya di web saat ini.

Berikan Tautan ke Versi Situs Lain

Sejauh ini, ini adalah metode termudah untuk menangani pengguna ponsel. Daripada mengkhawatirkan apakah mereka dapat atau tidak dapat melihat halaman Anda, cukup letakkan tautan di suatu tempat di dekat bagian atas halaman yang mengarah ke versi seluler terpisah dari situs Anda. Kemudian pembaca dapat memilih sendiri apakah mereka ingin melihat versi seluler atau melanjutkan dengan versi "normal".

instagram viewer

Manfaat dari solusi ini adalah mudah diterapkan. Ini mengharuskan Anda untuk membuat versi yang dioptimalkan untuk seluler dan kemudian menambahkan tautan di suatu tempat di dekat bagian atas halaman situs normal.

Kekurangannya adalah:

  • Anda harus mempertahankan versi situs yang terpisah untuk pengguna seluler. Saat situs Anda semakin besar, Anda mungkin lupa untuk mempertahankan versi kedua itu dan situs Anda bisa tidak sinkron.
  • Apakah Anda juga membuat versi ketiga untuk tablet? Bagaimana dengan versi keempat untuk dapat dipakai? Konsep versi khusus perangkat ini dapat lepas kendali dengan sangat cepat.
  • Anda harus meletakkan tautan jelek di bagian atas halaman yang dapat dilihat oleh pembaca non-seluler (dan mungkin diklik).

Pada akhirnya, pendekatan ini sudah ketinggalan zaman yang tidak mungkin menjadi bagian dari strategi seluler modern. Kadang-kadang digunakan sebagai perbaikan stop-gap sementara solusi yang lebih baik sedang dikembangkan, tapi itu benar-benar bantuan band jangka pendek pada saat ini.

Gunakan JavaScript

Dalam variasi pendekatan yang disebutkan di atas, beberapa pengembang menggunakan beberapa jenis deteksi browser skrip untuk mendeteksi apakah pelanggan menggunakan perangkat seluler dan kemudian mengarahkan mereka ke ponsel terpisah itu situs. Masalah dengan peramban deteksi dan perangkat seluler adalah ada ribuan perangkat seluler di luar sana. Mencoba mendeteksi semuanya dengan satu JavaScript dapat mengubah semua halaman Anda menjadi mimpi buruk pengunduhan - dan Anda masih mengalami banyak kekurangan yang sama seperti pendekatan yang disebutkan di atas.

Gunakan CSS @media Genggam

Perintah CSS @media handheld sepertinya akan menjadi cara yang ideal untuk ditampilkan CSS gaya hanya untuk perangkat genggam — seperti ponsel. Ini sepertinya solusi ideal untuk menampilkan halaman untuk perangkat seluler. Anda menulis satu halaman Web dan kemudian membuat dua lembar gaya. Yang pertama untuk jenis media "layar" menata halaman Anda untuk monitor dan layar komputer. Yang kedua untuk gaya "genggam" halaman Anda untuk perangkat kecil seperti ponsel tersebut. Kedengarannya mudah, tetapi tidak benar-benar berhasil dalam praktiknya.

Keuntungan terbesar dari metode ini adalah Anda tidak perlu memelihara dua versi situs web Anda. Anda hanya mempertahankan satu, dan lembar gaya mendefinisikan bagaimana tampilannya — yang sebenarnya semakin mendekati solusi akhir yang kita inginkan.

Masalah dengan metode ini adalah banyak ponsel tidak mendukung jenis media — mereka malah menampilkan halaman dengan jenis media layar. Dan banyak ponsel dan perangkat genggam yang lebih tua tidak mendukung CSS sama sekali. Pada akhirnya, metode ini tidak dapat diandalkan dan oleh karena itu jarang digunakan untuk mengirimkan versi seluler situs web.

Gunakan PHP, JSP, ASP untuk Mendeteksi Agen-Pengguna

Ini adalah cara yang jauh lebih baik untuk mengarahkan pengguna seluler ke a versi seluler situs web karena tidak bergantung pada bahasa skrip atau CSS yang tidak digunakan perangkat seluler. Sebaliknya, ia menggunakan bahasa sisi server (PHP, ASP, JSP, ColdFusion, dll.) untuk melihat agen pengguna dan kemudian mengubah permintaan HTTP untuk menunjuk ke halaman seluler jika itu adalah perangkat seluler.

Kode PHP sederhana untuk melakukan ini akan terlihat seperti ini:

Masalahnya di sini adalah ada banyak agen pengguna potensial lainnya yang digunakan oleh perangkat seluler. Skrip ini akan menangkap dan mengarahkan banyak dari mereka tetapi tidak semuanya dengan cara apa pun. Dan lebih banyak ditambahkan setiap saat.

Plus, seperti solusi lain di atas, Anda masih harus memelihara situs seluler terpisah untuk pembaca ini! Kelemahan karena harus mengelola dua (atau lebih!) situs web ini adalah alasan yang cukup untuk mencari solusi yang lebih baik.

Gunakan WURFL

Jika Anda masih bertekad untuk mengalihkan pengguna seluler Anda ke situs terpisah, maka WURFL (File Sumber Daya Universal Nirkabel) adalah solusi yang baik. Ini adalah file XML (dan sekarang menjadi file DB) dan berbagai pustaka DBI yang tidak hanya berisi data agen pengguna nirkabel terkini tetapi juga fitur dan kemampuan yang didukung oleh agen pengguna tersebut.

Untuk menggunakan WURFL, Anda mengunduh file konfigurasi XML dan kemudian memilih bahasa Anda dan mengimplementasikan API di situs web Anda. Ada alat untuk menggunakan WURFL dengan Java, PHP, Perl, Ruby, Python, Net, XSLT, dan C++.

Manfaat menggunakan WURFL adalah ada banyak orang yang memperbarui dan menambahkan file konfigurasi setiap saat. Jadi, meskipun file yang Anda gunakan kedaluwarsa hampir sebelum Anda selesai mengunduhnya, kemungkinan besar jika Anda unduh sekali sebulan atau lebih, Anda akan memiliki semua peramban seluler yang biasa digunakan pembaca Anda tanpa apa pun masalah. Kelemahannya, tentu saja, adalah Anda harus terus-menerus mengunduh dan memperbarui ini - semuanya agar Anda dapat mengarahkan pengguna ke situs web kedua dan kekurangan yang ditimbulkannya.

Solusi Terbaik Adalah Desain Responsif

Jadi jika memelihara situs yang berbeda untuk perangkat yang berbeda bukanlah jawabannya, lalu apa? Desain web responsif.

Desain responsif adalah tempat Anda menggunakan kueri media CSS untuk menentukan gaya perangkat dengan berbagai lebar. Desain responsif memungkinkan Anda membuat satu halaman Web untuk pengguna seluler dan non-seluler. Maka Anda tidak perlu khawatir tentang konten apa yang akan ditampilkan di situs seluler atau ingat untuk mentransfer perubahan terbaru ke situs seluler Anda. Plus, setelah Anda menulis CSS, Anda tidak perlu mengunduh sesuatu yang baru.

Desain responsif mungkin tidak berfungsi sempurna pada perangkat dan browser yang sangat lama (kebanyakan saat ini jarang digunakan dan seharusnya tidak terlalu mengkhawatirkan Anda), tetapi karena aditif (menambahkan gaya ke konten, daripada menghilangkan konten) pembaca ini akan tetap dapat membaca situs web Anda, hanya saja tidak akan terlihat ideal di perangkat lama mereka atau peramban.

instagram story viewer