Mobil uyumlu (responsive) tasarım, sayfanın ekran genişliğine göre yeniden düzenlenmesidir. Ama asıl mesele küçülmek değil, önceliklerin değişmesidir.
Mobil öncelikli ne demek?
Tasarıma dar ekrandan başlamak, hangi bilginin gerçekten gerekli olduğunu zorunlu kılar. Geniş ekrandan başlayıp küçültmek ise her şeyi sığdırmaya çalışır ve mobilde yorucu bir sayfa üretir.
Mobilde en sık bozulan yerler
- Yatay kaydırma. Genişliği sabit bir tablo ya da görsel sayfayı taşırır.
- Küçük dokunma hedefleri. Bağlantılar birbirine yakın ve küçükse yanlış tıklama artar.
- Sabit katmanlar. Yapışkan menü ve yüzen butonlar içeriği kapatabilir.
- Uzun formlar. Masaüstünde kısa görünen form mobilde bitmek bilmez.
- Yüklenirken zıplayan sayfa. Görselin boyutu yazılmamışsa metin okurken kayar.
Satın alma butonu ne kadar aşağıda?
Ölçülen bir üründe satın alma butonu mobilde 1147 pikseldeydi; kullanıcı bir buçuk ekran boyunca hiçbir satın alma tetikleyicisi görmüyordu. Karar sonrası bilgiler butonun altına alınınca 948 piksele indi.
Mobilde birincil eylem ilk 1000 pikselin içinde olmalı.
Nasıl test edilir?
- Gerçek telefonda açın; tarayıcı simülasyonu her şeyi göstermez.
- Dar bir genişlikte (360 piksel) yatay kaydırma olup olmadığına bakın.
- Tek elle kullanın: başparmakla ulaşılamayan yerler var mı?
- Yavaş bağlantıda açın; ilk görünen şey ne?