ÖZALP DIGITALSTRATEJİ · TASARIM · TEKNOLOJİ
Web tasarımı ↗

Mobil uyumlu site için gerçek cihaz kontrol listesi

Web tasarımı konusunu temsil eden mavi dijital tasarım illüstrasyonu
Web tasarımıİlgili hizmeti incele ↗
Bu yazıda neler var?

Masaüstündeki sayfayı küçültmek, iyi bir mobil deneyim oluşturmaz. Dar ekranda başlıklar, kartlar, menü ve sabit iletişim çubuğu aynı alanı paylaşır. Sorunları görmek için gerçek görevleri telefonda tamamlamak gerekir.

İlk kontrol yatay taşma

Sayfayı sağa sola kaydırabiliyorsanız geniş tablo, sabit genişlikli kart veya uzun bağlantı olabilir. Sorunu yalnızca taşmayı gizleyerek kapatmayın; görünmez kalan içeriği ve tıklanamayan düğmeleri kontrol edin.

Telefonda deneyin

  • Menüyü açın, bir hizmete gidin ve geri dönün.
  • Formu klavye açıkken doldurun.
  • Sabit alt çubuğun son satırları örtmediğini görün.
  • Uzun başlıkları ve geniş ekran görüntülerini inceleyin.

Simetri nasıl korunur?

Kartların iç boşluklarını ortak değerlerden üretin. Yan yana sığmayan seçenekleri tek sütunda düzenleyin. Bir kartın metni uzayınca yanındaki buton yukarıda kalıyorsa kart içinde tutarlı bir dikey düzen kullanın. Ancak metni keserek yapay eşitlik oluşturmayın.

Son kontrol

Yalnızca kendi telefonunuzun ölçüsünü değil, daha dar ve daha geniş ekranları da deneyin. Dokunma hedefleri birbirine çok yakın olmamalı. Başlıkları sırf tek satır yapmak için okunamayacak kadar küçültmeyin; dengeli iki satır çoğu zaman daha iyi bir çözümdür. Testi ekran görüntüsüyle sınırlamayın, bağlantılara gerçekten dokunun.

Testi bir görevle tamamlayın

Telefonu siteyi hiç görmemiş birine verin ve bir hizmet için teklif istemesini söyleyin. Siz açıklama yapmadan işlemi tamamlayabiliyor mu? Duraksadığı yerleri, yanlış dokunduğu düğmeleri ve geri dönmek zorunda kaldığı adımları not edin.

Sonra aynı görevi farklı ekran genişliğinde tekrarlayın. Düzeltmelerin yalnızca görüntüyü değil, işlemin tamamlanmasını iyileştirdiğini kontrol edin. Küçük cihazda çalışan bir düzenin büyük telefonda da dengeli görünmesi gerekir.