Tasarımınız bir mobil cihazda görüntülendiğinde, düğme veya bağlantı gibi etkileşimli öğelerin yeterince büyük olduğundan ve başka öğelerle yanlışlıkla başka öğelerle üst üste binmeden kolayca basılabilmesi için etraflarında yeterli boşluk bulunduğundan emin olmalısınız. Bu özellik tüm kullanıcılar için faydalı olsa da özellikle motor bozukluğu olan kullanıcılar için kullanışlıdır.
Düzgün ayarlanmış bir mobil görüntü alanına sahip bir sitede, önerilen minimum dokunma hedefi boyutu yaklaşık 48 cihazdan bağımsız pikseldir. Örneğin, bir simgenin genişliği ve yüksekliği yalnızca 24 piksel olsa da, dokunma hedefinin boyutunu 48 piksele çıkarmak için ek dolgu kullanabilirsiniz. 48x48 piksel alanı yaklaşık 9 mm'ye karşılık gelir. 9 mm, kullanıcının parmak ucu alanının boyutu kadardır.
Demoda, minimum boyutu karşıladıklarından emin olmak için tüm bağlantılara dolgu ekledim.
Dokunma hedefleri, kullanıcının parmağının bir dokunma hedefine basmasıyla yanlışlıkla başka bir dokunma hedefine dokunmaması için hem yatay hem de dikey olarak yaklaşık 8 piksel aralıklı olmalıdır.
Dokunma hedeflerinizi test etme
Hedefiniz metinse ve metni ve dolguyu boyutlandırmak için em veya rem gibi göreli değerler kullandıysanız söz konusu alanın hesaplanmış değerinin yeterince büyük olup olmadığını kontrol etmek için DevTools'u kullanabilirsiniz.
Aşağıdaki örnekte, metin ve dolgu için em kullanıyorum.
Bağlantının a öğesini inceleyin ve Chrome Geliştirici Araçları'nda Hesaplanmış bölmeye geçin. Burada kutunun çeşitli bölümlerini inceleyebilir ve hangi piksel boyutuna çözüldüklerini görebilirsiniz.
Firefox DevTools'da bir Düzen Paneli bulunur.
Bu panelde, incelenen öğenin gerçek boyutunu görürsünüz.
Dokunmatik ekran kullanımını algılamak için medya sorguları kullanma
Görüntü alanı boyutlarını test edip küçük boyutların büyük olasılıkla dokunmatik ekran kullanan telefonlar veya tabletler olduğunu tahmin etmek yerine, tasarımınızı gerçek cihaz özelliklerine göre uyarlamanın daha güçlü yolları vardır.
Artık medya sorgularıyla test edebileceğimiz medya özelliklerinden biri, kullanıcının birincil girişinin dokunmatik ekran olup olmadığı (pointer) ve şu anda algılanan girişlerin herhangi birinin dokunmatik ekran olup olmadığıdır (any-pointer). pointer ve any-pointer özellikleri fine veya coarse değerini döndürür.
Fare veya dokunmatik yüzey kullanan kişiler, fare Bluetooth üzerinden bir telefona bağlı olsa bile hassas işaretçi olarak kabul edilir.
coarse İşaretçi, dokunmatik ekranı gösterir. Bu ekran bir mobil cihaz olabileceği gibi dizüstü bilgisayar ekranı veya büyük tablet de olabilir.
Dokunma hedefini artırmak için bir medya sorgusunda CSS'nizi ayarlıyorsanız kaba işaretçiyi test etmek, tüm dokunmatik ekran kullanıcıları için dokunma hedeflerini artırmanıza olanak tanır. Bu, cihaz telefon veya daha büyük bir cihaz olsun daha büyük bir dokunma alanı sağlar.
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
İşaretçi gibi etkileşim medya özellikleri hakkında daha fazla bilgiyi Duyarlı web tasarımı ile ilgili temel bilgiler makalesinde bulabilirsiniz.