Mobil Öncelikli Tasarım Neden Şart?
Türkiye de internet trafiğinin %70 inden fazlası mobil cihazlardan geliyor. Google 2019 dan bu yana mobile-first indexing kullanıyor, yani sitenizi önce mobil versiyonuyla değerlendiriyor ve sıralıyor.
Mobil uyumlu olmayan bir web sitesi hem kullanıcılarını kaybeder hem de Google sıralamalarında gerilere düşer. İşte mobil uyumlu web sitesi tasarlamanın 10 altın kuralı.
1. Responsive Tasarım Kullanın
Responsive (duyarlı) tasarım, sitenizin her ekran boyutuna otomatik olarak uyum sağlamasını ifade eder. Ayrı bir mobil site oluşturmak yerine, tek bir site üzerinden tüm cihazlara hizmet verin.
CSS Flexbox ve Grid kullanarak esnek layout lar oluşturun. Medya sorguları (media queries) ile farklı ekran boyutlarına özel stiller tanımlayın. Breakpoint ları 768px (tablet) ve 1024px (masaüstü) olarak belirlemek iyi bir başlangıçtır.
2. Dokunmatik Hedefleri Büyük Tutun
Mobilde butonlar ve bağlantılar parmakla tıklanır, fare imleci ile değil. Google, dokunmatik hedeflerin en az 48x48 piksel olmasını önerir. Hedefler arası mesafe ise en az 8 piksel olmalıdır.
Özellikle navigasyon menüsü, form butonları ve CTA (call-to-action) alanlarında bu kurala dikkat edin. Küçük hedefler kullanıcıyı sinirlendirir ve sitenizi terk etmesine neden olur.
3. Sayfa Hızını Optimize Edin
Mobil kullanıcılar genellikle 4G veya daha yavaş bağlantılar üzerinden geziyor. Sayfanızın 3 saniye içinde yüklenmesi kritik önemdedir. Bu süreyi aşan her saniye, ziyaretçi kaybına yol açar.
Hız için yapılacaklar:
- Görselleri WebP formatına dönüştürün, boyutlarını mobil ekrana göre optimize edin
- Lazy loading uygulayın, ekranda görünmeyen görselleri sonra yükleyin
- CSS ve JavaScript dosyalarını minimize ve sıkıştırın
- Kritik CSS yi inline olarak ekleyin
- Üçüncü taraf scriptleri minimum tutun
4. Okunabilir Tipografi Kullanın
Mobilde minimum 16px font boyutu kullanın. Bunun altındaki boyutlar çoğu cihazda okunması zor olur ve tarayıcı otomatik zoom yapar. Satır yüksekliğini (line-height) 1.5-1.6 arasında tutun. Satır uzunluğu 35-40 karakter arasında olmalıdır.
5. Basit ve Erişilebilir Navigasyon
Mobilde hamburger menü kullanın ancak en önemli sayfaları (iletişim, teklif al gibi) her zaman görünür tutun. Menü derinliği maksimum 2-3 seviye olmalıdır. Kullanıcı hangi sayfada olduğunu her zaman bilmelidir.
6. Formları Basit ve Kısa Tutun
Mobilde uzun formlar doldurulması zor ve sıkıcıdır. Sadece gerçekten gerekli alanları isteyin. Otomatik tamamlama (autocomplete) özelliğini aktif edin. Telefon numarası alanında sayısal klavyeyi açtırın (type="tel"), e-posta alanında e-posta klavyesini gösterin (type="email").
7. Pop-up ve Interstitial Kullanmaktan Kaçının
Google, mobilde tüm ekranı kaplayan pop-up lar (interstitial) kullanan siteleri cezalandırır. Özellikle sayfa yüklenir yüklenmez açılan pop-up lar hem kullanıcı deneyimini bozar hem de SEO ya zarar verir. Bunun yerine sayfanın altında veya yan tarafta küçük bildirimler tercih edin.
8. Thumb Zone u Düşünün
Kullanıcılar telefonlarını genellikle tek elle tutar ve başparmakla kullanır. Ekranın alt kısmı ve ortası en kolay erişilebilir alanlardır. Önemli etkileşim öğelerini (CTA butonları, navigasyon) bu bölgelere yerleştirin.
9. Görselleri Mobil İçin Optimize Edin
Masaüstü için hazırlanmış 2000px genişliğindeki bir görseli mobilde göstermenin hiçbir anlamı yoktur. srcset ve sizes nitelikleri kullanarak farklı ekran boyutlarına farklı boyutlarda görseller sunun. Bu hem bant genişliğinden tasarruf sağlar hem sayfa hızını artırır.
10. Düzenli Mobil Test Yapın
Sitenizi sadece kendi telefonunuzda test etmeyin. Farklı cihazlarda ve ekran boyutlarında nasıl göründüğünü kontrol edin. Chrome DevTools un cihaz simülasyonu, BrowserStack gibi araçlar ve Google un Mobile-Friendly Test aracı bu konuda yardımcıdır.
Sonuç
Mobil uyumlu web sitesi artık bir tercih değil, zorunluluktur. Bu 10 kuralı uygulayarak hem kullanıcılarınızı memnun eder hem de Google sıralamalarınızı yükseltirsiniz. Profesyonel mobil uyumlu web sitesi tasarımı için Kayısı Web ile iletişime geçebilirsiniz.