Birden fazla cihazda en iyi deneyimi sunmak için duyarlı tasarım yapmanın iyi bir fikir olduğunu biliyoruz. Ancak duyarlı tasarım, erişilebilirlik açısından da avantajlı bir avantajdır.
Udacity gibi bir site düşünün:
Küçük yazıları okumakta zorlanan az gören bir kullanıcı, sayfayı %400'e kadar yakınlaştırabilir. Site duyarlı bir şekilde tasarlandığından kullanıcı arayüzü, "daha küçük görüntü alanı" (aslında daha büyük sayfa) için kendini yeniden düzenler. Bu, ekran büyütme özelliğine ihtiyaç duyan masaüstü kullanıcıları ve mobil ekran okuyucu kullanıcıları için mükemmeldir. Yani, herkes kazanacak. Aynı sayfa %400 büyütülmüş şekilde aşağıda verilmiştir:
Aslında, yalnızca duyarlı bir şekilde tasarlayarak WebAIM kontrol listesinin 1.4.4 numaralı kuralını karşılıyoruz. Bu kurala göre, bir sayfa "… metin boyutu iki katına çıkarıldığında okunaklı ve işlevsel olmalıdır."
Duyarlı tasarımın tümünü incelemek bu kılavuzun kapsamı dışındadır. Ancak duyarlı deneyiminize fayda sağlayacak ve kullanıcılarınızın içeriğinize daha iyi erişmesini sağlayacak birkaç önemli noktayı burada bulabilirsiniz.
Görüntü alanı meta etiketini kullanın
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width ayarı, ekranın cihazdan bağımsız piksel cinsinden genişliğiyle eşleşir ve initial-scale=1 ayarı, CSS pikselleri ile cihazdan bağımsız pikseller arasında 1:1 ilişki oluşturur.
Bu işlem, tarayıcıya içeriğinizi ekran boyutuna sığdırması talimatını verir. Böylece kullanıcılar yalnızca sıkıştırılmış metin görmez.
Daha fazla bilgi için İçeriği görüntü alanına göre boyutlandırma başlıklı makaleyi inceleyin.
Kullanıcıların yakınlaştırma yapmasına izin verme
Yakınlaştırmayı önlemek için görüntü alanı meta etiketini maximum-scale=1 veya user-scaleable=no olarak ayarlayarak kullanabilirsiniz.
Bunu yapmaktan kaçının ve kullanıcılarınızın gerektiğinde yakınlaştırmasına izin verin.
Esneklik göz önünde bulundurularak tasarlama
Belirli ekran boyutlarını hedeflemekten kaçının ve bunun yerine esnek bir ızgara kullanın. İçerik gerektirdiğinde düzende değişiklikler yapın. Yukarıdaki Udacity örneğinde gördüğümüz gibi bu yaklaşım, tasarımın daha küçük bir ekrandan mı yoksa daha yüksek bir yakınlaştırma düzeyinden mi kaynaklandığına bakılmaksızın azaltılmış alana yanıt vermesini sağlar.
Bu teknikler hakkında daha fazla bilgiyi Duyarlı web tasarımı ile ilgili temel bilgiler makalesinde bulabilirsiniz.
Metin için göreli birimler kullanma
Esnek tablonuzdan en iyi şekilde yararlanmak için metin boyutu gibi öğelerde piksel değerleri yerine em veya rem gibi göreli birimler kullanın. Bazı tarayıcılar metnin yeniden boyutlandırılmasını yalnızca kullanıcı tercihlerinde destekler. Metin için piksel değeri kullanıyorsanız bu ayar kopyanızı etkilemez. Ancak, her yerde göreli birimler kullandıysanız site kopyası, kullanıcının tercihini yansıtacak şekilde güncellenir.
Bu sayede, kullanıcı yakınlaştırdığında sitenin tamamı yeniden akacak ve sitenizi kullanırken ihtiyaç duydukları okuma deneyimini elde edecekler.
Görsel görünümün kaynak siparişle bağlantısını kesmeyin
Klavyeyle sitenizde sekme tuşunu kullanan bir ziyaretçi, HTML belgesindeki içeriğin sırasını takip eder. Flexbox ve Grid gibi modern düzen yöntemleri kullanılırken görsel oluşturmanın kaynak sırayla eşleşmemesini sağlamak kolaydır. Bu, klavyeyi kullanarak gezinen kullanıcılar için sayfanın etrafında rahatsız edici sıçramalara neden olabilir.
Sekme tuşuyla içerikte gezinerek tasarımınızı her kesme noktasında test ettiğinizden emin olun. Sayfadaki akış hâlâ mantıklı mı?
Kaynak ve görsel ekran bağlantısının kesilmesi hakkında daha fazla bilgi edinin.
Mekansal ipuçlarına dikkat edin
Mikro metin yazarken bir öğenin sayfadaki yerini belirten dillerden kaçının. Örneğin, gezinme ekranın üst kısmındayken mobil sürümde "solunuzda" gezinme hakkında bilgi vermek anlamsızdır.
Dokunma hedeflerinin dokunmatik ekranlı cihazlarda yeterince büyük olduğundan emin olun
Dokunmatik ekranlı cihazlarda, dokunma hedeflerinizin diğer bağlantılara dokunmadan kolayca etkinleştirilebilecek kadar büyük olduğundan emin olun. Dokunulabilir öğeler için ideal boyut 48 pikseldir. Dokunma hedefleri hakkında daha fazla bilgi edinin.