Web Tasarım

Mobil Uyumlu Web Sitesi İçin 25 Maddelik Kontrol Listesi

Mobil uyum, sayfanın küçük ekrana sığmasından fazlasıdır.

Dizüstü bilgisayar ve grafiklerle verileri değerlendiren kişi
Kampanya ve ölçüm planlama · temsili görsel

Mobil uyum, sayfanın küçük ekrana sığmasından fazlasıdır. Ziyaretçinin hizmeti anlaması, menüyü kullanması, formu doldurması ve sonucu görmesi gerekir. Aşağıdaki 25 kontrolü gerçek içerikle uygulayın; her madde için geçti, kaldı veya uygulanmıyor kaydı tutun.

25 maddelik uygulama listesi

  1. 360 piksel genişlikte yatay kaydırma oluşmadığını kontrol edin.
  2. 390 piksel genişlikte ana başlığın ve temel teklifin kesilmediğini doğrulayın.
  3. 768 piksel genişlikte menü ile içerik yerleşiminin çakışmadığını kontrol edin.
  4. Telefonun yatay yönünde temel görevleri yeniden deneyin.
  5. Metni büyüttüğünüzde düğme ve alan etiketlerinin kaybolmadığını sınayın.
  6. Ana menüyü dokunarak açıp kapatın; sayfa arkasına yanlış dokunma olmamalıdır.
  7. Menü açıkken klavye odağının menü içinde kaldığını kontrol edin.
  8. Escape ile kapanan menünün odağı açma düğmesine döndürdüğünü doğrulayın.
  9. Bütün etkileşimlerde görünür klavye odağı bulunduğunu kontrol edin.
  10. Komşu bağlantı ve düğmelere yanlışlıkla basılmadığını gerçek parmakla deneyin.
  11. Telefon bağlantısının doğru numarayı açtığını kontrol edin; arama yapmanız gerekmez.
  12. WhatsApp bağlantısında doğru hesap ve mesaj bağlamının açıldığını kontrol edin; test için mesaj göndermeyin.
  13. Her form alanının görünür ve doğru ilişkilendirilmiş etiketi olduğunu doğrulayın.
  14. E-posta alanında e-posta klavyesinin açıldığını gerçek cihazda kontrol edin.
  15. Telefon alanına harf ve aşırı kısa numara yazıp hatayı sınayın.
  16. Web adresi alanında geçersiz adresin reddedildiğini kontrol edin.
  17. Form hatasının yalnızca renkle değil açıklayıcı metinle gösterildiğini doğrulayın.
  18. Hata sonrasında daha önce yazılan bilgilerin korunduğunu kontrol edin.
  19. Ekran klavyesi açıkken gönder düğmesine ulaşılabildiğini sınayın.
  20. Sabit WhatsApp veya çerez alanının form düğmesini kapatmadığını kontrol edin.
  21. Görsellerin oranının korunmasını ve yüklenirken içerik sıçratmamasını inceleyin.
  22. Yavaş ağda ilk ekranın ve ana eylemin kullanılabilir hale gelmesini ölçün.
  23. Tablo, uzun adres ve büyük kelimelerin dar ekrandan taşmadığını kontrol edin.
  24. Onaylı bir test kaydıyla başarı ekranını ve bildirimi doğrulayın.
  25. Aynı temel akışı iOS Safari ve Android Chrome üzerinde fiziksel cihazla tekrarlayın.

Somut örnek

Örnek görev: İlk kez gelen bir kişi belirli bir hizmeti bulur, ilgili formda hizmeti seçili görür, geçerli bilgileri girer ve başarılı gönderimi anlar. Bu görevde yaşadığı engeli yalnızca ekran görüntüsüyle değil, adım ve beklenen sonuçla kaydedin.

Karar ölçütü

Listeyi masaüstünde pencere daraltarak tamamlanmış saymayın. Tarayıcı önizlemesi yerleşimi sınar; ekran klavyesi, dokunma ve cihaz davranışı için fiziksel telefon kontrolünü ayrıca kaydedin.

Selma GülaşıWeb ve SEO editörü · WeAreMedia

Web sitesi mimarisi, arama motoru optimizasyonu ve içerik stratejisi üzerine yazıyor. Teknik konuları karar vericilerin anlayacağı sadelikte anlatmayı önemsiyor.

BİR SONRAKİ ADIM

Sizin için ne yapabiliriz?

İhtiyacınızı konuşalım, birlikte doğru kapsamı belirleyelim.

Projenizi konuşalım