Lansman Sayfasını Mobil Cihazlar İçin Optimize Etme
Hızlı Cevap
Mobil cihazlar bugün lansman trafiğinin çoğunu oluşturuyor. Duyarlı tasarım, 3 saniyenin altında yükleme hızı ve tek parmakla kullanılabilir butonlar, mobil lansman sayfanızı başarıya taşıyan temel unsurlardır. Sayfanızı telefon ekranında test etmeden hiçbir zaman yayınlamayın.
Neden Mobil Optimizasyon Lansman Başarısını Belirliyor?
İlk lansmanımda bunu acı bir şekilde öğrendim. Açılış sayfamı masaüstünde mükemmel göründüğü halde telefondan açan insanlar geri dönüş oranı çok düşüktü. Metinler okunamaz boyuttaydı, butonlar çok yakındı, sayfa yüklenmesi dakikalar sürüyordu. Dönüşüm oranım yüzde 2'den yüzde 7'ye çıkmazken, mobil deneyimi iyileştirdikten sonra yüzde 15'e ulaştı.
Nedeni basit: insanlar telefonlarında işi bitirmek istiyor. Hantal ve yavaş sayfalar onları uzaklaştırır. Lansmanınız için topladığınız bekleme listesi, geriye dönüş yapılan e-postalar, sosyal medya paylaşımları—hepsi mobil cihazlardan geliyorsa, optimizasyon yapmamak para harcamaya eşittir.
Duyarlı Tasarım: Tek Koddan Tüm Ekranlar
Mobil lansman sayfası yazmaya başladığımda, masaüstü ve mobil için ayrı sayfalar yapmanın cazip olduğunu hatırlıyorum. Yanlış karar olmuş. Duyarlı tasarım (responsive design), tek bir HTML/CSS dosyasından telefon, tablet ve bilgisayarın hepsinde kusursuz görünmesini sağlar.
Uygulamak için:
- Meta viewport etiketi ekleyin (tarayıcıya cihaz genişliğine uyması söyler)
- Sabit piksel yerine yüzdelerle genişlikler belirleyin
- Görüntüleri otomatik olarak küçülüp büyüyen formatta hazırlayın
- CSS media queries ile 480px, 768px, 1024px kırılma noktalarında düzenler yapın
Kullanmak istemiyorsanız, Webflow, Wix, Squarespace gibi platformlar zaten duyarlı şablonlarla gelir. Bunları seçerseniz bu adımı atlayabilirsiniz.
Yükleme Hızı: Telefon İnternet Süresi Sınırlı
3G, 4G, hatta WiFi—mobil bağlantı masaüstünden daha yavaş ve istikrarsız. Lansmanımızın sayfa yüklenişi masaüstünde 1 saniye sürtüyorsa, mobilde 4-5 saniyeye çıkabilir. Buldum: 3 saniye üzerinde, kullanıcılar sayfayı kapatıyor.
Hızlandırma yöntemleri:
- Görüntüleri sıkıştırın (JPEG yerine WebP formatı deneyin)
- Video embeddeme yerine harita görseli kullanın
- Gereksiz JavaScript dosyalarını kaldırın
- Font sayısını ikiye sınırlayın (her font = ek yükleme süresi)
- CDN (Content Delivery Network) kullanın (görseller sunucudan değil coğrafi olarak yakın noktadan yüklenir)
Google PageSpeed Insights aracını kullanarak sayfanızın mobil hızını ölçün. Söylediği sorunları giderin. İlk adımlar çoğu zaman en büyük farkı yaratır.
Navigasyon ve Butonlar: Büyük, Açık, Tıklanabilir
Masaüstü tasarımında 12px yazı yeterli olabilir. Telefonda acı çektirici. El parmağı farenin aksine kesin değildir—Tıklama hedefinin en az 44x44 piksel olması gerekir.
Deneyimlerimle paylaşayım: açılış sayfamda "Erken Erişim Al" butonunu küçük yaptığımda, insanlar yanlış yerleri tıklıyor ve sayfayı terk ediyordu. Butonu 60x60 piksele çıkardıktan sonra, hata tıklamalar neredeyse yok oldu.
Mobil buton tasarımı:
- Ana CTA butonları en az 50 piksel yükseklikte yapın
- Buton kenarlarına 16 pikselden az boşluk bırakmayın
- Linkler veya menü öğeleri arasına 8 piksel mesafe açın
- Menüyü hamburger simgesi (☰) ile gizleyin, kaydırılabilir hale getirin
Test Etmek: Tarayıcı Değil, Gerçek Telefon
Chrome geliştirici araçlarında mobil modu açıp test edebilirsiniz, ama gerçek telefonda kontrol etmemek hata. Benimki, iPad mini'de kusursuz görünüyordu; iPhone 12 SE'de yazılar çakışıyordu. Farklı cihazların farklı sorunları var.
Test listesi:
- En az üç farklı telefonda (eski, yeni, tablet) açın
- Sayfayı 20 saniyede kapatıp açın (yükleme hızını ölçün)
- Butona tıklayın—doğru yere gidiyor mu?
- Telefonu döndürün (dikey/yatay modu kontrol edin)
- Forma veri girin ve gönderin
- Görüntüler bozuk mı, yazı okunamaz mı?
Sık Sorulan Sorular
Mobil sayfayı ayrı domain'de mi yapmalıyım (m.sitem.com)?
Hayır. 2024'te bu eski. Tek bir duyarlı tasarım, arama motorlarını da mutlu eder ve bakımı kolay tutар. Google mobil-first indexing yapıyor—ayrı sayfalar sorun çıkarır.
Kendi tasarım yapabilir miyim yoksa şablon kullanmalı mıyım?
Lansmanın başında şablon daha mantıklı. Zaman kısıtsa, Figma'da tasarımı mock-up yapıp bir geliştiriciye gösterebilirsiniz. Ama şablon başlamak için yeterli ve sonra özelleştirilebilir.
Mobil sayfada hangi öğeleri çıkarabilirim?
Yazı sayısını kısaltın, ek görselleri çıkarabilirsiniz ama temel mesajı (başlık, kısa açıklama, buton) hiçbir zaman çıkarmayın. Mobil kullanıcı da yine ürünü anlamalı ve işlem yapabilmelidir.