Mobil Uyumlu Web Tasarımda Nelere Dikkat Edilmeli?

Mobil öncelikli ne demek, neden önemli?

Google bir siteyi değerlendirirken masaüstü sürümüne değil, mobil sürümüne bakıyor (mobil öncelikli dizinleme). Yani mobilde eksik gösterilen bir içerik, arama motoru için de yok sayılıyor. “Mobilde sadeleştirelim” diye kaldırılan metinler, farkında olmadan sıralama gücünü de kaldırıyor.

İkinci nokta ticari: Türkiye’de web trafiğinin büyük bölümü telefondan geliyor. Mobilde bozulan bir form, kaybedilen bir talep demek.

Duyarlı tasarım ile ayrı mobil site arasındaki fark

Bir dönem markalar “m.site.com” şeklinde ayrı bir mobil sürüm tutuyordu. Bu yöntem iki ayrı içerik, iki ayrı bakım ve sürekli yönlendirme sorunu anlamına geldiği için terk edildi. Bugünkü standart, tek adreste ekran genişliğine göre yeniden düzenlenen duyarlı (responsive) tasarım.

Dokunma alanları ve tıklanabilirlik

Fare imleci bir piksel hassasiyetinde, parmak değil. Mobilde en sık karşılaştığımız sorun, birbirine çok yakın yerleştirilmiş bağlantılar ve küçük butonlar. Kullanıcı yanlış yere basıyor, geri dönüyor ve çoğu zaman vazgeçiyor.

• Dokunulabilir her öğe en az 44×44 piksel olmalı
• Yan yana bağlantılar arasında en az 8 piksel boşluk bırakılmalı
• Birincil eylem (teklif al, ara, sepete ekle) ekranın alt yarısında da erişilebilir olmalı
• Telefon numarası ve e-posta tıklanabilir olmalı: tel: ve mailto: bağlantıları
• Yatay kaydırma olmamalı; tablo ve kod blokları kendi içinde kaymalı

Okunabilirlikte yazı boyutu ve satır uzunluğu

Mobilde gövde metni 16 pikselin altına düşmemeli. Daha küçük yazılar tarayıcıda otomatik yakınlaştırmayı tetikliyor ve düzen bozuluyor. Satır yüksekliği 1,5 civarında, paragraf genişliği ise 45–75 karakter arasında olduğunda okuma yorucu olmuyor.

Formlar, mobilde en çok kaybettiren yer

Mobil formlarda alan sayısı doğrudan dönüşümü etkiliyor. Sormak zorunda olmadığınız hiçbir şeyi sormayın; ad, telefon ve kısa bir not çoğu talep için yeterli.

Teknik tarafta ise doğru alan tipini kullanmak klavyeyi otomatik doğru açıyor: telefon alanı için sayısal klavye, e-posta alanı için @ tuşlu klavye. Otomatik doldurmanın çalışması için de alanların adlandırması standartlara uygun olmalı.

1. 1 Alanları azaltın

   Her ek alan tamamlanma oranını düşürüyor. Zorunlu olmayanları kaldırın.

2. 2 Doğru klavyeyi açın

   tel, email ve number alan tipleri mobil klavyeyi ihtiyaca göre değiştiriyor.

3. 3 Hataları anında gösterin

   Gönder tuşuna basıldıktan sonra değil, alandan çıkıldığı anda uyarın.

4. 4 Gönder butonunu görünür tutun

   Klavye açıldığında buton ekran dışında kalmamalı.

Mobilde hız, masaüstünden daha kritik

Mobil cihazlar hem daha yavaş işlemcilere hem daha değişken bağlantıya sahip. Masaüstünde 1 saniyede açılan bir sayfa mobilde 4 saniyeyi bulabiliyor. Görsel boyutları, gereksiz betikler ve devasa yazı tipi dosyaları en yaygın üç sebep. Bu konuyu ayrıntısıyla hızlandırma rehberimizde ele aldık.

Sektöre göre mobil öncelikler

Mobil kontrol listesi her site için aynı; ancak hangi maddenin öncelikli olduğu sektöre göre değişiyor. Turizmde galeri ağırlığı ve rezervasyon akışı, sanayide teknik doküman erişimi, perakendede ise ödeme adımı en kritik başlık oluyor.

Bölgesel iş yapısına göre neye ağırlık verdiğimizi Kocaeli web tasarım, Antalya web tasarım, Konya web tasarım ve Gaziantep web tasarım sayfalarında ayrı ayrı anlattık.

Yayına almadan önce mobil kontrol listesi

Aşağıdaki maddeleri kendi telefonunuzdan tek tek geçin. Beş dakikalık bu kontrol, yayın sonrası yaşanacak sorunların büyük kısmını önlüyor.

• Tüm sayfalar yatay kaydırma olmadan açılıyor mu?
• Menü tek elle kullanılabiliyor mu, kapatma düğmesi erişilebilir mi?
• Form gönderimi baştan sona sorunsuz tamamlanıyor mu?
• Telefon numarasına dokununca arama başlıyor mu?
• Görseller yüklenirken içerik zıplıyor mu?
• Açılır pencereler ekranı tamamen kaplayıp kapanabiliyor mu?
• Sayfa 4 saniyeden kısa sürede kullanılabilir hâle geliyor mu?