Tasarımınız bir mobil cihazda görüntülendiğinde, düğmeler veya bağlantılar gibi etkileşimli öğelerin, yanlışlıkla başka öğelerle üst üste binmeden kolayca basılabilmesi için etraflarında yeterli alan bulunduğundan emin olmanız gerekir. Bu tüm kullanıcılar için faydalı olmakla birlikte, özellikle motor bozukluğu olan kişiler için faydalıdır.
Uygun şekilde ayarlanmış mobil görüntü alanına sahip bir sitede, önerilen minimum dokunma hedefi boyutu cihazdan bağımsız 48 pikseldir. Örneğin, bir simge yalnızca 24 piksel genişliğe ve yüksekliğe sahip olabilirken, dokunma hedefi boyutunu 48 piksele kadar çıkarmak için ek dolgu kullanabilirsiniz. 48x48 piksellik alan yaklaşık 9 mm'ye karşılık gelir. Bu da yaklaşık olarak kişinin parmak ucu alanının büyüklüğüdür.
Demoda, minimum boyutu karşıladığından emin olmak için tüm bağlantılara dolgu ekledim.
Ayrıca, dokunma hedefleri hem yatay hem de dikey olarak yaklaşık 8 piksel aralıklı yerleştirilmelidir. Böylece, kullanıcının parmağının bir dokunma hedefine bastığında yanlışlıkla başka bir hafifçe vurma hedefine dokunulmayacaktı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 bu alanın hesaplanan değerinin yeterince büyük olup olmadığını kontrol etmek için Geliştirici Araçları'nı kullanabilirsiniz.
Aşağıdaki örnekte metnim ve dolgum için em kullanıyorum.
Bağlantının a bölümünü inceleyin ve Chrome Geliştirici Araçları'nda, kutunun çeşitli parçalarını inceleyebileceğiniz ve hangi piksel boyutuna ulaştıklarını görebileceğiniz Hesaplanan bölmeye geçin.
Firefox Geliştirici Araçları'nda bir Düzen Paneli vardır.
Bu Panelde, incelenen öğenin gerçek boyutunu alırsınız.
Dokunmatik ekran kullanımını algılamak için medya sorgularını kullanma
Sadece görüntü alanı boyutlarını test edip küçük boyutların büyük olasılıkla dokunmatik ekran kullanan telefonlar veya tabletler olabileceğini tahmin etmek yerine, tasarımınızı gerçek cihaz özelliklerine göre uyarlamanın daha güçlü yolları vardır.
Medya sorgularıyla test edebildiğimiz medya özelliklerinden biri, kullanıcının birincil girişinin dokunmatik ekran mı (pointer) olduğu ve o anda algılanan girişlerden 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, Bluetooth aracılığıyla bir telefona bağlı olsa bile, fare veya dokunmatik yüzey kullanan bir kişi hassas işaretçi olarak kabul edilir.
coarse işaretçisi, mobil cihaz olabileceği gibi dizüstü bilgisayar ekranı veya büyük tablet de olabilecek dokunmatik ekranı belirtir.
CSS'nizi bir medya sorgusu içinde dokunma hedefini artırmak için düzenliyorsanız yaklaşık işaretçiyi test ederek tüm dokunmatik ekran kullanıcıları için dokunma hedeflerini artırabilirsiniz. Böylece, cihaz ister telefon ister daha büyük bir cihaz olsun, dokunma alanı daha geniştir.
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
Duyarlı web tasarımıyla ilgili temel bilgiler makalesinde işaretçi gibi etkileşim medyası özellikleri hakkında daha fazla bilgi edinebilirsiniz.