Saat desain Anda ditampilkan di perangkat seluler, Anda harus memastikan bahwa elemen interaktif seperti tombol atau link cukup besar, dan memiliki cukup ruang di sekitarnya, agar mudah ditekan tanpa secara tidak sengaja tumpang-tindih dengan elemen lain. Hal ini bermanfaat bagi semua pengguna, tetapi sangat membantu bagi siapa saja yang memiliki gangguan motorik.
Ukuran target sentuh minimum yang disarankan adalah sekitar 48 piksel yang tidak bergantung pada perangkat di situs dengan tampilan yang terlihat untuk seluler telah disetel dengan benar. Misalnya, meskipun ikon mungkin hanya memiliki lebar dan tinggi 24 piksel, Anda dapat menggunakan padding tambahan untuk meningkatkan ukuran target ketuk hingga 48 piksel. Area berukuran 48x48 piksel sama dengan sekitar 9 mm, yaitu kira-kira seukuran luas sidik jari seseorang.
Dalam demo, saya telah 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 akan menyentuh target ketuk yang lain tanpa sengaja.
Menguji target sentuh
Jika target Anda adalah teks dan Anda telah menggunakan nilai relatif seperti em atau rem untuk menyesuaikan ukuran teks dan padding,
Anda dapat menggunakan DevTools untuk memeriksa apakah nilai yang dihitung dari area tersebut cukup besar.
Pada contoh di bawah, saya menggunakan em untuk teks dan padding.
Periksa a link,
dan di Chrome DevTools, beralihlah ke panel Computed tempat Anda dapat memeriksa berbagai bagian kotak
dan melihat ukuran piksel yang di-resolve.
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
Daripada hanya menguji dimensi area pandang, lalu menebak bahwa dimensi kecil kemungkinan adalah ponsel atau tablet, yang pada akhirnya menggunakan layar sentuh, kini ada cara yang lebih andal 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 input yang saat ini terdeteksi adalah layar sentuh (any-pointer).
Fitur pointer dan any-pointer akan menampilkan fine atau coarse.
Pengguna pointer presisi adalah seseorang yang menggunakan mouse atau trackpad,
meskipun mouse tersebut terhubung melalui Bluetooth ke ponsel.
Pointer coarse menunjukkan layar sentuh,
yang bisa berupa perangkat seluler, tetapi juga bisa 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 tersebut berupa ponsel maupun perangkat yang lebih besar.
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
Anda dapat mengetahui lebih lanjut fitur media interaksi seperti pointer di artikel Dasar-dasar desain web responsif.