Merebaknya trend gadget dan “mobile-gear”, seperti tablet dan industri smartphone belakangan ini, muncul tantangan baru bagi para web designer. Terus terang, sulit untuk bersaing dengan semua ini, berbagai tren dan perubahan yang juga serentak datang. Misalnya saat menghadapi tantangan ketika website dituntut untuk dapat mendukung teknologi mobile.
Salah satu metode yang umum adalah dengan membagi website menjadi dua versi user-agent: yakni, versi desktop dan versi mobile. Untuk Desktop/pengguna laptop, PC dan lain-lain, tampilan website bisa saja terlihat “normal”. Tentu berbeda bagi user-agent (pengguna ) mobile dan tablet, sudah barang tentu pula mereka akan mendapatkan tampilan yang berbeda. Ini berarti web designer harus mem-present dua versi tampilan website untuk masing-masing user-agent, baik desktop maupun mobile.
Dalam metodologi ini, sebagai bahan pemikiran ada dua alternatif: Pertama pengguna secara otomatis diarahkan sesuai user-agent atau memungkinkan mereka (para user-agent) secara manual untuk memilih versi website yang akan dikunjungi.
Umumnya para web desainer mengacu pada auto-redirect dan memberikan pilihan kepada useruntuk beralih ke versi desktop, apabila mereka ingin.
OK, kita fokus pada auto-redirect untuk merujuk pada artikel ini serta memberikan beberapa opsi guna mewujudkan… bahwasannya ini akan menjadi sebuah solusi (baik secara Mobile maupun Desktop).
JavaScript Lebih Mempermudah
Cara termudah untuk auto-redirect berdasarkan user-agent, adalah dengan manfaatkan fungsi JavaScript yang sederhana pada header HTML. Salah satunya dengan cara mendeteksi ukuran layar (screen resolution). Ukuran layarnya akan menjadi bagus dan compact, karena jika user memiliki layar terkecil sekalipun, secara otomatis kode akan mengarahkan user ke versi mobile sehingga lebih mudah untuk melakukan navigasi. User-agent akan ditentukan melalui perangkat yang mereka gunakan, sesuai perintah HTML lalu dapat dideteksi oleh fungsi JavaScript.
Manfaat mendeteksi user-agent adalah: kita dapat menyesuaikan kebutuhan user baik itu menggunakan Android, iPhone, iPad, dan perangkat lainnya.
Contoh JavaScriptuntu mendeteksi sesuai ukuran layar:
<script type="text/javascript">Lalu script yang berfungsi untuk mendeteksi sesuai user-agent, contohnya seperti ini:
<!--
if (screen.width <= 699) {
document.location = "M.VERSI-MOBILE.com";
}
//-->
</script>
<script type="text/javascript">Dimana cara di atas hanya dapat mendeteksi user-agent tertentu secara definitif, seperti: iPhone dan iPod, sebagai acuan atas user-agent tersebut dapat dipelajari pada User-Agents.org
<!--
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
location.replace("http://M.VERSI-MOBILE.com");
}
-->
</script>
Kelemahan dari penggunaan JavaScript adalah bahwa tidak semua ponsel mendukung fungsi JavaScript, dan si user sendiri bisa saja menonaktifkan JavaScript pada browser mereka. tetapi Ini cukup langka, sehingga praktik yang baik adalah untuk selalu menyertakan link di suatu tempat di website kita (misal di header atau di footer) sehingga pengguna dapat memilih untuk mengakses dari versi mobile atau desktop.
The New CSS @media Method
CSS memiliki metode built-in untuk mendeteksi browser dan mendukung secara otomatis konten yang ditampilkan berdasarkan ukuran jendela browser. Keuntungannya adalah bahwa Anda dapat tetap dengan satu versi saja. Di sisi lain adalah bahwa kita akan memiliki rangkaian CSS yang banyak.
Ponsel dan perangkat tablet biasanya mencari salah satu dari dua CSS@Media – “desktop” dan “mobile”. Karena kita tidak tahu mana yang dibutuhkan oleh user, selayaknya kita musti prepare atas keduanya:
<link rel="stylesheet" href="screen.css" media="screen"/>Sekali lagi, ini berjalan di header dokumen HTML kita, bahwasanya ini untuk mendeskripsikan dengan jelas kebutuhan user nantinya.
<link rel="stylesheet" href="handheld.css" media="handheld"/>
Kelemahan menggunakan metode CSS@Media adalah bahwa tidak semua perangkat mendukung CSS. Sementara ini kecil kemungkinan untuk saat ini, masih terjadi. Juga, Kita tidak dapat memberikan kepada user cara yang sederhana untuk beralih begitu saja diantara definisi CSS, tanpa menciptakan dua versi website yang berbeda atau lebih.
PHP, ASP dan sejenisnya
Jika kita tidak tertarik pada JavaScript atau CSS, kita masih memiliki PHP, ASP, dan server side scripting serupa, untuk mendeteksi user-agent dan mengarahkannya secara otomatis . Sekali lagi, Kita akan memerlukan banyak daftar User-Agent. Keuntungan dari metodologi ini adalah bahwa kita tidak tergantung pada browser yang harus selalu menjalankan fungsi JavaScript (enabled). Disisi lain adalah bahwa kita perlu beberapa versi website untuk memenuhi kebutuhan user.
PHP sampel terlihat seperti ini:
<? if (Ini contoh kecil mendeteksi user-agent WindowsCE atau Mobile dan untuk mengarahkan user secara otomatis. Terkesan SEDIKIT ribet memang, tetapi terkadang dengan tingkat kesulitan yang tidak SEDIKIT maka sesuatu itu justru akan menjadi terlihat LEBIH 😛
stristr($ua, "Windows CE") or
stristr($ua, "Mobile") ) {
$DEVICE_TYPE="MOBILE";
}
if (isset($DEVICE_TYPE) and $DEVICE_TYPE=="MOBILE") {
$location='YOUR-MOBILE-SITE.com/index.php';
header ('Location: '.$location);
exit;
}
?>
Beginilah hidup…. selalu saja ada persoalan yang muncul, namun demikian, kita ndak boleh berkecil karena “Tidak ada PERSOALAN tanpa JALAN KELUAR …. sekalipun terkadang jalan keluar datangnya berjeda waktu lama dengan dan persoalan yang dihadapi, hanya saja persoalannya adalah SABAR atau tidak….. disamping itu juga terkadang ada faktor TIDAK BISA yang kurang lebih mirip dengan TIDAK MAU… berusaha