Technology

Mengenal 3 Metode Stylesheet untuk Website Versi Mobile

 

Website yang bisa dijalankan di berbagai versi Mobile (web mobile), saat ini merupakan kebutuhan yang penting dan mendesak. Web mobile akan mempermudah mobilitas seseorang dalam mendapatkan informasi ketika berselancar di website anda. Untuk membuatnya, ada beberapa teknik teknik khusus yang harus anda ketahui agar hasilnya nanti lebih optimal:

METODE  SERVER-SIDE & USER AGENT

Salah satu pendekatan untuk menambahkan stylesheet mobile adalah menggunakan pendeteksi agent melalui server-side language (contohnya PHP). Dengan teknik ini, anda bisa mendeteksi perangkat mobile dan penambahan stylesheet mobile atau mengalihkan pengguna ke subdomain khusus mobile, misalnya m.facebook.com. Pendekatan di sisi server ini memiliki beberapa keuntungan: ia menjamin tingkat kompatibilitas tertinggi dan juga mampu memberikan konten yang sesuai untuk pengguna mobile. Kekurangannya adalah ada semakin banyaknya user agent yang bermunculan sehingga kita harus sering melakukan perubahan.

METODE CLIENT-SIDE

Sama seperti namanya, teknik ini tidak menggunakan pendeteksi user agent pada sisi server, melainkan dari sisi client. Yaitu dengan menspesifikasi jenis media dari Stylesheet. Contohnya di bawah ini:

<link rel="stylesheet"href="site.css"media="screen"/>
<link rel="stylesheet"href="mobile.css"media="handheld"/>

Pada contoh di atas, terdapat 2 macam Stylesheet yang berbeda pada deklarasi medianya. Stylesheet sites.css dikhususkan untuk laptop dan desktop. Sedangkan stylesheet mobile.css dikhususkan untuk mobile dengan menambahkan “handheld” pada media.

MEDIA QUERY

Mobile web harus bisa disupport oleh segala jenis platform. Yang menjadi hambatan adalah sewaktu-waktu munculnya perangkat baru yang tidak support. Untuk memenuhi kebutuhan tersebut, kita bisa menggunakan teknik media query. Yaitu sebuah teknik yang mengharuskan agent mendeteksi lebar layar perangkat terlebih dahulu. Misalnya kita akan menargetkan layar 480px atau yang lebih kecil:

<link rel="stylesheet" href="mobile.css" media="only screen and (max-device width:480px)"/>

Bagaimana berbagai browser dan jenis media  bereaksi terhadap CSS

CSS stylesheet Browser
Hanya membaca Type “handheld” OpenWave browser, Nokia lite-web browsers, Netfront (configuration dependent), Digia, BlackBerry browser, Opera Mini until v4, Opera Mobile until v9
Membaca Type “handheld” dan “screen” Palm’s Blazer, Nokia S40 browser, IEMobile 6.x and 8.x
Membaca Type “Screen” dengan Media Query iPhone’s Safari, Opera Mobile starting v9, Opera Mini starting v4
Membaca Type “Screen” tanpa Media Query Nokia S60 browser, Netfront (configuration dependant), Teleqa Q7, IEMobile 7.x

Berikan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *