Saya ingat perjalanan pertama saya mempelajari responsive web design; saya menggunakan grid biasa, bergulat dengan tata letak fleksibel, dan menangangani media queries
untuk pertama kali. Melebarkan dan mengecilkan jendela browser
menghasilkan tampilan yang memuaskan. Kemudian saya mencobanya di
perangkat mobile. Nampaknya tidak bekerja - saya hanya melihat
versi yang dikecilkan dari desain ukuran penuh. Solusinya, ternyata,
cukup mudah.. Catatan: Tutorial ini pertama kali diterbitkan pada
Februari 2012, namun sering digunakan sebagai rujukan dari
tutorial-tutorial yang lain (serta beberapa hal telah berubah) jadi saya
rasa tutorial ini patut diperbarui.
Inti
Jika anda tidak membaca hal lain pada artikel ini, ambilah satu petunjuk berikut: jika anda mendesain secara fleksibel, gunakan viewport meta tag pada <head>. Secara garis besar, tag tersebut akan mengatur layout lintas-perangkat untuk anda dengan sendirinya.
1
<metaname="viewport"content="initial-scale=1">
Masalah
Mari kita menggunakan satu contoh layout yang telah saya siapkan. Coba lihat; anda akan menjumpai layout tersebut menyusut dan melebar ketika anda mengubah ukuran browser anda. Terdapat juga satu media query yang membuat teks membesar serta memberikan heading warna cerah #ff333e pada layar yang lebih lebar. Lovely.
Berikut tampilannya di OSX Chrome
Dan berikut adalah tampilannya ketika jendela browser dimampatkan.
Sekarang, mari kita lihat tampilannya di ponsel (dalam hal ini, iOS Safari pada iPhone 4):
Hal pertama yang anda perhatikan adalah heading merah; kenyataannya adalah kita tidak melihat penyempitan layout seperti yang kita harapakan. Kita sebenarnya melihat versi yang diperkecil secara visual.
iOS Safari berasumsi bahwa halaman web tersebut memiliki lebar 980px,
kemudian memperkecilnya agar dapat termuat pada lebar keseluruhan yang
tersedia (iPhone 4) yaitu 320px. Hasilnya, konten menjadi kurang dapat
dibaca, kecuali anda memperbesarnya.
Mengapa?
Seperti yang banyak orang katakan, asumsi adalah induk dari segala sesuatu namun hal itulah tepatnya yang browser mobile lakukan jika anda tidak menginstruksikannya secara spesifik. Ketika anda mengunjungi sebuah website melalui browser mobile ia akan berasumsi bahwa anda sedang memandang sebuah desktop ukuran besar dan anda ingin melihat seluruh website, bukan hanya bagian pojok kiri. Karena itu browser akan mengatur lebar viewport pada (dalam kasus iOS Safari) 980px, memaksa semuanya masuk ke dalam display yang kecil.
Viewport Meta Tag
Viewport meta tag diperkenalkan oleh Apple, kemudian diadopsi dan dikembangkan lebih lanjut oleh lainnya. Tag tersebut nampak seperti ini:
1
<metaname="viewport"content="">
Di dalam content="" anda dapat memasukkan beberapa nilai
yang dibatasi koma, namun untuk saat ini kita akan fokus pada hal-hal
yang mendasar terlebih dahulu.
Sebagai contoh, jika desain anda sengaja dirancang pada 320px, anda dapat menentukan lebar viewport menjadi:
1
<metaname="viewport"content="width=320">
Agar layout menjadi fleksibel, cara terpraktis adalah mendasari lebar viewport anda sesuai perangkat, agar lebar layout anda mencocoki dengan lebar perangkat yang anda gunakan.
1
<metaname="viewport"content="width=device-width">
Untuk memastikan bahwa layout anda akan ditampilkan seperti yang anda maksudkan, anda juga dapat mengatur tingkat pembesaran (zoom). Contoh berikut:
1
<metaname="viewport"content="initial-scale=1">
..akan memastikan bahwa ketika terbuka, layout anda akan
ditampilkan dengan baik pada skala 1:1. Tidak ada pembesaran yang
dilakukan. Anda bahkan dapat beranjak lebih jauh dan mencegah pembesaran
yang dilakukan oleh pengguna.
1
<metaname="viewport"content="maximum-scale=1">
Catatan: Sebelum menerapkan parameter maximum-scale,
pertimbangkan apakah anda sungguh harus menghalangi pengguna anda untuk
melakukan pembesaran. Apakah mereka dapat membaca semua isi website
dengan baik?
Menggunakan viewport meta tag dengan cara yang salah dapat menghalangi para pengguna dengan masalah penglihatan mengakses website anda.
Tidak ada komentar:
Posting Komentar