Lansman sayfası mobil uyum ile ilgili sık sorulan sorular
Lansman Sayfası Mobil Uyum: Başlamanız İçin Bilmeniz Gerekenler
Lansmanı yapacağım ürünün web sayfasını tasarlarken, masaüstü bilgisayarda harika görünüyor diye sevinmiştim. Ama telefondan baktığımda fotoğraflar çarpık, yazılar kesik, butonlar tıklanamaz haldeydi. O gün anladım ki lansman sayfası mobil uyum sadece bir tercih değil, kesinlikle gerekli. Ziyaretçilerinizin çoğu telefondan gelecek. Onlara mobilde müthiş bir deneyim sunmazsan, hiçbir pazarlama çabanız işe yaramaz.
Mobil Uyum Nedir ve Neden Bu Kadar Önemli?
Mobil uyumlu tasarım (responsive design), sayfanızın her cihazda -telefon, tablet, masaüstü- mükemmel şekilde görünmesi anlamına gelir. Yazılar okunur, görseller açılır, butonlar tıklanır hale gelir. Ben ilk lansmanımda bu konuya pek önem vermedim ve sonuç olarak telefondan gelen ziyaretçilerin %40'ı sayfayı açar açmaz gitmişti.
Arama motorları da mobil uyumlu sayfaları tercih eder. Google, mobil sürümü önceleyen bir indexleme yapıyor. Yani mobil uyumlu değilsen, arama sonuçlarında gerilerde kalsın.
Teknik Olarak Nasıl Yapılır?
Responsive Meta Etiketini Eklemeyi Unutmayın
İlk kez kendim bir sayfa yazarken, tüm CSS kodlarını doğru yazmış olsam bile mobil görüntü hâlâ garip görünüyordu. Bunun sebebi viewport meta etiketini koyamamaktı. Sayfanızın HTML başına bu kodu ekleyin:
Viewport ayarı tarayıcıya "bu sayfa mobil cihazlar için hazırlanmış" dedi. Bu basit satır sayfa genişliğini cihaza göre otomatik ayarlar.
Esnek Grid Sistemi Kullanın
Lansman sayfanız genellikle bloklar içerir: başlık, görsel, yazı, çağrı-to-action butonu. Bu blokları sabit piksel yerine yüzdelikle tanımlarsan mobil ekranda otomatik sığar. Örneğin, iki sütunlu bir tasarım mobilde tek sütuna dönüşür.
Görselleri Mobil İçin Optimize Edin
Masaüstü için 2000 piksel genişliğinde bir görsel, mobilde yavaş yükler ve veri harcıyor. Farklı boyutlarda görseller hazırlamalı veya otomatik olarak sıkıştırma yapan bir hizmet kullanmalısınız. Çok büyük dosyalar, mobil kullanıcıların sayfadan ayrılmasına neden olur.
Yazı ve Düğme Boyutlarını Kontrol Edin
Telefonla 12 piksel boyutunda yazı okunamaz. En azından 16 piksel olmalı. Aynı şekilde, tıkla-butonu dokunma alanı en az 44x44 piksel olmalı. Yoksa kullanıcı tıklamaya çalışırken yanlış yere basabilir.
Tasarım Açısından Ne Yapmalı?
Sade Tutun, Basitleştirin
Masaüstünde göz kamaştırıcı bir tasarım yaptıysanız, mobilde onu gözden geçirin. Gereksiz animasyonlar, parlak renkler, çok fazla eleman -hepsi telefonda yavaşlatır ve kafa karıştırır. Başlık, ürün açıklaması, görseller, hedef kitleye yönelik yazıyla devam edin. Bekleme listesi yapıyorsanız, formu olabildiğince kısa tutun.
Menüyü Mobil Dostu Yapın
Üst menü mobilde yer kaplar. Bunun yerine hamburger menüsü (üç çizgi) kullanın. Tıklandığında menü aşağıya açılır. Hiç menüye gerek yoksa, direkt içeriğe geç.
Formlarda Tuşlar Kullan
E-posta formu yazarken, mobilde doğru klavye açılmasını sağla. E-posta alanı email türünde, telefon alanı tel türünde olmalı. Mobil tarihsel ya da sayısal girdilerde zaten takvim ya da sayı klavyesi açılır.
Test Etme: Çok Önemli
Tasarımı bitirip "tamam, mobil uyumlu" deme. Gerçek telefonunla -hem iOS hem Android- sayfayı aç ve tık tık dene. Bütün butonlar çalışıyor mu? Yazılar nettir mi? Görseller kesik değil mi? Browser developer tools ile (F12 tuşu) mobil simülasyonunu da kullanabilirsin ama gerçek telefonda en sonunda denemelisin.
Sık Sorulan Sorular
Mobil uyumlu olmayan bir sayfadan kurtulmalı mıyım?
Evet. Mobil uyum artık temel standart. Yoksa ziyaretçiler gitmeye devam edecek.
Ayrı bir mobil sitesi açmalı mıyım?
Hayır. Responsive tasarım, ayrı site açmaktan daha ucuz ve daha etkili.
Mobil uyuma kaç gün gerekir?
Basit bir lansman sayfası 1-2 gün. Karmaşık bir site 1-2 hafta. Lansmanı ertelemeyi göze alamıyorsan, basit ve mobil uyumlu başla. Sonrası için ayrıntılı lansman takvimi oluştur.
Mobil uyumun yazı performansını etkiler mi?
Etkisi var. Yavaş yüklenen mobil sayfa, kullanıcıyı kaybettirir. Görselleri sıkıştır, gereksiz kodları temizle, hızlı sunucu kullan.