Mobile-first, sadece bir CSS yaklaşımı değil; bir ürün stratejisi. Çoğu B2C üründe trafiğin %60'tan fazlası, B2B saha uygulamalarında ise neredeyse tamamı mobil cihazdan geliyor. Avva Mobile'da 8 yılı aşkın sürede 60'tan fazla mobil ve web platformu inşa ettik; "önce masaüstünü yapalım, sonra mobile uyarlarız" diyen her projenin mobilde ödün verdiğini gördük. İşte tüm projelerimizde uyguladığımız 5 temel prensip.
1. Performans Bütçesi
En büyük içerikli boyama (Largest Contentful Paint — LCP) için hedefimiz 2,5 saniyenin altı; etkileşim gecikmesi (INP) için 200 ms. JavaScript paketini 200 KB'ın altında tutuyor, görselleri WebP/AVIF formatında ve doğru boyutta servis ediyoruz.
Asıl önemli olan bütçenin yaptırımı: Lighthouse CI ile her merge öncesi ölçüm alıyoruz; bütçe aşıldığında build kırılıyor. Performans regresyonu, canlıda fark edilen bir sürpriz değil, kod incelemesinde yakalanan bir hata olmalı.
2. Dokunma Ergonomisi
Tüm dokunma hedefleri minimum 44×44 px (Apple HIG) / 48 dp (Material). Kritik aksiyonlar başparmak erişim bölgesinde, yani ekranın alt yarısında; üst köşeler tek elle kullanımda en zor noktalar. Mobilde hover yok — her etkileşimin dokunma durumu (pressed state) tasarlanmalı. Son olarak yanlış dokunuşun telafisi: silme gibi yıkıcı aksiyonlarda geri al (undo) veya onay adımı şart.
3. Offline-First Mantığı
Service worker ve IndexedDB ile yerel önbellek. Kullanıcı uçakta, depoda veya asansörde de uygulamayla etkileşebilmeli — saha ekipleri ve kuryeler için bu bir konfor değil, işin önkoşulu. Zor kısım senkronizasyon: last-write-wins çoğu iş senaryosunda veri kaybettirir; alan bazlı birleştirme (merge) stratejisi baştan tasarlanmalı. Bağlantı durumunu da kullanıcıdan saklamayın; "çevrimdışısınız, değişiklikleriniz kaydedildi ve bağlantı gelince gönderilecek" demek güven inşa eder.
4. Önce Erişilebilirlik
WCAG AA ve üzeri kontrast oranları, semantik HTML, prefers-reduced-motion tercihine saygı. Erişilebilirlik sonradan eklenen bir özellik değil, ilk wireframe'den itibaren bir tasarım kısıtı. Dinamik yazı boyutu (dynamic type) desteği özellikle kritik: kullanıcıların önemli bir kısmı sistem yazı boyutunu büyütüyor ve sabit yükseklikli bileşenler bu durumda kırılıyor. Ekran okuyucu testlerini simülatörde değil, gerçek cihazda VoiceOver ve TalkBack ile yapıyoruz.
5. Aşamalı Yükleme
Skeleton ekranlar, lazy-loading, route bazlı code splitting. Strateji net: ilk boyama hızlı olsun, tam etkileşim aşamalı gelsin. Kritik CSS inline, geri kalanı ertelenmiş. Bu bütçenin en büyük düşmanı genellikle kendi kodunuz değil, üçüncü parti script'ler — analitik ve pazarlama tag'leri disiplinsiz bırakılırsa tek başına bütçeyi tüketir. Tag manager'a giren her script bir performans incelemesinden geçmeli.
Kontrol listesi değil, kültür
Bu beş prensip bir defalık kontrol listesi değil; her sprint'te yeniden uygulanan bir disiplin. Mobil deneyiminizin bu çıtayı geçip geçmediğinden emin değilseniz, Avva Mobile ekibi olarak mevcut ürününüz üzerinde somut bir mobile-first denetimiyle başlamayı öneririz.
