Pratikte Mobil-Öncelikli Tasarım: Baş Parmak Bölgeleri, Breakpoints, Dokunma Hedefleri

Mobil kullanıcıların %90'ı telefonu tek elleriyle baş parmaklarıyla kullanır. Buna rağmen senin sitenin en önemli butonu büyük olasılıkla sağ üst köşede saklanıyor – baş parmağın ulaşamadığı bir noktada – çünkü tasarımcı 27 inç monitörde çizdi ve "responsive olduğunu" söyledi.

Mobil-Öncelikli Tasarım "mobilde de çalışan masaüstü versiyonu" değildir. Tasarım sürecinin, kod sırasının ve asset yüklemesinin tamamen tersine çevrilmesidir. Hannover'deki Storyable ekibi olarak her gün masaüstünde Lighthouse 95, mobilde 38 puan alan siteler görüyoruz – çünkü Mobil-Öncelikli sürekli yanlış anlaşılıyor. Bu rehberde sana somut süreci veriyoruz: CTA yerleşimi için baş parmak bölgeleri, zorunlu boyut olarak 44×44 px dokunma hedefleri, cihaz değil içerik breakpoints, mobil tipografi kuralları ve her özel kodlu web sitemizi güvene almak için kullandığımız test akışı.

Mobil-Öncelikli vs. Responsive: Çoğu Bunu Karıştırıyor

Responsive bir tekniktir. Mobil-Öncelikli bir sıralamadır. Bu karışıklık para kaybettirir.

Responsive demek: düzen ekran boyutuna uyum sağlar. Bir masaüstü siteyi responsive de yapabilirsin – yine "küçültülmüş masaüstü deneyimi" olarak kalır. Görseller çoğunlukla çok büyük, navigasyon karmaşık, kod önce her şeyi yükler sonra display: none ile gizler.

Mobil-Öncelikli demek: en küçük ekrandan başlar ve yukarı doğru genişlersin. Tasarım süreci, CSS ve asset stratejisi tersine döner:

• CSS: Media query olmayan temel stiller mobil için geçerlidir. Büyük ekranlar @media (min-width: ...) alır – tersi değil
• Assets: Mobil önce küçük görseli yükler (<img srcset> veya <picture>), masaüstü büyüğü sonra çeker. Tersi değil
• İçerik: Mobildeki ilk ekran içeriği en önemli içeriktir – masaüstü etrafına ek alır, küçültmez
• Navigasyon: Mobil 3–5 ana madde gösterir, masaüstü ek ikincil navigasyonu açabilir

Bir site responsive olabilir ve mobilde yine felaket – masaüstüde görünmeyen animasyonlu hero için mobile 4 MB JavaScript yüklerse. Fark budur. Bu sıralamanın stratejik performans önemini web tasarım rehberimizde ve pratik Core Web Vitals analizinde detaylı açıklıyoruz.

Baş Parmak Bölgesi Teorisi: Baş Parmak Nereye Gerçekten Ulaşır – ve CTA Nereye Konur?

Steven Hoober 2013'te 1.300'den fazla telefon kullanıcısını gözlemleyip şunu buldu: %49 cihazı tek elle, %36 iki elle baş parmak kullanarak, sadece %15 iki elle işaret parmağıyla tutuyor. Yani mobil aksiyonların ~%85'i baş parmakla yapılıyor.

Ama baş parmak her bölgeye eşit kolay ulaşmaz. Baş parmak bölgesi ekranı üçe böler:

Tasarımına Etkileri

• Primary CTA mobil her zaman natural bölgeye. Alt sticky "Hemen Teklif Al" butonu Storyable müşterilerinde header CTA'larından %20–30 daha çok dönüşür
• Floating Action Button (FAB) sağ alttaki yer trend değil – bu çalışmanın sonucu. Material Design tam baş parmak ortasına koyar
• Burger menü yerine bottom-navigation uygulama benzeri web deneyimleri için. En çok kullanılan 3 aksiyon natural bölgede sürekli görünür
• Okuma içeriği üstte, aksiyon altta. Kullanıcı baş parmaktan uzak okur, baş parmakla aşağıda işlem yapar

