Türkiye'de organik aramaların %78'i mobil cihazlardan geliyor. "Mobil uyumlu" artık bir özellik değil, varsayılan. Bu rehberde mobile-first yaklaşımı, breakpoint stratejisini, dokunmatik UX'i ve mobil hızı pratik biçimde anlatıyoruz.
Mobile-first ne demek?
Geleneksel yaklaşım: önce masaüstü tasarla, sonra küçük ekrana sıkıştır. Modern yaklaşım: önce mobil tasarla, sonra büyük ekrana genişlet. Mobile-first felsefesi tasarımı odaklı tutar — her şey öncelikli olan vurgulanır.
Breakpoint stratejisi — kaç tane gerekli?
- Mobile S
- ≤ 374px (eski iPhone SE, küçük Android)
- Mobile M
- 375–428px (modern phone)
- Tablet
- 640–1024px (iPad, Android tablet)
- Laptop
- 1024–1440px (MacBook, dizüstü)
- Desktop
- ≥ 1440px (büyük monitör)
Tailwind CSS varsayılan breakpoint'leri (sm 640, md 768, lg 1024, xl 1280, 2xl 1536) çoğu projede yeterli. 5'ten fazla breakpoint genelde over-engineering.
Viewport meta tag — küçük ama kritik
`<meta name="viewport" content="width=device-width, initial-scale=1">` etiketi mobilde sitenizin doğru ölçeklenmesini sağlar. Eksikse mobilde masaüstü genişliğinde gösterilir, kullanıcı pinch-zoom yapmak zorunda kalır. Bu hâlâ %5 sitede eksik — mobile-friendly testinde ilk fail noktası.
Dokunmatik UX kuralları
- Touch target min 44×44px (Apple HIG) veya 48×48px (Material Design).
- Butonlar arası min 8px boşluk — yanlış tıklama önlenir.
- Hover state mobilde işe yaramaz — long-press veya tap aynı işi yapsın.
- Form alanları büyük (font-size: 16px, height: 48px) — iOS otomatik zoom önlenir.
- Sticky bottom bar ile temel CTA daima erişilebilir tutulur.
Tipografi — okunabilirlik mobilde 2x kritik
- Body text min 16px — okunabilirlik için.
- Satır yüksekliği (line-height) 1.5–1.7 — sıkışık metin yorucu.
- Satır uzunluğu (max-width) 60–75 karakter — mobilde doğal akar.
- Başlık-metin kontrastı net — h1 36px ise body 16px, aradaki adımlar göz dinlendiriyor.
Görseller — responsive image best practice
srcset + sizes
Tek bir görselin farklı çözünürlüklerini srcset ile sun: mobil 640w, tablet 1024w, masaüstü 1800w. Tarayıcı doğru olanı çeker. Mobil cihaza 1800w yüklemek bant genişliğini boşa harcamaktır.
WebP / AVIF formatı
JPEG'e göre WebP %30, AVIF %50 daha küçük. Tüm modern tarayıcılar destekler. Cloudinary, ImageKit veya Cloudflare Image Optimization otomatik dönüştürür.
Mobil hız — Core Web Vitals
- LCP (Largest Contentful Paint)
- Mobil hedef: < 2.5sn
- INP (Interaction to Next Paint)
- Mobil hedef: < 200ms
- CLS (Cumulative Layout Shift)
- Hedef: < 0.1
Mobilde 4G/5G CPU + ağ ölçeklenmesi daha yavaş — masaüstü 95+ Lighthouse skoru olan site mobilde 70 görebilir. PageSpeed Insights'da "Mobile" tab ana referans olmalı.
Şunu yapmayın: hamburger menüyü her şey için kullanmak
Hamburger menü tüm navigasyonu gizler. Mobilde en önemli 3–4 link bottom navigation veya top tabs olarak görünür kalmalı. Sadece ikincil linkler hamburger'da olmalı. Kullanıcı her tıklamada hamburger'ı açıp kapatmak zorunda kalmasın.
Test araçları
- Chrome DevTools → Device Mode (Cmd+Shift+M / F12)
- BrowserStack veya LambdaTest — gerçek cihazlarda test
- Search Console → Mobile Usability raporu
- PageSpeed Insights → Mobile / Desktop ayrı skor
- Lighthouse → Mobile audit
NotMobil performans audit'i için: +90 537 729 40 97 (WhatsApp). Mevcut sitenizin mobil Lighthouse skorunu 3 iş günü içinde 90+ seviyesine çıkardığımız hızlandırma paketimiz var.