Lansman Sayfasını Mobil Cihazlarda Mükemmel Gösterme
Kısa Cevap
Responsive lansman sayfası tasarlamak, telefonunuzda açtığınız zaman da, tabletinizde de aynı şekilde harika görünmesi demek. Başta mobil kullanıcılar için tasarla, yazı boyutlarını ve butonlarını uygun hale getir, görselleri test et. Ben lansmanlarımda mobil trafiğinin %60'ını gördüğüm için bu konuda hiç taviz vermiyorum.
Neden Mobil Önce Tasarlamak Önemli?
Gerçeği söyleyeyim: eğer lansman sayfanız mobilde kötü görünüyorsa, ziyaretçileriniz beş saniyede gidiyor. Özellikle sosyal medyada paylaştığınız zaman, çoğu kişi linkinizi telefonundan açıyor. WhatsApp'tan, Twitter'dan, Instagram'dan gelen trafik mobil. Büyük ekranda harika gözüken bir sayfa, küçük ekranda okunamaz duruma gelirse, dönüşümünüz düşer.
Ben ürünümü ilk kez lansmanladığımda bu hatayı yaptım. Masaüstünde test ettim, her şey güzel duruyordu. Ama lansman gününde insanlar mobilde tıklamıyor dediler. Kontrol ettiğim zaman görüntüler örtüşüyordu, butonlar küçüktü, metin sığmıyordu. O günden sonra her zaman mobil telefonum açık olur tasarlarken.
Başlıklar ve Metin Boyutlarını Doğru Ayarlamak
Mobil cihazlarda yazı boyutunun rolü çok büyük. Başlık çok büyük olursa, sadece iki-üç kelime sığıyor bir satıra ve kullanıcı kaydırmaktan sıkılıyor. Çok küçük olursa okuyamıyor.
Benim kullandığım sistem şu: ana başlık mobilde en az 24-28 piksel, alt başlıklar 18-20 piksel, gövde metni 16 piksel. Masaüstü için daha büyük, ama bu mobil oranları tutup başlıyorum. Ayrıca satır arası boşluğu da önemsiyorum. Telefonda %150'lik satır aralığı çok rahat hissettirirken, %120 biraz sıkışık görünüyor.
Listeleri ve paragrafları da küçük tutuyorum. Bir paragrafa 3-4 cümle kadarı yeterli. Mobil kullanıcı kayıyor, hızlı okuyor. Uzun paragraflar onu oyalamaktan çok, sıkılttırıyor.
Butonlar ve Tıklanabilir Öğeleri Cep Parmağı İçin Tasarlamak
Telefonunuz elinize alın ve baş parmağınız nereye rahat ulaşıyor bakın. Butonlar o bölgelerde olmalı. En önemlisi: buton boyutu. Çok küçük bir butona parmak ile tıklamak zor. Minimum 44x44 piksel olması gerekiyor, ama ben 50-56 pikseli tercih ediyorum.
Butonlar arasındaki boşluk da kritik. Eğer iki tane butona yanyana koyarsan mobilde, parmak yanlış birine basabilir. Ben önemli butonları dikey olarak, yani üst üste sıralıyorum. "Lansmanı İzle" gibi asıl buton, onun altında "Daha Sonra Hatırlat" gibi ikinci seçenek. Böylece ikisi de iyi boyutlı ve rahat erişilebilir oluyor.
Görselleri Mobil Dünyasında Nasıl Kullanmalısın?
Görsel kullanmak lansman sayfasını daha ilgi çekici hale getiriyor, ama mobilde sorun olabilir. Geniş resimleri mobil ekrana sıkıştırırsan, esnetilmiş veya bulanık görünüyor. Çözüm: farklı boyutlarda görseller hazırlamak.
Bir ürün fotoğrafı var ise, masaüstü için geniş versiyonunu, mobil için daha dar bir kadraja sahip versiyonunu hazırlıyorum. Örneğin masaüstünde ürünü bütün detayıyla göster, mobilde sadece önemli kısmını. Video veya animasyon kullanıyorsan, ekran boyutuna göre ölçeklenmesini kontrol et. Ayrıca mobilde görüntüler ağır yükleme yapıyor. Görselleri sıkıştırarak (compression) yükleme hızını artır.
Lansman Sayfasında Form Alanlarını Optimize Etmek
E-posta toplamak için bir form kullanıyorsan, mobilde onu basit tut. Telefonda çok fazla alan doldurtmak kullanıcıyı sıkıyor. Ad, e-posta, hepsi bu kadar. Ek alanlar istemek istiyorsan, sonradan isteyebilirsin. Form alanlarının genişliği de önemli: telefonda tamamen ekran genişliğini kaplayacak şekilde ayarla.
İnput alanları ve butonlar da yeterince büyük olmalı. Mobil cihazlar doğru font tipi seçtiğin zaman form doldurma açısından daha iyi davranıyor. Sans-serif fontlar (Arial, Helvetica, Open Sans gibi) tercih ediyorum, serif'li fontlardan daha okunur geliyor telefonda.
Renk ve Kontrast: Güneş Altında da Görülsün
Çoğu insan lansmanı dış ortamda, güneş altında telefonda açıyor. O anda contrast önemli oluyor. Açık gri yazı açık fonda yazılamaz bu ortamda. Yüksek kontrast sağla: koyu yazı açık fonda veya açık yazı koyu fonda. Renklerini de test et; bazı renk kombinasyonları mobil ekranda farklı görünüyor.
Sık Sorulan Sorular
Telefonda test etmek için hangi araçları kullanabilirim?
Chrome'un developer tools'unda responsive design modunu aç. Ama en iyisi, sayfanı farklı telefonlarda doğrudan test etmek. Arkadaşlarından kat ver, onların telefonlarından bak. Ben bu işi yapmadan lansman sayfasını yayına çıkartmıyorum.
Masaüstü ve mobil sayfasını ayrı mı tasarlamam gerekiyor?
Hayır. Tek bir responsive sayfa tasarla, ekran boyutuna göre kendini ayarlasın. Bu hem kolay hem sürdürülebilir. Masaüstü ve mobil sayfasını ayrı yönetmek, güncellemelerde kaos yaratır.
Mobilde yatay görüntülemeyi desteklemeli miyim?
Evet, ama başta dikey modu optimize et. Yatay kullanıcı sayısı az ama sıkıntı çıkartacak şekilde tasarlanmaması gerekiyor. Yazıları yatayda da okunaklı hale getir.
Yükleme hızı mobilde neden bu kadar önemli?
Çünkü mobil internet masaüstü kadar hızlı değil. Sayfan 3 saniyeden fazla yüklenmesi durumunda, kullanıcı gidebiliyor. Görselleri sıkıştır, gereksiz kodları temizle, CDN kullan.