Mobil Görüntülemeyi Optimize Etme
E-ticaret trafiğinin %60'ından fazlası mobil cihazlardan gelmektedir. nuvinode temaları duyarlı tasarımla oluşturulmuştur, ancak müşterilerinize en iyi mobil deneyimi sunmak için ek önlemler alabilirsiniz.
nuvinode'de Duyarlı Tasarım Nasıl Çalışır?
Her nuvinode teması, ekran boyutuna göre düzenini otomatik olarak uyarlar:
- Masaüstü (1024 piksel ve üzeri) — Tam çok sütunlu düzenler, büyük ana görseller, fareyle üzerine gelindiğinde ortaya çıkan efektler.
- Tablet (768 piksel–1023 piksel) — Azaltılmış sütun sayısı, biraz daha küçük yazı tipi.
- Mobil (768 piksel altı) — Tek sütunlu düzen, hamburger menüsü, dokunmaya duyarlı düğmeler.
Bölüm düzenleri, ürün ızgaraları ve gezinme öğeleri otomatik olarak uyum sağlar. Ayrı mobil sayfalar oluşturmanıza gerek yoktur.
Mobil Görünümü Test Etme
Değişiklik yapmadan önce ve sonra mağazanızı her zaman mobil cihazlarda test edin:
- Tarayıcı Geliştirici Araçları — Chrome veya Firefox'ta F12 tuşuna basın, cihaz değiştirme simgesine tıklayın (veya Ctrl+Shift+M tuşlarına basın) ve iPhone 14 veya Pixel 7 gibi bir mobil cihaz seçin.
- Gerçek Cihazda Test Etme — Mağazanızın URL'sini telefonunuzda açın. Bu, dokunmatik hedef boyutları ve kaydırma davranışı gibi emülatörlerin gözden kaçırdığı sorunları tespit etmenizi sağlar.
- Google Mobil Uyumluluk Testi —
search.google.com/test/mobile-friendlyadresini ziyaret edin ve Google değerlendirmesi için mağazanızın URL'sini girin.
Yaygın Mobil Sorunlar ve Çözümleri
Metin Okunamayacak Kadar Küçük
Ana metin mobil cihazlarda okunması zorsa, temel yazı tipi boyutunuz çok küçük olabilir. nuvinode temaları, mobil cihazlarda en az 16 piksel kullanır. Daha küçük boyutlar içeren özel CSS eklediyseniz, bunu kaldırın veya ayarlayın:
@media (max-width: 768px) {
body { font-size: 16px; }
}Dokunmak İçin Çok Küçük Düğmeler
Dokunma hedefleri en az 44x44 piksel olmalıdır. Bundan daha küçük özel düğmeleriniz varsa, bunların iç boşluklarını artırın.
Ekrana Sığmayan Görüntüler
Ürün resimlerinin ve ana banner'ların max-width: 100%. nuvinode bunu otomatik olarak halleder, ancak zengin metin düzenleyicisi aracılığıyla eklenen özel resimler için CSS kuralının manuel olarak uygulanması gerekebilir.
Yatay Kaydırma
Sayfa mobil cihazlarda yatay olarak kayıyorsa, bir öğe görüntü alanından daha geniştir. Tarayıcınızın DevTools'unu kullanarak taşan öğeyi belirleyin ve overflow: hidden kullanarak veya max-width: 100%.
Mobil Performans İpuçları
- Görüntüleri optimize edin — Sıkıştırılmış JPEG veya WebP formatını kullanın. nuvinode, optimize edilmiş görüntüleri otomatik olarak sunar, ancak kaynak görüntülerin boyutu yine de 2 MB'nin altında olmalıdır.
- Bölüm sayısını sınırlayın — Her bölüm sayfanın boyutunu artırır. Mobil cihazlarda hızlı yükleme için ana sayfanızı 6–8 bölümle sınırlayın.
- Özel CSS'yi en aza indirin — Büyük özel CSS blokları, mobil cihazlarda sayfanın görüntülenmesini yavaşlatabilir.
- Yavaş bağlantılarda test edin — Chrome DevTools'ta, mağazanızın zayıf bağlantılarda nasıl yüklendiğini görmek için "Yavaş 3G" olarak ayarlanmış Ağ Kısıtlama özelliğini kullanın.