Responsive tasarım, web sayfasının ekran genişliği ve kullanım koşuluna göre düzenlenmesidir. Kontrol yalnız sayfayı küçültmekle tamamlanmaz: menü, uzun metin, form, tablo ve telefon klavyesi birlikte denenmelidir. Dikey görünümde çalışan bir sayfa, telefon yataya çevrildiğinde kısa ekran yüksekliği nedeniyle bağlantıları gizleyebilir. Bu yüzden genişlik kadar kullanılabilir yüksekliği de inceleyin.

Kontrole ana sayfadan daha geniş bakın

En uzun hizmet başlığını, yoğun ürün kategorisini ve iletişim formunu seçin. Büyük fotoğrafların metni itmesi, uzun URL’lerin yatay kaydırma üretmesi veya kartların tek sütuna yanlış geçmesi bu sayfalarda ortaya çıkar. Sayfanın yatay kaydırılmaması olumlu bir işarettir; fakat taşan içeriğin gizlenerek kesilmediğini de kontrol edin. Sürüklenen kart şeridi ile bütün sayfanın taşmasını birbirinden ayırın.

  • Uzun başlık ve içerik
  • Tablo, kart şeridi ve görseller

Dikey ve yatay menüyü ayrı deneyin

Telefonda hizmet menüsünü açın, son bağlantıya ulaşın ve kapatma düğmesini kullanın. Yatay görünümde geniş ekran masaüstü menüsünü tetikleyebilir; ancak ekran yüksekliği menünün tamamına yetmeyebilir. Menü kendi içinde kaydırılabilmeli veya kısa ekrana uygun düzenlenmelidir. Sabit header’ın içerik başlıklarını ve odaklanan alanları örtmediğine bakın. Sadece menünün açılması kullanılabilir olduğunu kanıtlamaz.

  • Menünün son bağlantısına erişim
  • Kapatma ve geri dönüş davranışı

Formda klavye açıkken ne oluyor?

Ad, telefon ve e-posta alanlarına sırayla odaklanın. Klavye açılınca etkin alanın ve gönderim adımının erişilebilir kalması gerekir. Uygun alan türü, açıklayıcı etiket ve anlaşılır hata metni doldurmayı kolaylaştırır. Yalnız bilgisayar tarayıcısındaki cihaz önizlemesiyle yetinmeyin; gerçek telefonda Safari veya kullanılan tarayıcıyı deneyin. Adres çubuğunun açılıp kapanması da kullanılabilir alanı değiştirebilir.

  • Telefon ve e-posta klavyesi
  • Hata, yüklenme ve başarı durumu

Uygulamaya geçmeden önce

Telefonu yataya çevirdiğinizde masaüstü menüsünün açılması normal olabilir; fakat son bağlantıya ulaşılamıyorsa yerleşim tamamlanmamıştır. Ekran genişliğine ek olarak menünün görünür yüksekliğini ve kaydırma davranışını kontrol edin.

Ölçüm ile görsel incelemeyi birleştirin

Kontrol sonucunu cihaz, yön, sayfa ve sorunla birlikte kaydedin. Ekran görüntüsü hatayı anlatır; yeniden uygulanan işlem ise düzeldiğini gösterir. Yükleme, etkileşim ve yerleşim kaymalarını performans ölçümleriyle ayrıca değerlendirin. Puan yükselse bile kullanıcı menüye veya forma ulaşamıyorsa iş tamamlanmış sayılmaz. Önceliği temel müşteri yollarına vererek düzeltmeleri sıraya koyun; her küçük farkı aynı önemde görmeyin.

  • Cihaz ve yön bilgisi
  • İşlemin tekrar kontrolü
  • Öncelikli müşteri yolu

Kaynaklar

İŞLETMENİZE UYARLAYALIM

Bir sonraki adımı birlikte belirleyelim.

Hedefinizi ve mevcut durumunuzu paylaşın; ihtiyacınıza uygun kapsamı konuşalım.

Teklif alın →