Mobil Uyumlu Web Sitesi Nedir, Neden Zorunlu? Responsive Tasarım Rehberi

Türkiye\'de internet trafiğinin %67\'si mobil cihazlardan geliyor (Statcounter, 2024). Ziyaretçilerinizin üçte ikisinden fazlası sitenize telefon veya tabletle bakıyor. Mobil uyumsuz site bu kitleye kötü deneyim yaşatıyor: yatay kaydırma gerektiren metin, parmakla tıklanamayan küçük bağlantılar, yavaş yükleme. Sonuç: hızlı geri dönme ve rakip siteye geçme. Bu yazıda mobil uyumluluğun ne olduğunu, neden zorunlu olduğunu ve nasıl test edileceğini ele alıyoruz.

Mobil Uyumluluk Tam Olarak Ne Demek?

Mobil uyumluluk birkaç farklı seviyede tanımlanabilir:

• Responsive tasarım (önerilen) — Tek kod tabanı, ekran boyutuna göre otomatik düzen değişimi. CSS media query\'leri ile gerçekleştiriliyor. Farklı cihazlar için ayrı site yok — bakım ve güncelleme kolaylaşıyor.
• Adaptive tasarım — Cihaz tipi algılanıyor ve farklı şablonlar sunuluyor. Daha karmaşık, daha az tercih ediliyor.
• Mobil alt site (m.site.com) — Ayrı mobil site. Hem bakım hem SEO açısından sorunlu — eski yöntem, önerilmiyor.

"Mobil uyumlu" derken responsive tasarım anlaşılmalı. Masaüstünde iyi görünmesi yeterli değil — akıllı telefonda gerçekten kullanılabilir olmalı.

Google\'ın Mobil Öncelikli İndeksleme Politikası

Google 2019\'dan itibaren tüm siteler için mobil öncelikli indeksleme (mobile-first indexing) uyguluyor. Bu şu anlama geliyor: Google sitenizi sıralamak için masaüstü sürümünü değil mobil sürümünü değerlendiriyor.

Pratik etkiler:

• Mobilde gizlediğiniz içerik Google tarafından görmezden gelebilir
• Mobil sayfa hızı (Core Web Vitals) sıralama faktörü
• Mobil uyumsuz site, rekabetçi anahtar kelimelerde sıralamada dezavantajlı
• Mobil sürümdeki meta etiketler, başlıklar, schema markup masaüstüyle tutarlı olmalı

Mobil Deneyimin Dönüşüme Etkisi

Mobil uyumluluk yalnızca teknik bir zorunluluk değil — doğrudan satışa etkisi var:

• Parmakla tıklanamayan küçük buton → müşteri iletişime geçemiyor
• Yatay kaydırma gerektiren tablo → kullanıcı sayfayı terk ediyor
• Mobilde uzun ödeme formu → e-ticaret sitesi sepet terk oranı yüksek
• Popup\'lar mobilde ekranı kapatıyor → Google ceza uyguluyor (interstitial ceza)
• Telefon numarası tıklanamıyor → klinik veya hizmet sitesi lead kaybediyor

Mobil Uyumluluğu Test Etmek

Sitenizin gerçekten mobil uyumlu olup olmadığını nasıl anlarsınız?

• Google\'ın Mobil Uyumluluk Testi — search.google.com/test/mobile-friendly — en basit ve hızlı test
• Chrome DevTools — F12 → Device Toolbar (Ctrl+Shift+M) — farklı cihaz boyutlarını simüle edin
• Gerçek telefon testi — Emülatör yetmiyor. Gerçek bir Samsung ve iPhone\'da test edin — iOS ve Android arasında render farkları olabiliyor.
• Google Search Console — "Mobil Kullanılabilirlik" raporu. Sitenizde mobil sorun yaşanan sayfalar listeleniyor.
• PageSpeed Insights — Mobil skor ayrıca ölçülüyor. Masaüstü 95, mobil 40 ise ciddi sorun var.

Sık Karşılaşılan Mobil Sorunlar ve Çözümleri

• Metin çok küçük — Minimum 16px font boyutu mobilede. Viewport meta etiketinin doğru ayarlanması şart: <meta name="viewport" content="width=device-width, initial-scale=1">
• Butonlar çok küçük — Minimum dokunma hedefi 44x44 piksel (Apple HIG önerisi). İki buton yan yana geliyorsa 8px boşluk bırakın.
• İçerik ekran genişliğini aşıyor — Yatay kaydırma sorunu. Sebep: sabit genişlikli (px) element. Çözüm: max-width: 100%, overflow-x: hidden
• Görüntüler çok yavaş — Mobil bağlantı daha yavaş. WebP formatı, srcset ile cihaza uygun çözünürlük, lazy loading
• Video otomatik çalışıyor ve ses açık — Mobil kullanıcı için kötü deneyim ve yavaşlama. Autoplay sadece muted ile kabul edilebilir.

Mobil Uyumlu Site Yapmanın Maliyeti

Yeni site yapılırken responsive tasarım ek maliyet değil — standart. Ayrıca bir ücret ödenmez. Sorun mevcut eski sitede: mobil uyumluluk sonradan eklenmek istendiğinde mevcut tasarım ve kod yapısı değişkenliğe göre birkaç günden birkaç haftaya varan çalışma gerektirebilir. Mobil uyumsuz eski siteye "sadece mobil düzeltme" eklemek yerine yeniden yazmak çoğu zaman daha ekonomik.