Mobilde Okunabilirlik: Punto Büyütmenin Sınırı
Mobil okunabilirlik konusunda en çok verilen tavsiye punto büyütmektir. Ekran genişliği sabitken puntoyu büyütmek satır başına düşen karakter sayısını düşürür, yani tavsiyenin kendi içinde bir tavanı var. Kazancın nereden geldiğine bakmak, tavsiyeyi tekrarlamaktan daha faydalı.
Küçük ekranın asıl kısıtı satır uzunluğu
Tipografide yerleşik ölçü, rahat okuma için satır başına 45 ila 75 karakterdir. Mobilde bu aralığa zaten giremezsiniz. 360 CSS piksel genişliğinde bir telefonda, iki yanda 16 pikselden toplam 32 piksel iç boşluk bırakırsanız metne 328 piksel kalır. Tipik bir sans-serif yüzde ortalama karakter genişliği yaklaşık 0,5em olduğuna göre, 16 piksellik gövde metninde karakter başına 8 piksel düşer: satırda kabaca 41 karakter.
Puntoyu 20 piksele çıkarın, karakter başına 10 piksel olur ve satır 33 karaktere iner. Yani "daha büyük yazı daha okunaklıdır" tavsiyesi, belli bir noktadan sonra kendi amacının tersine çalışıyor: göz her satırda daha az kelime alıyor, satır sonu sıçraması sıklaşıyor, uzun metinde bu yorucu hale geliyor. 16 ila 18 piksel bandı çoğu gövde metni için makul bir yer; ötesi başlık ve vurgu işi.
Satır aralığını punto artışından daha güvenilir bir kazanç olarak görüyorum. 1,5 ila 1,6 arası bir satır yüksekliği, satır sonundan bir sonraki satırın başına dönerken gözün kaybolmasını engeller ve satır uzunluğunu hiç bozmaz. Punto büyütmenin bedeli var, aralık açmanın yok.
Cihaz farkı nerede duruyor
Bir dönem mobilde anlama seviyesinin masaüstünden düşük olduğu yaygın kabuldü. Ekranlar büyüdükçe ve kullanım alışkanlığı yerleştikçe bu ayrım kolay metinlerde büyük ölçüde kapandı. Kalan fark, metnin zorluk seviyesiyle ilgili.
Zor bir metinde okuyucunun geri dönüp bir cümleyi tekrar okuması gerekir. Masaüstünde bu bedava sayılır, önceki paragraf hâlâ ekrandadır, göz yukarı kayar ve geri gelir. Mobilde aynı hareket kaydırma gerektirir, kaydırma metnin konumunu değiştirir, okuyucu kaldığı yeri yeniden bulmak zorunda kalır. Mobilde yavaşlamanın kaynağı ekranın küçüklüğünden çok bu geri dönüş maliyetidir.
Buradan çıkan tasarım kararı da net: bir fikrin tamamı tek ekranda bitiyorsa geri dönüş ihtiyacı doğmaz. Uzun paragrafı bölmenin faydası estetik değil, budur.
Yapı, bölümleme ve listenin yeri
Mobilde başlık kullanımı masaüstündekinden farklı bir iş yapar. Masaüstünde başlıklar sayfanın haritasıdır, kullanıcı hepsini birden görür. Mobilde harita yoktur, başlık yalnızca "buradan yeni bir konu başlıyor" sinyali verir. Bu yüzden başlıkların bilgi taşıması gerekir; "Genel Bakış" gibi bir başlık mobilde tamamen boşa gider.
Listeye gelince, çoğu içerikte listeler paragrafın parçalanmış halidir. Cümleler arasında neden-sonuç ilişkisi varsa madde işareti o ilişkiyi siler ve okuyucuya bağlantıyı kendisi kurma işini bırakır. Liste, sırası önemsiz ve birbirinden bağımsız öğeler için doğru araçtır: bir kontrol listesi, bir ayar seçenekleri kümesi, bir malzeme dökümü. Anlatı için değil.
Hangi içerik mobilde gerçekten zorlanır
Finans, sağlık ve teknik dokümantasyon gibi bilgi yoğun metinler mobilde en çok kaybeden gruptur, ama sebebi çoğu zaman metnin kendisi değil, yanında getirdiği öğelerdir. Geniş tablolar yatay kaydırmaya düşer ve satır başlığı kayınca hücrenin anlamı kaybolur. Dipnotlar sayfanın sonundadır, oraya gitmek okumayı kesmek demektir. Kod blokları kaydırılamıyorsa satırlar kırılır ve girinti bozulur.
Tablo için mobilde iyi çalışan yaklaşım, her satırı kendi başlık etiketleriyle birlikte bir karta dönüştürmek. Bunu CSS tarafında çözersiniz, tabloyu ikinci kez yazmaya ya da üçüncü parti bir tablo bileşenine geçmeye gerek yok; işaretlemede th ile td ilişkisi doğruysa hücre etiketlerini oradan üretmek mümkün. Erişilebilirlik açısından da kazançlı, çünkü aynı ilişki ekran okuyucunun tabloyu doğru seslendirmesini sağlayan şey.
Dipnot yerine bağlamın içinde kısa bir parantez, uzun tablo yerine ilk üç sütun ve isteğe bağlı bir detay görünümü, kod bloğu için yatay kaydırılabilir bir kap. Bunlar mobil için ayrı sürüm yazmak değil, aynı içeriği dar ekranda ayakta tutmanın yolu.