Sürücü kursları, restoranlar ve yerel hizmetlerde sonuç daha dramatik: Z kuşağı bir butonu en fazla 1,2 kere dener, sonra rakibe gider – baş parmak değemiyorsa iş bitmiştir.

Dokunma Hedefi Minimum Boyutu: 44×44 px Tercih Değil, Zorunluluk

Ortalama parmak ucu 8–10 milimetre genişliğindedir. Tipik telefon DPI'sinde bu ~44 piksele denk gelir. Apple bunu Human Interface Guidelines'a yazdı, Google Material Design'da 48 dp'ye yükseltti, W3C WCAG 2.5.5'te 24×24 CSS piksel minimum, 44×44 AAA önerisi belirledi.

Altına İndiğinde Ne Olur

• Yanlış tıklamalar: Kullanıcı komşu butona basar. "Sipariş Ver" yanında "İptal" varsa felaket
• Form hayal kırıklığı: 16 px checkbox mobilde piyangoya döner. Dönüşüm %15–25 düşer
• Burger menü ölümü: 24×24 px üç çizgili ikon denetimlerimizdeki en sık UX şikayeti
• Erişilebilirlik ihlali: Yasal erişilebilirlik standartlarına uymak isteyen herkes 24×24'ü minimum garantilemeli

Dokunma Hedeflerini Doğru Uygulama

/* Mobil-öncelikli buton tabanı */
.btn {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 20px;
  font-size: 16px;
}

/* İkonlu butonların dokunma alanını genişletme */
.icon-button {
  position: relative;
}
.icon-button::before {
  content: '';
  position: absolute;
  inset: -10px;          /* görsel boyutu büyütmeden tıklama alanını genişletir */
}

/* Liste öğelerine minimum yükseklik */
.menu-item {
  min-height: 48px;
  display: flex;
  align-items: center;
}

::before pseudo-elementinde inset: -10px görsel tasarımı büyütmeden tıklama alanını genişletir – en önemli mobil hilelerimizden biri. Sayfalama, sosyal ikonlar ve kompakt form-toggle'larda kritik.

Breakpoint Stratejisi: Cihaz İçin Değil, İçerik İçin Tasarlarsın

İnternette yüzlerce ekran boyutu var. Cihaz başına breakpoint koyan (320/375/414/768/1024/1440) kazanamayacağı bir oyun oynar. Bunun yerine: breakpoint'i içeriğin kırıldığı yere koy.

Breakpoint Ne Zaman Gerekli

• Bir başlık çirkin kırılıyor (ör. tek kelime ikinci satıra düşüyor)
• Bir kart o kadar daralıyor ki görsel ya da buton sığmıyor
• İki sütunlu bölüm metne yeterli alan bırakmıyor
• Navigasyon iki satıra düşüyor veya kaymaya başlıyor

Bu kırılım noktalarını tarayıcıyı yavaşça genişletip daraltarak bulursun – cihaz listesi takip ederek değil.

Pratik Breakpoint Setleri

Storyable'da çoğunlukla 4 breakpoint kullanırız, artı bileşen bazlı uyarlamalar için container queries:

/* Mobile First — media query olmadan taban */
.container { padding: 16px; }

/* Tablet Portrait */
@media (min-width: 640px) {
  .container { padding: 24px; }
}

/* Desktop */
@media (min-width: 1024px) {
  .container { padding: 32px; }
}

/* Large Desktop */
@media (min-width: 1440px) {
  .container { padding: 48px; max-width: 1280px; margin-inline: auto; }
}

/* Container queries: kart viewport'tan bağımsız */
.card-wrapper { container-type: inline-size; }
@container (min-width: 400px) {
  .card { display: grid; grid-template-columns: 120px 1fr; }
}

