Mobil Öncelikli Web Tasarım: Neden Artık Seçenek Değil, Zorunluluk?

Rakamlar Konuşuyor

Türkiye internet kullanımı istatistiklerine göre web trafiğinin %72-78'i mobil cihazlardan geliyor. Statista 2025 verisi Türkiye'yi Avrupa'nın en yüksek mobil internet kullanım oranlarına sahip ülkeler arasında gösteriyor. Google arama sonuçlarında da mobil uyumluluk doğrudan sıralama faktörü olarak kullanılıyor.

Kısacası: mobil deneyim kötüyse hem kullanıcıyı hem sıralamayı hem de geliri kaybediyorsunuz. Google'ın araştırmasına göre mobilde yavaş yüklenen bir sayfayı ziyaretçilerin %53'ü 3 saniye içinde terk ediyor.

Mobil Öncelikli Tasarım Ne Demek?

"Responsive" kelimesini duymuşsunuzdur — masaüstü için tasarlanmış sitenin mobilde de çalışması. Ama mobil öncelikli (mobile-first) daha ilerisi: tasarım önce en küçük ekran için yapılır, sonra büyük ekranlara uyarlanır.

Fark kritik: responsive tasarım büyük ekranı küçültür. Mobil öncelikli tasarım küçük ekranı büyütür. Küçültme süreci çoğunlukla sorun çıkarır — fontlar okunmaz, butonlar tıklanamaz hale gelir, menü bozulur, resimler taşar. Büyütme süreci çok daha kontrollü ve öngörülebilir.

Mobil Tasarımda Kritik 8 Nokta

• Parmak dostu butonlar: Apple HIG standardı minimum 44x44pt, Google Material Design 48x48dp. Daha küçük butonlar yanlış tıklanıyor — kullanıcı deneyimi bozuluyor, dönüşüm düşüyor.
• Okunabilir font boyutu: Mobilde minimum 16px body font. Daha küçüğü yakınlaştırma gerektiriyor — Google bunu negatif sinyal olarak değerlendiriyor.
• Hızlı yüklenme: Mobil bağlantılar daha yavaş ve değişken — görseller WebP formatında sıkıştırılmalı, kritik olmayan kaynaklar lazy load edilmeli
• Tek sütun düzen: Çoğu içerik dikey akmalı, yatay kaydırma kesinlikle yok. Tablo ve geniş içerikler scroll edilebilir container içine alınmalı.
• Sticky CTA: Sayfayı aşağı kaydırırken kaybolmayan sabit "Bize Ulaş" veya "Sipariş Ver" butonu dönüşümü artırıyor
• Tıklanabilir telefon numaraları: Mobilde telefon numarası görünüyorsa tel: linki olmalı — kullanıcı numarayı el ile aramıyor
• Form optimizasyonu: Mobil klavye türleri doğru ayarlanmalı: e-posta için email, telefon için tel klavyesi. Küçük detay, büyük kullanıcı deneyimi farkı.
• Görsel boyutlandırma: Yatay görseller mobilde sorun yaratır. Her görsel için mobil alternatif veya object-fit stratejisi belirlenmeli.

Google Core Web Vitals ve Mobil

Google, 2021'den itibaren Core Web Vitals'ı resmi sıralama faktörü olarak kullanıyor. Mobil skorlar masaüstünden ayrı değerlendiriliyor ve genellikle daha düşük çıkıyor:

• LCP (Largest Contentful Paint): Sayfanın en büyük görsel elementinin yüklenmesi. Hedef: 2.5 saniye altı. Sorun genellikle büyük hero görselleri veya yavaş sunucu.
• CLS (Cumulative Layout Shift): Sayfa yüklenirken elemanların kayması. Hedef: 0.1 altı. Geç yüklenen reklamlar ve fontlar başlıca neden.
• INP (Interaction to Next Paint): 2024'te FID'in yerini aldı. Kullanıcı etkileşimine yanıt hızı. Hedef: 200ms altı.

PageSpeed Insights (pagespeed.web.dev) bu metrikleri ücretsiz ölçüyor. Yayına almadan önce ve ayda bir düzenli kontrol etmek iyi bir alışkanlık.

Gerçek Cihaz Testi Şart

Chrome DevTools'un cihaz simülatörü iyi bir başlangıç ama yeterli değil. Gerçek dünya sorunları gerçek cihazda ortaya çıkıyor:

• Samsung A serisi (Türkiye'de en yaygın Android) — düşük GPU gücü, bazı animasyonları kaldıramıyor
• iPhone SE (küçük ekran, geniş iOS kullanıcı kitlesi)
• 3G/4G bağlantı simülasyonu — Wi-Fi'da hızlı olan 4G'de yavaş olabilir

BrowserStack gerçek cihaz testini uzaktan yapmanızı sağlıyor. En az 5 farklı cihaz ve ekran boyutunda test — yayına almadan önce standart olmalı.

Mobil Dönüşüm Optimizasyonu

Mobilden gelen trafik çoksa ama dönüşüm düşükse sorun tasarımda aranmalı:

• CTA butonu görünür mü, yukarıda mı? — Sayfanın altında kalan CTA mobilde hiç tıklanmıyor
• Form kaç alan içeriyor? — Mobilde her ek alan dönüşümü düşürüyor; 3 alan ideal, 5 alan maksimum
• Ödeme süreci mobil uyumlu mu? — Kredi kartı bilgisi girişi mobilde en çok terk noktası
• WhatsApp butonu var mı? — Türkiye'de telefon görüşmesi değil, WhatsApp tercih ediliyor

Sık Yapılan Hatalar

• Masaüstü tasarımı bitirip "zaten responsive geliyor" demek — çoğunlukla bu yeterli değil
• Sadece kendi telefonunda test etmek — farklı cihazlar farklı davranış sergiliyor
• Popup'ları mobil için optimize etmemek — Google intrusive interstitials politikasıyla cezalandırıyor
• Yatay scroll bırakmak — çoğu kullanıcı bunun kasıtsız bir hata olduğunu düşünüp çıkıyor

Sonuç

2026'da "mobilden bakarken kontrol et" temel kalite güvencesi olmalı — teslim öncesinde değil, tasarım sürecinin her aşamasında. Mobil önce düşünmek alışkanlık kazandırılması gereken bir felsefe, ekstra adım değil.

Web sitenizin mobil deneyimini ve Core Web Vitals skorlarını ücretsiz analiz etmek için Addvero ekibine ulaşın.