Mobil Uyumluluk: Responsive Düzenin Ötesinde Neye Bakmalı
Bir site, ekranı daralttığınızda sütunları alt alta diziyorsa responsive sayılır. Mobil uyumlu sayılmaz. İkisi arasındaki fark, kullanıcının başparmağıyla doğru düğmeye basıp basamaması kadar somuttur.
Responsive düzen bir başlangıç, sonuç değil
Mobil uyumluluk denince akla ilk gelen şey esnek ızgara ve medya sorguları oluyor. Bunlar gerekli. Ama bir sayfayı dar ekranda okunur yapmakla kullanılabilir yapmak aynı iş değil: düzgün dizilmiş bir formun alanları arasında gezinmek hâlâ zahmetli olabilir, tarih seçici hâlâ masaüstü için yazılmış bir takvim bileşeni olabilir, onay düğmesi klavye açıldığında görüş alanının dışına kayabilir.
Genel tavsiye listeleri tam da burada duruyor. "İçeriği basitleştirin", "hızlı yükleyin" gibi maddeler yanlış değil, ama hiçbir karar verdirmiyor. Karar verdiren şey ölçüdür.
Dokunma hedefi: ölçüsü olan tek madde
"Büyük ve tıklanabilir butonlar kullanın" tavsiyesinin arkasında gerçek sayılar var. WCAG 2.2, AA seviyesinde hedef boyutu için asgari 24×24 CSS pikseli şart koşuyor; AAA seviyesinde bu 44×44. Apple'ın arayüz kılavuzu 44×44 pt, Material Design 48×48 dp diyor.
Bu sayılar birbiriyle çelişmiyor, farklı şeyleri söylüyor. 24 piksel bir alt sınır: altına inerseniz erişilebilirlik denetiminden kalırsınız. 44 veya 48 ise gerçek parmakla rahat kullanım için hedeflenen ölçü. Alt sınırı hedef sanmak sık rastlanan hata (48 dp'yi biraz cömert buluyorum, yine de 24'e yaslanmaktan iyidir). Ölçüyü ikonun kendisinden değil tıklanabilir alandan alın, çünkü padding eklemek ikonu büyütmeden hedefi büyütür.
Ayrı mobil site mi, tek kod tabanı mı
Bu tartışma pratikte kapandı, tek kod tabanı kazandı. Ayrı bir m.site.com tutmak iki şablon, iki içerik akışı ve iki dağıtım süreci demek. Aynı hatayı iki kere düzeltirsiniz, üstelik ikincisini düzeltmeyi unutursunuz.
Buna rağmen eski dünyanın tavsiyeleri listelerde dolaşmaya devam ediyor. En sık rastlananı "mobil kullanıcıyı otomatik olarak mobil versiyona yönlendirin" maddesi. Ortada tek sürüm varsa yönlendirilecek bir yer de yok; bu madde ayrı site kurduğunuzu varsayar, yani birkaç satır yukarıdaki tavsiyenin tam tersini. İkisini aynı listede gördüğünüzde listenin düşünülerek değil derlenerek yazıldığını anlarsınız.
Yavaşlık bağlantıdan çok işlemciden geliyor
Mobil performans genelde bağlantı hızıyla açıklanıyor. Bağlantının payı var, ama orta segment bir Android telefonun tek çekirdek gücü masaüstü bir makinenin belirgin şekilde altında kalıyor ve JavaScript'in ayrıştırılmasıyla çalıştırılması tam olarak orada oluyor. Aynı paketi indirmek bir saniye sürerken çalıştırmak birkaç saniye sürebiliyor.
Sonucu şu: görsel sıkıştırmak ilk adım, ama bir yerden sonra kazanç bitiyor. Asıl kazanç gönderdiğiniz JavaScript miktarını düşürmekte. Kaydırma animasyonu, taşıyıcı bileşeni, üç ayrı analitik betiği. Bunların hiçbiri masaüstünde göze batmaz, ucuz bir telefonda ilk etkileşimi saniyelerce geciktirir.
Cihaz emülatörü düzeni gösterir, kullanımı göstermez
Tarayıcının cihaz modu kaç piksele ne sığdığını doğru söyler. Parmağın ekranın yarısını kapattığını, tek elle tutarken üst köşeye ulaşılamadığını, güneş altında düşük kontrastlı gri metnin okunmadığını söylemez.
En ucuz test şu: kendi sitenizi kendi telefonunuzdan, ayakta ve tek elle kullanmayı deneyin. Gerçekten bir şey yapın, bir form doldurun ya da bir ürün arayıp sepete atın. Takıldığınız yer, hiçbir tavsiye listesinde yazmayan yerdir.