Saat desain ditampilkan di perangkat seluler, Anda harus memastikan bahwa elemen interaktif seperti tombol atau link cukup besar, dan memiliki cukup ruang di sekelilingnya, agar mudah ditekan tanpa tumpang tindih secara tidak sengaja. Hal ini bermanfaat bagi semua pengguna, tetapi sangat membantu bagi siapa saja yang memiliki gangguan motorik.
Ukuran target sentuh minimum yang direkomendasikan adalah sekitar 48 piksel yang tidak tergantung perangkat pada situs dengan area pandang seluler yang ditetapkan dengan benar. Misalnya, meskipun ikon mungkin hanya memiliki lebar dan tinggi 24 piksel, Anda dapat menggunakan padding tambahan untuk memperbesar ukuran target ketuk hingga 48 piksel. Area piksel 48x48 sesuai dengan sekitar 9 mm, yaitu kira-kira sebesar ukuran area bantalan jari seseorang.
Dalam demo, saya menambahkan padding ke semua link untuk memastikannya memenuhi ukuran minimum.
Target sentuh juga harus diberi jarak sekitar 8 piksel, baik secara horizontal maupun vertikal, sehingga jari pengguna yang menekan satu target ketuk tidak menyentuh target ketuk lainnya tanpa sengaja.
Menguji target sentuh Anda
Jika target Anda adalah teks dan Anda telah menggunakan nilai relatif seperti em atau rem untuk mengukur teks dan padding,
Anda dapat menggunakan DevTools untuk memeriksa apakah nilai yang dihitung untuk area tersebut cukup besar.
Dalam contoh di bawah ini, saya menggunakan em untuk teks dan padding saya.
Periksa a link, dan di Chrome DevTools beralih ke panel Computed tempat Anda dapat memeriksa berbagai bagian kotak dan melihat ukuran piksel yang ditetapkan.
Di Firefox DevTools, terdapat Panel Tata Letak.
Dalam Panel tersebut, Anda akan mendapatkan ukuran sebenarnya dari elemen yang diperiksa.
Menggunakan kueri media untuk mendeteksi penggunaan layar sentuh
Daripada hanya menguji dimensi area tampilan, lalu menebak bahwa dimensi kecil kemungkinan adalah ponsel atau tablet, yang kemudian menggunakan layar sentuh, kini ada cara yang lebih efektif untuk menyesuaikan desain Anda berdasarkan kemampuan perangkat yang sebenarnya.
Salah satu fitur media yang kini dapat kita uji dengan kueri media
adalah apakah input utama pengguna adalah layar sentuh (pointer) dan
apakah salah satu dari input yang saat ini terdeteksi adalah layar sentuh (any-pointer).
Fitur pointer dan any-pointer akan menampilkan fine atau coarse.
Pointer yang akurat adalah seseorang yang menggunakan mouse atau trackpad,
meskipun mouse tersebut terhubung melalui Bluetooth ke ponsel.
Pointer coarse menunjukkan layar sentuh,
yang dapat berupa perangkat seluler, tetapi juga dapat berupa layar laptop atau tablet besar.
Jika Anda menyesuaikan CSS dalam kueri media untuk meningkatkan target sentuh, pengujian pointer kasar memungkinkan Anda meningkatkan target ketuk untuk semua pengguna layar sentuh. Hal ini memberikan area ketuk yang lebih besar, baik perangkat berupa ponsel maupun perangkat berukuran lebih besar.
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
Anda dapat mengetahui lebih lanjut fitur media interaksi seperti pointer dalam artikel Dasar-dasar desain web responsif.