Mobil Uyumluluk Sorunları ve Çözümleri

Web trafiğinin büyük çoğunluğu mobil cihazlardan geliyor; buna karşılık pek çok site hâlâ önce masaüstü düşünülerek tasarlanıyor. Sonuç, mobilde okunmayan metinler, parmakla basılamayan düğmeler ve geç açılan sayfalar oluyor.

Sitem mobilde neden kötü görünüyor?

En sık üç sebep: sayfa sabit piksel genişliğinde tasarlanmıştır ve ekrana uyum sağlamaz, viewport etiketi eksiktir, ya da masaüstü için hazırlanmış büyük görseller mobil bağlantıda geç yüklenir. Yazı boyutunun 16 pikselin altına inmemesi ve tıklanabilir alanların en az 44×44 piksel olması, çoğu şikâyeti tek başına çözer.

"Mobil uyumlu" ne demek, ne demek değil

Değil: Sitenin telefonda açılması. Her site telefonda açılır; mesele nasıl açıldığıdır.

Öyle: İçeriğin küçültmeye ve yana kaydırmaya gerek kalmadan okunabilmesi, düğmelerin parmakla rahat basılabilmesi, formların doldurulabilmesi ve sayfanın makul sürede yüklenmesi.

Google, bir sitenin mobil sürümünü esas alarak değerlendirir. Yani masaüstünde mükemmel görünen ama mobilde sorunlu bir site, arama sonuçlarında mobil hâline göre değerlendirilir.

Kendiniz nasıl kontrol edersiniz

Pahalı araçlara gerek yok. Sırayla şunları yapın:

1. Kendi telefonunuzdan gezin. Ana sayfa, bir hizmet sayfası, iletişim formu. Gerçek bir kullanıcı gibi davranın: form doldurun, telefon numarasına basın, menüyü açın.

2. Yatay kaydırma var mı bakın. Sayfayı sağa sola çekmeye çalışın. Kayıyorsa bir öğe ekrandan taşıyor demektir — en yaygın sebep geniş bir tablo, uzun bir bağlantı metni veya sabit genişlik verilmiş bir görseldir.

3. Zıplama var mı izleyin. Sayfa yüklenirken içerik yerinden oynuyor mu? Genelde görsellere boyut verilmemesinden kaynaklanır ve kullanıcı yanlış yere basar.

4. Hız ölçün. Site Hız Testi aracıyla mobil performansınızı görün. Masaüstü sonucu iyi olsa bile mobil ciddi biçimde düşük olabilir.

5. Farklı ekranlarda deneyin. Tarayıcınızın geliştirici araçlarında cihaz görünümünü açıp küçük (360px), orta (768px) ve büyük ekranlarda kontrol edin.

En sık karşılaşılan sorunlar

Yavaş yükleme

Mobilde asıl fark burada ortaya çıkar. Sebepleri sırayla:

Optimize edilmemiş görseller. En büyük paydır. Kameradan çıktığı gibi yüklenmiş 4 MB'lık bir fotoğraf, mobil bağlantıda sayfayı tek başına kilitler. Görselleri kullanılacakları boyuta indirip WebP'ye çevirmek çoğu sitede sayfa ağırlığını yarıdan fazla düşürür — Görsel Dönüştürücü ile toplu hâlde yapabilirsiniz.

Gereksiz eklentiler. Her eklenti kendi CSS ve JavaScript dosyasını yükler. Kullanılmayanları kaldırmak doğrudan hız kazandırır.

Çok fazla dış servis. Canlı destek, harita, sosyal medya gömülü içerikleri, analiz araçları... Her biri ayrı bir bağlantı ve ek yük demektir. Gerçekten gerekli olanları tutun.

Yazı tipleri. Beş farklı font ağırlığı yüklemek gereksizdir; iki ağırlık çoğu tasarım için yeterlidir.

Dokunma hedefleri

Masaüstünde imleçle rahatça tıklanan bir bağlantı, parmakla basılamayacak kadar küçük olabilir. Pratik kural: dokunulabilir öğeler en az 44×44 piksel olmalı ve aralarında boşluk bulunmalı.

En sık sorun çıkaran yerler: alt menüdeki küçük bağlantılar, sosyal medya ikonları, tablo içindeki bağlantılar ve yan yana dizilmiş küçük düğmeler.

Okunamayan metin

Mobilde gövde metni 16 piksel altına düşmemeli. Daha küçük yazı, kullanıcıyı yakınlaştırmaya zorlar. Ayrıca satır uzunluğu çok geniş olmamalı ve satır aralığı ferah tutulmalı.

Formlar

Mobilde form doldurmak zaten zahmetlidir; kolaylaştırın:

• Alan sayısını en aza indirin. Her ek alan tamamlanma oranını düşürür.
• Doğru klavye tipini tanımlayın: telefon alanında sayısal klavye, e-posta alanında e-posta klavyesi açılsın.
• Otomatik doldurmayı destekleyin.
• Hata mesajlarını alanın hemen yanında gösterin.
• Gönder düğmesi ekranda kaybolmasın.

Sabit öğeler

Ekranın üstünde veya altında sabit duran menü, çerez bildirimi ve sohbet balonu birleştiğinde küçük bir ekranda okunacak alan neredeyse kalmaz. Mobilde bu öğeleri sadeleştirin.

Açılır pencereler

Sayfaya girer girmez çıkan tam ekran pencereler mobilde hem rahatsız edici hem de kapatma düğmesi çoğu zaman ekran dışında kalıyor. Kullanıcı sayfayı terk ediyor.

Öncelik sırası

Sınırlı zamanınız varsa şu sırayla ilerleyin:

Mobil uyum ile "ayrı mobil site" farkı

Eskiden m.firmaniz.com gibi ayrı mobil siteler yapılırdı. Bu yaklaşım artık önerilmiyor: iki ayrı site bakımı ikiye katlıyor, içerik farklılaşıyor ve arama motoru açısından karmaşa yaratıyor.

Bugünün doğru yöntemi duyarlı tasarım: tek bir site, ekran boyutuna göre kendini düzenliyor. Aynı adres, aynı içerik, aynı yönetim.

Sık sorulanlar

Sitem mobilde çalışıyor, yine de yenilemem gerekir mi? Çalışıyorsa ve hızlıysa hayır. Sorun, "çalışıyor" ile "kullanılabilir" arasındaki farkta. Kendi telefonunuzdan bir teklif formu doldurmayı deneyin; cevabı orada alırsınız.

Mobil uyum ek ücret mi? Olmamalı. Duyarlı tasarım artık standart bir gerekliliktir, ek hizmet değil.

Uygulama yaptırsam daha mı iyi olur? Farklı işler. Uygulama, düzenli kullanılan bir hizmet sunuyorsanız anlamlıdır. Tanıtım ve teklif toplama amacı için iyi bir mobil site yeterlidir ve çok daha ekonomiktir.

AMP kullanmalı mıyım? Artık gerekli değil. Sitenizi doğrudan hızlandırmak daha kalıcı bir çözüm.

Ölçmenin en hızlı yolu şu: telefonunuzu çıkarın ve kendi sitenizde bir teklif formu doldurmayı deneyin. Zorlandığınız her nokta, müşterinizin vazgeçtiği noktadır.

Mobil yüklenme sürenizi Site Hız Testi ile ölçebilirsiniz.