Türkiye'de akıllı telefon kullanıcı sayısı 62 milyonu geçti. İnternet trafiğinin yüzde 70'inden fazlası mobil cihazlardan geliyor. Buna rağmen birçok web sitesi hâlâ masaüstü için tasarlanıp sonradan mobilize ediliyor. Bu yaklaşımın bedeli, kullanıcı kaybı ve düşük dönüşüm olarak geri dönüyor.

Mobilin Hakimiyeti

StatCounter verilerine göre Türkiye'de 2024 yılında web trafiğinin yüzde 73'ü mobil cihazlardan gerçekleşti. Bu oran küresel ortalamanın da üzerinde ve her yıl artmaya devam ediyor. Özellikle e-ticaret, haber ve sosyal içerik platformlarında mobil trafik masaüstünü çoktan geçti.

Google 2019'da mobile-first indexing politikasına tam geçiş yaptı. Artık arama motorları bir sayfayı önce mobil versiyonuyla değerlendiriyor. Masaüstünde mükemmel görünen ama mobilinde dağınık olan bir site, Google sıralamalarında geriye düşüyor. SEO ile mobil uyumluluk artık ayrı konular değil, tek bir konunun iki yüzü.

Kullanıcı davranışı da değişti. Kullanıcılar mobilden araştırıyor, karşılaştırıyor ve giderek daha fazla satın alıyor. Mobil deneyimde yaşanan her sürtüşme doğrudan gelir kaybına dönüşüyor. Bir saniye gecikmenin dönüşüm oranını yüzde 7 düşürdüğü hesaplanıyor.

Mobile-First Ne Demek?

Responsive tasarım, masaüstü için yapılmış bir tasarımı küçük ekranlara uyarlamaktır. Medya sorguları ("şu genişlikten küçükse şunu yap") bu amaca hizmet eder. Ancak bu yaklaşımda başlangıç noktası masaüstüdür; mobil ise sonradan düzeltilen versiyondur.

Mobile-first tasarım ise tam tersini yapar. Tasarım süreci en küçük ekranla başlar. Kısıtlı alanda neyin görünmesi gerektiğine karar verilir; bu kararlar içeriği ve öncelikleri netleştirir. Masaüstü versiyonu ise bu temelin üzerine genişletilerek kurulur.

Fark yalnızca metodolojik değil, zihinsel. Mobile-first yaklaşımda şu sorular sorulur:

  • Kullanıcı bu sayfada neden burada? Temel amacı ne?
  • 4 inçlik ekranda göstereceğim en kritik bilgi nedir?
  • Gereksiz içerik hangisi? Kaldırılabilir mi?
  • Bu eylemi parmak ucuyla kolay yapabilir miyim?

Bu sorular, masaüstünde göze çarpmayan ama mobilde büyük sorun yaratan kararları baştan önlüyor. Gereksiz içerik masaüstünde "yer vardı doldurduk" mantığıyla kalıyor; mobilin kısıtlı alanı ise önem sıralamasını zorla netleştiriyor.

Mobile-first tasarım bir teknik değil, bir önceliklendirme disiplinidir. Hangi içeriğin gerçekten önemli olduğunu ortaya çıkarır.

Pratik Tasarım Kuralları

Mobile-first tasarımın pratikte hayata geçirilmesi için bazı temel kurallar var. Bu kuralların büyük çoğunluğu insan fizyolojisinden, yani parmak ve el anatomisinden kaynaklanıyor.

Dokunmatik hedef boyutu: Apple Human Interface Guidelines minimum 44x44 punto, Google Material Design minimum 48x48dp dokunmatik hedef boyutu öneriyor. Bu boyutun altındaki butonlar kullanılabilir olabilir ama kolay değildir. Yanlış tıklama oranı artar, kullanıcı hayal kırıklığı da.

Thumb zone (baş parmak bölgesi): Kullanıcıların büyük çoğunluğu telefonu tek elle tutar ve baş parmakla kullanır. Ekranın alt ve orta bölgesi kolay erişim alanıdır; üst köşeler zor erişim alanı. Kritik eylemler (ana CTA, navigasyon) alt kısma yerleştirilmeli; yardımcı içerik üste taşınabilir.

Form tasarımı: Mobil klavye ekranın yarısını kapatır. Form alanları açılınca kullanıcı görebileceği içeriği kaybeder. Bu nedenle formlar kısa tutulmalı, gereksiz alanlar kaldırılmalı ve input type'ları doğru seçilmeli (tel için type="tel", e-posta için type="email" gibi). Doğru input type'ı doğru klavyeyi açar, sürtüşmeyi azaltır.

Metin okunabilirliği: Minimum yazı tipi boyutu 16px olmalıdır. 16px altındaki metinler iOS'ta otomatik zoom tetikler; bu da sayfa düzenini bozar ve kullanıcıyı çıldırtır. Satır uzunluğu mobilde 35-45 karakter arasında tutulmalı; daha uzun satırlar gözün bir sonraki satırı bulmakta zorlanmasına neden olur.

  • Minimum dokunmatik hedef: 44x44px
  • Minimum metin boyutu: 16px (paragraflar), 12px (etiket ve meta)
  • Satır uzunluğu: 35-45 karakter
  • Ana CTA: Thumb zone içinde, ekranın alt yarısında
  • Navigasyon: Basit, maksimum 5 ana menü öğesi

Mobilde Performans

Mobil tasarımda görsel kararlar performansla doğrudan bağlantılıdır. 4G bağlantıda bile büyük görseller ve ağır scriptler ciddi gecikmelere yol açıyor. Türkiye'de hâlâ geniş bir kullanıcı kitlesi orta segmentte telefonlar kullanıyor; bu cihazlarda işlem gücü sınırlı.

Google'ın Core Web Vitals metrikleri mobil performansı doğrudan etkiliyor. Largest Contentful Paint (LCP) 2.5 saniyenin altında olmalı. Cumulative Layout Shift (CLS) 0.1'in altında olmalı; layout kayması kullanıcıyı yanlış yere tıklatır. Interaction to Next Paint (INP) ise 200ms altında tutulmalı.

Bu metrikleri iyileştirmek için görsel optimizasyon kritik. WebP veya AVIF formatları PNG ve JPEG'e göre yüzde 30-50 daha küçük boyutlar sağlar. Lazy loading, viewport dışındaki görsellerin önce yüklenmesini engeller. Critical CSS inline eklenerek ilk render hızlandırılabilir.

JavaScript de mobil performansın düşmanı olabilir. Ağır third-party scriptler, gereksiz animasyon kütüphaneleri ve bloklayan JavaScript yükleme sürelerini uzatır. Her JavaScript bağımlılığı sorgulanmalı: "Bu gerçekten gerekli mi? Daha hafif bir alternatifi var mı?"

Mobile-first tasarım, hem kullanıcı deneyimi hem SEO hem de iş sonuçları açısından artık bir seçenek değil, temel gereklilik haline geldi. Sitenizi bu standarda taşımak için WEBAJANS.COM ile iletişime geçin. Mobil deneyiminizi baştan tasarlayalım.