@container 2023'ten beri tüm modern tarayıcılarda mevcut ve eski bir sorunu çözer: 1 sütunlu sidebar'daki kart 3 sütunlu ana alandakiyle aynı viewport olsa bile farklı düzene ihtiyaç duyar. Container queries bunu nihayet mümkün kılar.

Yazı Boyutları, Boşluklar, Satır Yükseklikleri – Mobil Okunabilirlik

Mobil tipografi "daha küçük yazı" değildir. Kendi kuralları vardır çünkü okuma mesafesi ve ekran boyutu telefonda kökten değişir.

Mobil Tipografi Minimum Değerleri

Neden 16 px Kutsal Alt Çizgidir

iOS Safari font-size 16 px'in altına düşer düşmez form alanına otomatik zoom yapar. Kullanıcıya bug gibi gelir ve düzeni zıplatır. Webkit varsayılanı tam orada. 14 px input kullanan çoğu kişi zoom'u sadece input'lara font-size: 16px koyarak "düzeltir" – bu çözüm değil semptom tedavisidir.

Boşluklar: Pratikte Vertical Rhythm

• Mobil container padding: 16 px yan padding minimum. 20–24 px daha değerli hisseder
• Bölüm aralığı: H2 bölümleri arası mobilde en az 48 px. Masaüstünde 80–120 px
• Eleman aralıkları: 8/16/24/32/48 ölçeği tutarlı kalsın. Tutarsız boşluklar "ucuz" sitenin en sık tasarım sinyalidir
• Uzun metinde satır aralığı: 1.4 yerine 1.65 mobil okunabilirliği uçurur

Kontrast ve Renk

WCAG-AA body metni için arka plana karşı 4.5:1 ister. OLED telefonlarda dış ışıkta bu yetmez. Storyable'da bilinçli olarak 7:1 (AAA) hedefliyoruz – özellikle güneşte kullanılan restoran menüleri ve rezervasyon akışları için kritik.

Test Akışı: Mobil-Öncelikli'yi Tek Piksel Kodlanmadan Önce Test Et

Yanlış kurulmuş mobil sitenin refactor'u Storyable'da orijinal tasarım saatlerinin 3 katı. Bu yüzden hiçbir uygulama başlamadan önce 5 adımlı sabit bir test akışımız var.

Adım 1: Önce 375×812 (iPhone 12 Mini) Figma Frame

Her zaman önce mobil tasarla. "Önce masaüstü, sonra mobile uyarla" değil. Mobil düzen çalışıyorsa masaüstüne türetilebilir – tersi neredeyse hiç. 375×812 varsayılan frame boyutu, çünkü güncel en küçük iPhone'lardan birini temsil eder. Burada çalışan büyük ekranlarda her zaman çalışır.

Adım 2: Çıktı ile Baş Parmak Testi

Mobil mockup'ı orijinal boyutta yazdır, telefon gibi tut ve baş parmakla her aksiyonu test et. Bükülmek zorundaysan buton orada olmamalı. Düşük teknolojili gibi geliyor – ama yenilmez derecede etkili. Her Storyable projesinde dev ekibe teslim öncesi yapılır.

Adım 3: Chrome DevTools Mobil Emülasyonu

Prototipi tarayıcıda aç, F12, "Toggle device toolbar". En az şunları test et:

• iPhone SE (375×667) – güncel en küçük ekran
• iPhone 14 Pro (393×852) – şu anki standart
• iPad Mini (768×1024) – tablet kırılım noktası
• Pixel 7 (412×915) – Android standardı

Bağlantıyı "Slow 4G"ye düşür – performans sorunları burada anında ortaya çıkar.

Adım 4: Gerçek Cihaz – Sadece Emülasyon Değil

