E-Ticaret Sitesi Mobil Uyumlu Nasıl Olur? Kontrol Listesi

Müşteriler artık bilgisayar başında oturmuyor; telefondan bakıyor, telefondan sipariş veriyor. Sitenin mobilde düzgün görünmemesi, düğmelerin küçük kalması ya da sayfanın yavaş açılması demek müşterinin çıkması demek.

Mobil uyumlu site, ekran boyutuna göre kendini ayarlayan sitedir. Müşteri telefondan girdiğinde menü küçülür, yazılar okunur boyutta görünür, ürün görselleri ekrana sığar, sepet düğmesi parmağın rahatça bastığı büyüklükte olur.

Sitenin mobil uyumlu olup olmadığını nasıl anlarsın?

Kendi telefonundan siteyi aç ve şunları kontrol et:

• Sayfa ekrana sığıyor mu? Yatay kaydırma yapman gerekiyorsa site mobil uyumlu değil.
• Yazılar okunuyor mu? Zoom yapman gerekiyorsa yazı boyutu küçük.
• Düğmeler basılıyor mu? Sepet, satın al, menü düğmelerine parmağınla rahatça basabilmen lazım; küçük ya da yan yana düğmeler hata yaratır.
• Görseller düzgün görünüyor mu? Ürün fotoğrafı ekrandan taşıyorsa ya da bozuk görünüyorsa düzeltilmesi gerekir.
• Sayfa hızlı açılıyor mu? Mobilde bağlantı yavaş olabilir; sayfa uzun sürerse müşteri beklemez.

Birkaç farklı telefondan kontrol et; ekran boyutları farklı olabilir (küçük telefon, büyük telefon, tablet).

Mobil uyumlu sitede olması gerekenler

Ekrana sığan düzen

Bilgisayarda yan yana duran ürünler telefonda alt alta görünmeli. Menü bilgisayarda üstte açıkken telefonda hamburger menü (üç çizgi) olarak küçülmeli. Yazılar ekranın genişliğine göre kırılmalı; yatay kaydırma olmamalı.

Okunur yazı boyutu

Telefonda yazı en az 16 piksel olmalı; daha küçüğü okunmaz. Ürün açıklaması, fiyat, düğme üstündeki yazı rahatça okunmalı. Zoom yapmayı gerektiren yazı müşteriyi yorar.

Basılabilir düğmeler

Düğme en az parmak ucu kadar olmalı (yaklaşık 48x48 piksel). Sepete ekle, satın al, menü aç gibi düğmeler birbirine çok yakın olmamalı; yanlış tıklama olur.

Hızlı yüklenen görseller

Ürün fotoğrafları büyük boyutlu olmamalı; mobilde bağlantı yavaş olabilir. Görseller sıkıştırılmalı ama kalite düşmemeli. Sayfa açılırken görseller yavaş yavaş yüklenmeli; müşteri beklemeden ürünleri görmeli.

Kolay form doldurma

Adres, telefon, e-posta gibi alanlar mobilde kolayca doldurulmalı. Klavye otomatik açılmalı; sayı girişi gereken yerde sayı klavyesi, e-posta alanında @ işareti klavyede görünmeli. Uzun formlar mobilde yorar; gerekmedikçe alan ekleme.

Sık yapılan mobil uyumluluk hataları ve çözümleri

Küçük yazı ve düğme

Bilgisayarda güzel görünen yazı telefonda çok küçük kalabilir. Düğmeler yan yana ve küçükse müşteri yanlış yere basar.

Çözüm: Yazı boyutunu artır, düğmeleri büyüt ve aralarına boşluk bırak. Sepete ekle düğmesini en az 48x48 piksel yap; ürün kartlarında düğmeler arası en az 8 piksel boşluk bırak.

Yavaş açılan sayfa

Ürün görselleri çok büyükse, gereksiz kod varsa sayfa yavaş açılır.

Çözüm: Görselleri sıkıştır, gereksiz eklentileri kaldır. Ürün fotoğraflarının genişliği en fazla 1200-1500 piksel olsun; daha büyüğüne gerek yok. Görselleri JPEG formatında kaydet, kalite ayarını %80-85'e çek.

Açılır pencere (popup) sorunu

Bilgisayarda kolayca kapatılan açılır pencere telefonda ekranı kapatır, kapatma düğmesi görünmez. Müşteri sıkılır, siteyi kapatır.

Çözüm: Mobilde açılır pencereyi küçült ya da hiç gösterme; gerekiyorsa sayfanın altında küçük bir bildirim göster. Kapatma (X) düğmesini en az 44x44 piksel yap, sağ üst köşeye yerleştir.

Ödeme sayfası karmaşık

Ödeme sayfasında çok alan varsa, kart bilgisi girişi zorsa müşteri sepeti terk eder.

Çözüm: Ödeme sayfasını basit tut, kart bilgisi alanlarını büyük yap, otomatik doldurma özelliğini aç. Kart numarası alanı tek satırda olsun; son kullanma tarihi ve CVV yan yana ama birbirine değmesin.

Mobil uyumlu site nasıl yapılır?

Hazır tema kullan

Çoğu modern e-ticaret platformu mobil uyumlu temalarla gelir. Temayı seçerken mobil görünümünü mutlaka kontrol et. Sektöre özel hazır temalar hem masaüstünde hem mobilde düzgün görünecek şekilde hazırlanmıştır; sen ürünleri eklersin, müşteri hangi cihazdan girerse girsin düzgün görür.

Kendi düzenlemeni yaparken dikkatli ol

Temayı düzenlerken (renk, yazı, düğme değiştirirken) mobil görünümü kontrol et. Bilgisayarda güzel görünen değişiklik telefonda bozuk çıkabilir. Düzenleme yaptıktan sonra telefondan siteyi aç, her sayfayı kontrol et.

Görselleri optimize et

Ürün fotoğraflarını yüklemeden önce boyutunu küçült. Görsellerin genişliği en fazla 1200-1500 piksel olsun. Dosya boyutu 200-300 KB'ı geçmesin; daha büyük görseller mobilde yavaş açılır.

Mobil uyumlu site için kontrol listesi

Siteyi yayına almadan önce şu kontrol listesini uygula:

• Siteyi kendi telefonundan aç, her sayfayı gez (ana sayfa, ürün sayfası, sepet, ödeme).
• Yazılar zoom yapmadan okunuyor mu kontrol et.
• Düğmelere parmağınla rahatça basabiliyor musun dene.
• Sayfalar hızlı açılıyor mu kontrol et (yavaş bağlantıda test et).
• Farklı telefon modellerinde dene (küçük ekran, büyük ekran).
• Yatay ve dikey modda siteyi kontrol et.
• Sipariş verme sürecini baştan sona tamamla; ödeme sayfasında sorun var mı bak.
• Açılır pencere varsa kapatma düğmesine basılıyor mu kontrol et.
• Form alanlarına dokunduğunda klavye doğru açılıyor mu dene.

Mobil uyumluluk neden bu kadar önemli?

Müşterilerin büyük kısmı artık telefondan alışveriş yapıyor. Sitenin mobilde düzgün çalışmaması demek satış kaybı demek. Müşteri ürünü beğenir ama sepete ekleyemezse, ödeme sayfası açılmazsa, sayfa yavaş yüklenirse başka siteye gider.

Ayrıca arama motorları mobil uyumlu siteleri öne çıkarır. Sitenin mobilde düzgün çalışması arama sonuçlarında üst sıralarda görünmeni sağlar.