Ketika desain Anda ditampilkan pada perangkat seluler, Anda harus memastikan bahwa elemen interaktif seperti tombol atau tautan cukup besar, dan memiliki cukup ruang di sekelilingnya, untuk membuatnya mudah ditekan tanpa secara tidak sengaja tumpang tindih ke elemen lain. Hal ini menguntungkan semua pengguna, tetapi terutama bermanfaat bagi siapa saja yang memiliki gangguan motorik.
Ukuran target sentuh minimum yang direkomendasikan adalah sekitar 48 piksel yang tidak tergantung perangkat di situs dengan area pandang seluler yang telah disetel dengan benar. Misalnya, meskipun ikon mungkin hanya memiliki lebar dan tinggi 24 px, Anda dapat menggunakan padding tambahan untuk meningkatkan ukuran target ketuk hingga 48 px. Area 48x48 piksel sesuai dengan sekitar 9mm, yaitu sebesar area bantalan jari seseorang.
Dalam demo, saya telah menambahkan padding ke semua link untuk memastikan ukuran minimum terpenuhi.
Target sentuh juga harus berjarak sekitar 8 piksel, baik horizontal maupun vertikal, sehingga jari pengguna yang menekan satu target ketuk tidak akan menyentuh target ketuk yang lain secara tidak sengaja.
Menguji target sentuh Anda
Jika target Anda adalah teks dan Anda telah menggunakan nilai relatif seperti em atau rem untuk mengatur ukuran teks dan padding,
Anda dapat menggunakan DevTools untuk memeriksa apakah nilai yang dihitung dari area tersebut cukup besar.
Pada contoh di bawah ini, saya menggunakan em untuk teks dan padding.
Periksa a dari link,
dan di Chrome DevTools, beralihlah ke panel Computed tempat Anda dapat memeriksa berbagai bagian kotak.
dan melihat ukuran piksel yang diselesaikan.
Di Firefox DevTools terdapat Panel Layout.
Di Panel tersebut, Anda mendapatkan ukuran sebenarnya dari elemen yang diperiksa.
Menggunakan kueri media untuk mendeteksi penggunaan layar sentuh
Alih-alih hanya menguji dimensi area pandang, lalu menebak bahwa dimensi kecil kemungkinan adalah ponsel atau tablet, yang pada gilirannya menggunakan layar sentuh, sekarang ada cara yang lebih ampuh untuk beradaptasi desain berdasarkan kemampuan perangkat yang sebenarnya.
Salah satu fitur media yang kini dapat kita uji dengan kueri media
adalah apakah input utama pengguna berupa layar sentuh (pointer) dan
apakah salah satu input yang saat ini terdeteksi adalah layar sentuh (any-pointer).
Fitur pointer dan any-pointer akan menampilkan fine atau coarse.
Penunjuk bagus adalah seseorang
yang menggunakan {i>mouse<i} atau {i>trackpad<i},
bahkan jika {i>mouse<i} itu terhubung
melalui Bluetooth ke ponsel.
Pointer coarse menunjukkan layar sentuh,
yang bisa berupa perangkat seluler tetapi bisa juga
berupa layar laptop atau tablet besar.
Jika Anda menyesuaikan CSS dalam kueri media untuk meningkatkan target sentuh, pengujian untuk pointer kasar memungkinkan Anda meningkatkan target ketuk untuk semua pengguna layar sentuh. Hal ini memberikan area ketuk yang lebih besar, baik perangkat berupa ponsel atau perangkat yang lebih besar.
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
Anda dapat mengetahui lebih lanjut tentang fitur media interaksi seperti {i>pointer<i} dalam artikel Dasar-dasar desain web responsif.