Tarayıcı emülasyonu dokunma hassasiyetini, iOS Safari viewport özelliklerini (alt bar scroll'da gelir/gider) veya gerçek render performansını taklit etmez. En az bir iOS ve bir Android cihaz fiziksel test edilmeli. Kritik projelerde 20+ gerçek cihaz için BrowserStack kullanırız.

Adım 5: 5 Kullanıcılı Gerçek Test

Maze, UserTesting veya kendin organize et: 5 gerçek kullanıcı en kritik akışları mobilde test etsin. Jakob Nielsen kanıtladı: 5 kullanıcı UX sorunlarının %85'ini açığa çıkarır. Erken aşamada daha fazlasına gerek yok. Bu test temiz geçince ancak kod sprintine başlanır – bu süreç çok adımlı form yaklaşımımızın tam mobil layout'lar için uygulanmış halidir.

Bonus: Gerçek Dış Işık Testi

Telefonu al, güneşe çık, siteyi okumaya çalış. Kontrastları seçemiyorsan masa lambası altında değil, gerçek kullanıcı koşullarında değil tasarım yapıyorsun. Restoranlar, kuryeler ve tüm yerel sağlayıcılar bu testi geçmek zorunda.

Mobil Lansmandan Önce 7 Maddelik Kontrol Listesi

1. Primary CTA natural bölgede (alt üçte bir) görünür veya sticky mi?
2. Tüm etkileşimli elemanlar en az 44×44 px (ideali 48 dp)?
3. Body metin en az 16 px, satır yüksekliği ≥ 1.5?
4. Breakpoints içerik kırılım noktalarına göre, cihaz listesine göre değil?
5. CSS mobilden yukarı min-width query ile yazılmış?
6. Lighthouse mobil skoru ≥ 90? CLS < 0.1, INP < 200ms?
7. Gerçek iOS ve Android cihazlar test edildi, artı 5 kullanıcılı test?

7'sinin de tıkladığında "responsive görünen" değil, mobilde gerçekten dönüşen bir Mobil-Öncelikli tasarımın olur. Bu disiplin hero bölümümüzü 3 saniyede dönüştüren şeydir: hero görseli değil, baş parmağın CTA'yı düşünmeden bulması.

Sonuç: Mobil-Öncelikli Bir Sıralamadır, Teknik Değil

Mobil-Öncelikli Tasarım "mobilde de tamam" değildir. En zor cihazla başlama bilinçli kararıdır – ve düzen, tipografi, dokunma hedefleri ve breakpoints'i hiçbir masaüstü tasarım doğmadan önce buna göre hizalamadır. Baş parmak bölgeleri en önemli CTA'nın yerini belirler; 44×44 px her etkileşimli elementin pazarlık edilemez alt çizgisidir; içerik kırılım noktaları cihaz breakpoints'ini geçer; mobil tipografi 16 px'te başlar ve gerçek okuma mesafelerine saygı duyar; test akışı tasarımı ilk kod satırından önce gerçek baş parmakta doğrulamaya zorlar. Bu beş disipline ciddi bakanlar, mobil kullanıcıların %80'inde gerçekten çalışan siteler kurar – tasarımcının 27 inç monitöründe iyi görünenleri değil. Mobil-Öncelikli Tasarım 2026'da artık opsiyon değil; her Storyable web sitesinin varsayılan sıralamasıdır.

Cagri Ersöz

Baş parmak testi gerekli mi? Gerçekten dönüştüren Mobil-Öncelikli kuruyoruz.

Sadece "responsive" olmayan, baş parmak bölgesinde, dokunma hedefinde ve performansta ödünsüz dönüştüren bir site mi istiyorsun? Mobil-Öncelikli tasarımı Nuxt/Next.js özel kodla birleştiriyor ve Lighthouse mobil skor ≥ 90 garanti ediyoruz. 30 dakikalık ilk görüşmede mevcut sitenin mobil zayıf noktalarını ve net bir sprint'le nasıl çözeceğimizi göstereceğiz.

Hemen Ücretsiz Mobil-Öncelikli Denetimi Al