Di tulisan sebelumnya, kita sudah melihat bagaimana gambaran kasar sebuah desain responsif. Selanjutnya, pada tulisan ini akan serius membahas mengenai kompatibilitas web browser terhadap website yang telah dibuat.
Dengan membuat desain responsif, artinya kita ingin website ini dapat diakses dengan normal di browser manamun. Akan tetapi, kadang kala ada banyak hal di luar keinginan terjadi. Kasus ini mulai terjadi ketika diuji-cobakan pada perangkat browser mobile.
Jika tampilan web dapat berubah menyesuaikan diri ketika browser di-resize, itu masih belum cukup. Dukungan browser terhadap aspek-aspek website jangan sampai dilalaikan. Berikut adalah beberapa catatan yang dapat dijadikan sebagai acuan ketika mendesain web responsif.
1. Web browser mobile
Di antara beberapa jenis mobile web browser, sepertinya banyak pengguna menyukai browser dengan fitur proxy, seperti Opera mini dan UCBrowser. Hati-hati, beberapa aspek yang terlihat umum di web browser komputer seringkali tidak didukung dengan baik pada web browser mobile seperti ini. Beberapa contoh diantaranya adalah properti shadow, gradient-fill,border-radius. Properti ini ternyata tidak didukung pada Opera mini. Selain itu, list-style:none juga tidak bekerja ketika menggunakan web browser yang agak jadul.
Oleh karena itu semua, sebaiknya dekorasi dan estetika dibuat dengan tag HTML dan properti CSS umum yang banyak didukung oleh banyak web browser; tidak perlu muluk-muluk.
2. Javascript
Beberapa web browser mobile tidak mendukung javascript sepenuhnya. Opera mini sebagai salah satu web browser mobile yang banyak dipakai, perlu dipelajari. Yang harus diketahui adalah Opera mini menjalankan javascript melalui server-side, terkadang javascript tidak dapat berjalan dengan baik. Untuk itu, penggunaan javascript sebaiknya dikurangi, dan dicarikan alternatif lain.
3. Penting untuk memisahkan 2 elemen yang berdampingan saat berada dalam tampilan mobile
Ukuran lebar screen browser mobile terbatas, jadi ketika web menghadapi tampilan sepeti ini, ia harus dapat memecah element berdampingan yang kita buat float pada tutorial sebelumnya. Caranya adalah dengan rule @media pada CSS.
@media screen and (max-width: 500px) {
.content-left{
width:100%;
}
.content-right{
width:100%;
}
}
@media screen and (min-width: 501px) {
.content-left{
width:50%;
}
.content-right{
width:50%;
}
}
.content-left{
height:200px;
background:#DDD;
float:left;
box-sizing:border-box;
}
.content-right{
height:200px;
background:#AAA;
float:left;
box-sizing:border-box;
}
4. Atur juga susunan konten
Jika website anda memiliki 3 kolom konten atau bahkan lebih, jangan terlalu banyak memberikan konten di bagian sebelah kiri. Apalagi jika diisi banyak iklan. Ketika elemen berdampingan harus dipisah, halaman yang tampil paling atas adalah dari kolom paling kiri. Jangan sampai pengunjung awam mengira bahwa ia sedang salah klik, karena melihat konten kurang relevan di bagian paling atas.
5. Sebaiknya jangan gunakan menu popup dan jangan daftar iklan popup (opsional)
Ini terkait dengan dukungan browser terhadap javascript. Navigasi menu terkadang kurang optimal dan tidak bekerja dengan baik di tampilan mobile. Sama pula pula iklan popup yang pada umumnya menggunakan javascript. Jangan sampai pengunjung kabur karena iklan-iklan ini.
6. Gunakan gambar seperlunya (opsional)
Tidak semua perangkat mobile memiliki spesifikasi yang cukup untuk mengakses website kita jika kita banyak memasang gambar.
7. Gunakan tipografi font internal daripada webfont
Benar, webfont lebih lengkap dan lebih indah kenampakannya, tapi tidak semua browser mobile mendukung penyertaan webfont dalam kode web anda. Poin ini opsional. Jika terpaksa harus demikian, maka sertakanlah opsi nama font lain di CSS anda.
Yap, itu dia poin-poin penting yang perlu kalian perhatikan dalam membuat desain web responsif. Dari semua poin di atas, inti pokoknya sama; menjaga kenyamanan pengunjung.
Sekian dulu tulisan dari saya. Semoga bermanfaat.
0 comments