2026’da web trafiğinin %75’i mobilden geliyor; landing page’ler için bu oran %85’e çıkıyor. Yine de pek çok marka landing page’lerini önce masaüstü için tasarlıyor, mobile sonradan uyarlamaya çalışıyor. Bu yaklaşım ölü doğmuş bir tasarım anlamına geliyor. Mobil landing page tasarımı, mobile-first yaklaşımla baştan kurgulanmalı; reklam yatırımınızın gerçek dönüşümünü mobile performansı belirler.
Bu rehberde, mobil landing page tasarımında 2026’da mutlaka uygulanması gereken kuralları, hız optimizasyonunu, tasarım prensiplerini ve dönüşüm artıran teknikleri detaylı şekilde inceleyeceğiz.
Neden Mobil Landing Page Bu Kadar Kritik?
Birkaç çarpıcı veri:
- Landing page trafiğinin %85’i mobilden geliyor
- Mobile dönüşüm oranı masaüstünün %40 altında (kötü tasarım yüzünden)
- İyi mobil landing page = masaüstü ile aynı dönüşüm
- 3 saniyenin üstünde açılan mobil sayfada ziyaretçinin %53’ü terk ediyor
- Google mobile-first indexing yapıyor — mobilde olmayan içerik olmamış sayılır
Mobile-First Tasarım Yaklaşımı
Sıkça yapılan hata: önce masaüstü tasarlanıyor, sonra mobile uyarlanıyor. Doğru yaklaşım tam tersi:
- Önce mobil tasarım yap (320-414 px)
- Sonra tablet (768 px)
- En son masaüstü (1200 px+)
Bu yaklaşım hem mobile en iyi deneyimi sağlar hem de masaüstü performansı yüksek olur.
Mobile-First Tasarımın 18 Kuralı
1. Tek Sütun Düzen
Mobilde çoklu sütun olmaz. Tüm içerik tek sütunda, dikey akışta.
2. Hızlı Yükleme (Core Web Vitals)
- LCP: 2.5 saniye altında
- INP: 200 ms altında
- CLS: 0.1 altında
Mobil hız landing page dönüşümünü doğrudan belirler. Site bakımı için web sitesi bakım hizmeti kapsamında düzenli izleme yapılmalı.
3. Büyük Dokunmatik Dostu Butonlar
- Minimum 48×48 px
- Butonlar arasında en az 8 px boşluk
- CTA butonu kontrastlı renkte
- Parmak büyüklüğü göz önünde
4. Okunaklı Font Boyutu
- Gövde metin: minimum 16 px
- Başlıklar: 24-32 px
- Satır yüksekliği: 1.5-1.6 (rahat okuma)
- Renk kontrastı: 4.5:1 minimum
5. Kısa ve Etkili Başlık
Mobilde başlık 1-2 satıra sığmalı. Çok uzun başlık dikkat dağıtır.
6. Etkileyici Hero Görseli
- Mobil için özel hero (yatay değil)
- WebP formatı
- Hızlı yükleme
- Yüz/insan görüntüsü etkili
7. Kısa Form
Mobilde form en kritik dönüşüm noktası:
- Maksimum 3-5 alan
- Sayısal klavye için tip=”tel” veya “number”
- E-posta için tip=”email”
- Otomatik adres doldurma
- Tek elle doldurulabilir
8. Tek Elle Kullanım
Önemli butonlar (CTA, telefon) ekranın alt yarısında olmalı. Üst yarı parmakla zor erişilir.
9. Sticky CTA (Sabit Buton)
Sayfa kaydırılırken alt veya üstte sabit duran CTA. Mobile dönüşümü %30 artırıyor.
10. WhatsApp Tek Tıkla
Türkiye’de mobile dönüşümün %40’ı WhatsApp üzerinden. Floating WhatsApp butonu şart.
11. Telefon Tek Tıkla Arama
Telefon numarası tek tıkla aranabilir olmalı:
<a href=”tel:+905551234567″>0555 123 45 67</a>
12. Yatay Kaydırma Yok
Mobilde sadece dikey kaydırma olmalı. Yatay kaydırma kötü tasarım sinyalidir.
13. Pop-up’ları Dikkatli Kullan
Mobile aşırı pop-up Google cezası alır. Pop-up gerekirse:
- Tam ekran kaplamasın
- Kolay kapatılsın
- İlk açılışta değil, ikinci ziyarette
- 30 saniye sonra çıksın
14. Görsel Optimizasyonu
- WebP formatı
- Lazy loading
- Responsive image (srcset)
- Boyut optimizasyonu (max 100 KB)
15. Tap-friendly Navigasyon
Landing page’de menü minimum olmalı. Sadece logo + CTA.
16. Sayfa Uzunluğu Yönetimi
Mobile çok uzun sayfa kötü. İdeal uzunluk:
- Lead toplama: 3-5 ekran boyu (kaydırma)
- Satış: 8-12 ekran boyu
- Bilgi: 6-8 ekran boyu
17. Sosyal Kanıt Vurgusu
Mobilde dikkat süresi kısa, sosyal kanıt erken görünmeli:
- İlk ekranda “12.000+ mutlu müşteri”
- Yıldız puanı
- Marka logoları
18. Mobile Wallet Desteği
Apple Pay, Google Pay desteği. Mobile ödemede dönüşümü %50 artırıyor.
Mobile için Özel Tasarım Elemanları
Floating CTA
Ekranın altında sabit duran ana CTA. Kullanıcı nereye kaydırırsa kaydırsın hep görünür.
Yapışkan Bilgi Banner
Sınırlı süreli kampanya veya önemli bilgi için üstte sticky banner.
Hızlı Eylem Butonları
Ekranın alt köşesinde Whatsapp, telefon, mesaj, mail gibi hızlı erişim butonları.
Geri Sayım Sayacı
Aciliyet için ürün/kampanya geri sayım sayacı. Doğru kullanıldığında dönüşümü %20 artırır.
Video Hero (Mobil için Optimize)
- Otomatik oynayan, sesli olmayan
- 10-15 saniye kısa
- Loop
- 3G bağlantıda da hızlı
Mobil Form Optimizasyonu
Form Alanları
- Sadece zorunlu alanlar
- Doğru klavye tipi (tel, email)
- Otomatik tamamlama açık
- Hata mesajları net
- İlerleme göstergesi
Form Pozisyonu
- Above-the-fold (ilk ekranda)
- Net etiketler
- Placeholder text kullan
Tek Adımlı vs Çok Adımlı Form
Mobile için tek adımlı form daha iyi. Birden fazla adım dönüşümü düşürür. İstisna: çok detaylı bilgi gerekiyorsa multi-step form daha az korkutucu.
Mobil Hız Optimizasyonu
Görsel Optimizasyon
- WebP formatı (%30 daha küçük)
- Lazy loading
- Responsive image
- Boyut optimizasyonu
JavaScript Optimizasyon
- Critical CSS inline
- JS defer/async
- Üçüncü taraf script minimum
- Code splitting
CDN Kullanımı
Cloudflare gibi CDN ile mobile yükleme süresi %40 düşer.
Cache Stratejisi
- Browser cache
- Service worker
- Page cache
Mobile Sayfayı Test Etme
Test Araçları
- Google PageSpeed Insights: Mobile + Desktop ayrı
- Google Mobile-Friendly Test: Uyumluluk kontrolü
- Lighthouse: Detaylı analiz
- BrowserStack: Gerçek cihaz testi
- Microsoft Clarity: Heatmap ve session recording
Test Edilecekler
- Farklı cihazlar (iPhone, Android, Samsung)
- Farklı ekran boyutları
- 3G ve 4G hız
- Yatay ve dikey mod
- Touch ve scroll davranışı
A/B Test Stratejisi
Mobil ve masaüstü ayrı A/B test edilmeli. Mobilde işe yarayan, masaüstünde işe yaramayabilir veya tam tersi.
- Mobil için ayrı varyantlar
- Cihaz bazlı analiz
- Mobile-specific dönüşüm noktaları
Mobile için Reklam Stratejisi
Google Ads Mobil Optimizasyon
- Mobile reklam metinleri kısa
- Call extension öne çıkar
- Mobile reklam tıklama oranı yüksek
- Mobile-only kampanyalar mümkün
Detaylar için Google Ads yönetimi ile mobile odaklı kampanya planlanabilir.
Facebook / Instagram Reklamları
Hemen hemen %100 mobil platform. Tasarım buna göre olmalı.
SMS ve Push Bildirim
Doğrudan mobile yönlendiren kanallar. Landing page mobile hazır olmalı.
Sektörel Mobile İpuçları
E-Ticaret
- Hızlı ürün görüntüleme
- Apple Pay / Google Pay
- Tek tık sepete ekleme
- Mobile wallet
Yerel Hizmet (Restoran, Kuaför, vs.)
- WhatsApp tek tık
- Telefon tek tık
- Google Maps tek tık
- Çalışma saatleri net
B2B Lead Toplama
- Detaylı form (mobilde 5-7 alan kabul)
- İletişim seçenekleri
- Demo talep formu
Sağlık ve Estetik
- Online randevu
- WhatsApp ile konsültasyon
- Öncesi-sonrası galerisi
Sık Yapılan Mobile Tasarım Hataları
- Önce masaüstü tasarım, sonra mobile
- Küçük dokunmatik butonlar
- Küçük font boyutu
- Aşırı pop-up
- Yatay kaydırma gerektiren tasarım
- Otomatik müzik/video (sesli)
- Çoklu CTA (her yerde)
- Uzun form
- WhatsApp ve telefon butonu yok
- Yavaş yükleme (3 saniye üstü)
- Lazy loading olmayan ağır görseller
- Mobile-spesifik test yapılmaması
Mobil Landing Page için Doğru Altyapı
WordPress + Elementor en uygun. Detaylar için landing page tasarımı hizmetimiz mobile-first tasarım yaklaşımıyla.
Mobile-First İçerik Stratejisi
İçerik de mobile için optimize edilmeli:
- Kısa paragraflar (4-5 satır max)
- Madde işaretli listeler
- Görseller bol
- Önemli bilgi üstte
- SSS bölümü (accordion)
Detaylı içerik stratejisi için profesyonel SEO hizmeti alınması önerilir.
2026 Trendler
Voice Search Optimizasyon
“Hey Google, en yakın restoran” gibi sesli aramalar mobile odaklı. Landing page bu sorgulara optimize.
AMP’in Düşüşü
AMP eski trend; modern responsive tasarım yeterli.
PWA (Progressive Web Apps)
Uygulama benzeri deneyim. Çevrimdışı çalışabilir, push bildirim destekler.
AI Chatbot
Mobile landing page’de AI destekli chatbot dönüşümü artırıyor.
Tek Sayfalı Uygulamalar (SPA)
Hızlı geçişler ile uygulama hissi. React, Vue, Next.js ile.
Mobile Landing Page Maliyeti
- Temel mobile-first landing: 5.000-12.000 TL
- A/B test entegrasyonlu: 15.000-30.000 TL
- Premium PWA tarzı: 30.000-80.000 TL
Sonuç: Mobil Landing Page Modern Pazarlamanın Temeli
Doğru tasarlanmış bir mobil landing page, dijital pazarlamanın gerçek ROI’sini belirler. Mobile-first yaklaşım, hızlı yükleme, dokunmatik dostu tasarım, WhatsApp/telefon entegrasyonu ve sürekli A/B test bir araya geldiğinde; mobile dönüşüm oranınız masaüstü ile eşitlenir veya geçer. 2026’da mobilde başarısız olan landing page, reklam bütçesinin %75’ini boşa harcatır.
Worldline Agency olarak mobile-first landing page tasarımı sunuyoruz. Detaylar için landing page tasarımı sayfamızı inceleyebilir, ücretsiz teklif için iletişim sayfamız üzerinden bize ulaşabilirsiniz.
Sıkça Sorulan Sorular
Mobil ve masaüstü landing page ayrı mı yapılır?
Hayır. Responsive tasarım ile tek landing page tüm cihazlarda çalışır. Ancak mobile-first yaklaşım şart.
Mobile dönüşüm masaüstünden niye düşük?
Kötü mobil tasarım yüzünden. İyi tasarlanmış mobil landing page, masaüstünden daha yüksek dönüşür.
Mobile sayfa hızı nasıl artırılır?
Görsel optimizasyon (WebP), CDN, lazy loading, JS minify, kaliteli hosting temel yöntemler.
WhatsApp butonu şart mı?
Türkiye’de evet. Mobile trafiğin %40’ı WhatsApp üzerinden dönüşüm yapıyor.
Pop-up kullanabilir miyim?
Dikkatli. Mobile’da aşırı pop-up Google cezası alır. İlk açılışta değil, 30 saniye sonra.