Kullanıcılara en iyi çoklu cihaz deneyimini sunmak için uyumlu tasarım yapmanın iyi bir fikir olduğunu biliyoruz. duyarlı tasarım erişilebilirliği de kazandırıyor.
Udacity gibi bir site düşünün:
Az gören ve küçük yazıları okuyamayan bir kullanıcı sayfayı yakınlaştırabilir. bu oran %400 olabilir. Site duyarlı şekilde tasarlandığı için kullanıcı arayüzü, "daha küçük görüntü alanı" için kendisini yeniden düzenleyecektir. (Aslında daha büyük sayfada), Bu özellik, ekran büyütmeye ihtiyaç duyan masaüstü kullanıcıları için idealdir. mobil ekran okuyucu kullanıcıları için de geçerlidir. Yani, herkes kazanacak. İşte aynı sayfa %400'e büyütülmüş:
Hatta duyarlı bir şekilde tasarım yaparak WebAIM kontrol listesinin 1.4.4 numaralı kuralına uyuyoruz, Burada, "... metin boyutu iki katına çıktığında bir sayfanın okunabilir ve işlevsel olması gerektiği" belirtiliyor.
Duyarlı tasarımın ele alınması bu kılavuzun kapsamı dışındadır. Ancak duyarlı reklam oluşturma deneyiminize fayda sağlayacak bazı önemli çıkarımlar şöyle: ve kullanıcılarınızın içeriğinize daha iyi erişmesini sağlayabilirsiniz.
Görüntü alanı meta etiketini kullanın
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width politikasının ayarlanması, ekranın genişliği cihazdan bağımsız piksel olarak eşleştirilir.
ve initial-scale=1 politikasının ayarlanması, CSS pikselleri ile cihazdan bağımsız pikseller arasında 1:1 ilişki oluşturur.
Bunu yaptığınızda tarayıcıya, içeriğinizi ekran boyutuna uygun hale getirmesi talimatı verilir
Böylece kullanıcılar kısaltılmış metinlerle karşılaşmaz.
Daha fazla bilgi edinmek için İçeriği görüntü alanına göre boyutlandırma konusuna bakın.
Kullanıcıların yakınlaştırmasına izin ver
Yakınlaştırmayı önlemek için görüntü alanı meta etiketi kullanılabilir.
maximum-scale=1 veya user-scaleable=no ayarlayarak öğrenin.
Bunu yapmaktan kaçının ve gerekirse kullanıcılarınızın yakınlaştırmasına izin verin.
Esnek tasarımla tasarım
Belirli ekran boyutlarını hedeflemekten kaçının. Bunun yerine esnek bir ızgara kullanın. İçerik uygun olduğunda düzende değişiklik yapmaktan kaçının. Yukarıdaki Udacity örneğinde gördüğümüz gibi bu yaklaşım, tasarımın azalan alanın daha küçük ekran mı yoksa daha yüksek yakınlaştırma düzeyinden mi kaynaklandığını gösterir.
Duyarlı web tasarımıyla ilgili temel bilgiler başlıklı makalede bu teknikler hakkında daha fazla bilgi edinebilirsiniz.
Metin için göreli birimler kullan
Esnek ızgaranızdan en iyi şekilde yararlanmak için metin boyutu gibi öğeler için piksel değerleri yerine em veya rem gibi göreli birimler kullanın. Bazı tarayıcılar, metni yalnızca kullanıcı tercihlerinde yeniden boyutlandırmayı destekler. ve metin için bir piksel değeri kullanıyorsanız bu ayar kopyanızı etkilemez. Ancak, proje yaşam döngüsü boyunca site kopyası, kullanıcının tercihini yansıtacak şekilde güncellenir.
Bu, kullanıcı yakınlaştırma yaparken tüm sitenin yeniden düzenlenmesini sağlar. sitenizi kullanmaları için ihtiyaç duydukları okuma deneyimini sağlarlar.
Görsel görünümün kaynak sırasından bağlantısını kesmekten kaçının
Sitenizde klavyeyle gezinen ziyaretçi öğesi, HTML belgesindeki içeriğin sırasına göre sıralanır. Flexbox ve Grid gibi modern düzen yöntemlerini kullanırken görsel oluşturma işleminin, kaynak sırasındaki sıralamayla eşleşmemesi kolaydır. Bu durum, klavyeyi kullanan kişilerin etrafta dolaşması için sayfada garip atlamalara yol açabilir.
İçerikler arasında sekme tuşuna basarak tasarımınızı her ayrılma noktasında test ettiğinizden emin olun. Sayfadaki akış yine de anlamlı mı?
Kaynak ve görsel ekran bağlantısının kesilmesi hakkında daha fazla bilgi edinin.
Uzamsal ipuçlarıyla kendinize iyi bakın
Mikrokopi yazarken sayfadaki bir öğenin konumunu belirten bir dil kullanmaktan kaçının. Örneğin, "solunuzdaki" gezinme mobil sürümde hiçbir anlamı yok dokunun.
Dokunma hedeflerinin dokunmatik ekranlı cihazlarda yeterince büyük olduğundan emin olun
Dokunmatik ekranlı cihazlarda dokunma hedeflerinizin yeterince büyük olduğundan emin olun Böylece diğer bağlantılara dokunmadan kolayca etkinleştirebilirsiniz. Dokunulabilir öğeler için iyi bir boyut 48 pikseldir. dokunma hedefleri hakkında daha fazla bilgi edinin.