Mobil Uyumlu Site Ne Demek, Nasıl Test Edilir?

Mobil uyumlu site denince çoğu kişinin aklına telefon ekranına sığan site geliyor. Bu gerekli, ama yeterli değil. Ekrana sığan ama yazısı okunmayan, butonuna parmakla basılamayan, formu klavyeyle boğuşarak doldurulan bir site teknik olarak mobil uyumludur. Pratikte değildir.

Mobil öncelikli dizinleme nedir?

Google bir siteyi değerlendirirken artık mobil sürümünü esas alıyor. Buna mobil öncelikli dizinleme deniyor. Pratik sonucu şu: masaüstünde görünüp mobilde gizlenen ya da kısaltılan içerik, Google'ın gözünde eksik kalabiliyor.

Bir not: Google'ın eski 'Mobil Uyumluluk Testi' aracı kullanımdan kaldırıldı. Bugün mobil performansı ölçmek için PageSpeed Insights ve Lighthouse kullanılıyor. Ama hiçbir araç, sitenizi kendi telefonunuzda gerçek bir müşteri gibi kullanmanın yerini tutmuyor.

Responsive tasarım ne demek?

Responsive, yani duyarlı tasarım, tek bir sitenin ekran genişliğine göre düzenini değiştirmesi demek. Eskiden mobil için ayrı bir 'm.' sitesi yapılırdı; bugün standart yaklaşım bu.

Ama responsive olmak iyi bir mobil deneyim garantisi değil. Masaüstü düzenini alt alta dizmek, menüyü bir simgenin arkasına saklamak ve görselleri küçültmek siteyi ekrana sığdırır. Mobil kullanıcının başparmakla, çoğu zaman yolda ve mobil veriyle gezindiğini hesaba katmak ise ayrı bir tasarım işi.

Telefonla 5 dakikalık test

Wi-Fi'ı kapatın, mobil veriyle sitenizi açın ve sırayla şunlara bakın:

1. İlk ekran birkaç saniye içinde açılıyor mu ve ne iş yaptığınız kaydırmadan anlaşılıyor mu?

2. Metni yakınlaştırmadan rahatça okuyabiliyor musunuz? Gövde metninin yaklaşık 16 piksel ve üzerinde olması iyi bir ölçü.

3. Menüyü tek elle, başparmağınızla açıp kapatabiliyor musunuz?

4. Butonlara ve bağlantılara basarken yanlışlıkla yandakine dokunuyor musunuz? Dokunma alanlarının yaklaşık 48 piksel civarında olması öneriliyor.

5. Telefon numarasına dokunduğunuzda arama ekranı açılıyor mu? WhatsApp butonu doğru numarayla çalışıyor mu?

6. Formu doldurun. E-posta alanında @ işaretli klavye, telefon alanında rakam klavyesi açılıyor mu? Hata olduğunda mesaj alanın yanında mı çıkıyor?

7. Sayfa yana kayıyor mu? Telefonu yatay çevirdiğinizde düzen bozuluyor mu?

8. Açılır pencereler içeriği kapatıyor mu ve kapatma tuşuna kolayca ulaşılabiliyor mu?

Bu sekiz kontrolün her biri birkaç saniye sürüyor. Takıldığınız her nokta, müşterinizin de takıldığı nokta.

Sık görülen mobil sorunlar

Küçük işletme sitelerinde sık karşılaştığımız bir tablo, ekranın alt yarısının üst üste binmiş öğelerle kaplanması: çerez bandı, WhatsApp butonu ve bir sohbet balonu aynı anda. İçerik görünmüyor.

Diğerleri:

• Çok yüksek sabit başlık. Ekranın üçte birini kaplayan bir üst menü, okunacak alanı daraltıyor.
• Büyük görsel dosyaları. Masaüstü için hazırlanmış 3 MB'lık bir fotoğraf, mobil veride saniyeler kaybettirebiliyor.
• Yatay taşan tablolar ve fiyat listeleri.
• PDF menü ya da katalog. Telefonda yakınlaştırıp kaydırarak okunuyor, çoğu zaman hiç okunmuyor.
• Sayfa yüklenirken kayan içerik. Kullanıcı bir butona basmak üzereyken üstte bir görsel yükleniyor ve parmağı başka bir şeye basıyor. Bu ölçüme CLS deniyor; Core Web Vitals yazımızda ayrıntılı anlattık.
• Açık gri, küçük yazı. Masaüstünde şık görünüyor, güneş altında telefonda okunmuyor.

Mobilde dönüşümü artırmak

Mobil kullanıcının niyeti çoğu zaman daha acil: bir yol tarifi, bir telefon numarası, hızlı bir fiyat bilgisi. Bir veteriner kliniğini düşünün; gece hasta hayvanıyla arama yapan biri form doldurmak istemez, tek dokunuşla aramak ve yol tarifi almak ister. Veteriner kliniği sitelerini anlattığımız yazıda bu konuya ayrıca değindik.

Mobil dönüşüm için birkaç pratik düzenleme:

• Tıkla ara ve WhatsApp butonları her zaman görünür olsun, ama içeriği kapatmasın.
• Ana eylem butonu başparmağın rahat eriştiği bölgede, ekranın alt yarısında dursun.
• Formları kısaltın; mobilde her ek alan bir terk sebebi olabilir. Form tasarımını ayrı bir yazıda ele aldık.
• Tarayıcının otomatik doldurma özelliğinin çalıştığından emin olun.

Sitenizi bu testten geçirip listenin yarısında takıldıysanız, mevcut sitenize Kodyva olarak birlikte bakabiliriz. Ama önce testi kendiniz yapın; beş dakikanızı alır ve neyin düzeltilmesi gerektiğini en net sizin telefonunuz gösterir.