Menggunakan Media Query Untuk Desain Web yang Mobile Friendly

Desain web yang mobile-friendly menjadi tuntutan supaya web-surfer yang mengakses melalui mobile-device bisa merasakan experience yang tidak kalah baiknya dibanding dengan akses melalui komputer. Dengan banyaknya pengguna smart-phone saat ini, maka mobile-friendly design menjadi hal yang wajib hukumnya.

Cara yang umum digunakan adalah dengan membangun website kedua dengan alamat baru, misal: m.contohwebsite.com. Tetapi akan memakan waktu dan infrastruktur lebih besar.

Media types yang diperkenalkan di CSS 2.1 digunakan untuk membedakan bagaimana halaman ditampilkan menurut medianya, screen atau printed. Improvement pada CSS 3 yaitu dengan ditambahkan kemampuan untuk melakukan media query yang memungkinkan browser mengetahui ukuran screen/viewport ketika me-render halaman web.

Kodebiner in web browser mode

Saya pernah membaca artikel tentang desain web yang responsif  yang ditulis oleh Ethan Marcotte, seorang interactive designer dari Happy Cog. Contoh implementasinya bisa dilihat disini. Sangat menarik. Akhirnya saya coba mengimplementasikan pada blog saya.

Kodebiner mobile friendly mode on HTC Magic

Kodebiner mobile friendly mode on Blackberry OS 6

Implementasi

Web browser secara default melakukan rendering apa adanya sesuai dengan desain. Ini berarti tampilan asli akan diperkecil sehingga bisa pas dengan ukuran layar handset yang kecil. Tentu saja menjadi susah dilihat, apalagi dibaca.

Maka, pertama yang harus dilakukan adalah mendefinisikan metadata viewport yang akan digunakan untuk memberikan informasi pada web browser tentang informasi rendering geometry. Parameter width=device-width memberitahu web browser untuk melakukan query lebar viewport yang sedang digunakan. Selain width, besar skala dan flag mode zoom juga bisa diset.
<meta 
name='viewport'
content='width=device-width, 
initial-scale=1.0,
user-scalable=no'
/>
Selanjutnya adalah definisi grup elemen CSS yang digunakan pada lebar viewport tertentu. Statement dibawah ini secara bahasa bisa dituliskan: Gunakan definisi CSS ini pada layar yang memiliki lebar maksimal 600px atau kurang.

@media screen and (max-width: 600px) {
…  
}

Dukungan

Browser Safari 3+, Chrome, Firefox 3.5+, and Opera 7+ sudah mendukung media query. Begitu pula dengan Opera mobile dan mobile Webkit. Sedangkan untuk Internet Explorer, Microsoft akan memasukannya pada versi 9.

Dukungan hardware smart-phone yang beredar saat ini sudah mumpuni, sehingga halaman web yang berukuran besar bisa ditampilkan dengan baik tanpa ada masalah keterbatasan resources.

Makan bandwidth

Implementasi media query membuat ukuran halaman web menjadi lebih besar karena definisi CSS bertambah. Selain itu pada saat ditampilkan di handset, gambar yang digunakan adalah gambar yang berukuran asli tidak di-resize. Jika di-set, gambar bisa di-scaling pada saat di-render.

Jika memang ukuran data menjadi concern utama, maka metode ini tidak sesuai. Selain itu, inilah cara yang sangat mudah untuk menghasilkan tampilan website yang mobile-friendly.

Coba dulu

Sebelum melanjutkan penelusuran di blog ini, mungkin bisa dicoba untuk me-resize lebar window web browser menjadi 600px atau kurang, dan lihat bagaimana halaman ini menyesuaikan diri.