Siteniz mobilde bozuk görünüyorsa sebepleri bunlar

Ziyaretçilerin çoğu siteye telefondan giriyor. Yani sitenizin gerçek hâli, sizin bilgisayarınızda gördüğünüz hâli değil. Masaüstünde kusursuz duran bir sayfa telefonda yana kayabilir, yazıları küçülebilir, düğmeleri birbirine girebilir. İşin can sıkıcı tarafı, bunu size kimsenin söylememesi: ziyaretçi sayfayı kapatır, siz de neden kimsenin aramadığını düşünürsünüz.

Ekran sağa kayıyorsa suçlu neredeyse hep tek bir öğedir

Telefonda parmağınızla sayfayı sağa çekebiliyorsanız, sayfada ekrana sığmayan bir şey var demektir. Bu genelde sayfanın tamamı değil, içindeki tek bir parçadır: sabit genişliğe ayarlanmış bir görsel, dışarıdan gömülmüş bir harita, çok sütunlu bir fiyat tablosu ya da kırpılmadan alt alta dizilmiş uzun bir bağlantı. O tek öğe ekranı genişletir, geri kalan her şey de onunla birlikte kayar. Bu yüzden “site komple bozulmuş” gibi görünen sorunların çoğu, tek bir yeri düzeltmekle kapanır.

Bulmanın kolay yolu şudur: sayfayı yavaşça aşağı kaydırın ve hangi bölümde sağ tarafta boşluk açıldığına bakın. Boşluk hangi bölümde başlıyorsa suçlu oradadır.

“Mobil uyumlu tema aldık” demek yetmiyor

Hazır temaların büyük kısmı gerçekten mobil uyumludur; kutudan çıktığı hâliyle telefonda düzgün görünür. Sorun sonradan başlar. Siteye elle bir tablo eklenir, bir kampanya görseli olduğu gibi yüklenir, başka bir yerden kopyalanan bir kutu araya girer. Bunların hiçbiri temanın kurallarını bilmez ve ilk bozulan yer burasıdır. Yani mobil uyum bir kere satın alınan bir özellik değil, her içerik eklemesinde korunması gereken bir düzendir.

Yazı küçük, düğme küçük, aralık yok

Telefonda okunan yazının masaüstündekinden büyük olması gerekir, küçük olması değil. Ziyaretçi yakınlaştırmak zorunda kalıyorsa yazı zaten küçüktür. Aynı şey düğmeler için de geçerli: parmak ucu, fare imlecinden çok daha kalındır. Yan yana duran iki bağlantı arasında yeterli boşluk yoksa insanlar yanlışlıkla diğerine basar, geri gelir, bir daha yanlışa basar ve vazgeçer. Dokunulacak her öğenin rahatça basılabilecek büyüklükte olması, tasarım tercihi değil, işin gereğidir.

En sık karşılaşılan bozulmalar

• Sayfa yana kayıyor; sağda beyaz bir şerit oluşuyor.
• Fiyat ya da teknik özellik tablosu ekrana sığmıyor, sütunlar üst üste biniyor.
• Menü açılıyor ama kapatma düğmesi ekranın dışında kalıyor.
• Üstte sabit duran başlık çubuğu ekranın yarısını yiyor.
• Görsel üstündeki yazı, görsel küçülünce okunamaz hâle geliyor.
• Telefon numarası yazı olarak duruyor; dokununca arama başlamıyor.
• Form alanlarına yazarken klavye açılıyor ve gönder düğmesi görünmez oluyor.
• Çerez uyarısı ya da açılır pencere ekranı kaplıyor, kapatma işareti çok küçük.
• Sayfa yüklenirken yazılar aşağı zıplıyor; okumaya başladığınız satır kayıyor.

Ekranı kaplayan şeyler en çok zararı mobilde verir

Masaüstünde köşede duran bir sohbet balonu telefonda gönder düğmesinin üstüne oturur. Masaüstünde ince bir şerit olan çerez uyarısı telefonda ekranın üçte birini kaplar. İndirim duyurusu için açılan pencere masaüstünde rahatça kapatılırken telefonda kapatma işaretini bulmak sabır ister. Bu öğelerin hepsi ayrı ayrı iyi niyetle eklenir; toplandıklarında ziyaretçinin içeriğe ulaşmasını engellerler. Telefonda ilk ekranda ne kadar gerçek içerik görünüyor diye bakın, cevap sizi şaşırtabilir.

Nasıl test edilir?

En doğru test, kendi telefonunuzla ve ofis internetinize bağlı olmadan yapılandır. Mobil veriye geçin, sitenizi açın ve müşteri gibi davranın: ne yaptığınızı anlayın, bir hizmet sayfasına girin, telefon numarasına dokunun, formu doldurup gönderin. Bu yolculuğun herhangi bir adımında zorlanıyorsanız ziyaretçi de zorlanıyor demektir.

Tek bir telefonla yetinmeyin. Küçük ekranlı bir cihaz, büyük ekranlı bir cihaz ve bir tablet farklı sonuç verir. Ayrıca yatay çevirmeyi denemeyi unutmayın; birçok site dikeyde düzgün, yatayda dağınıktır. Bir de yazı boyutunu telefon ayarlarından büyütüp bakın: görme zorluğu yaşayan ziyaretçiler siteyi böyle görüyor.

Düzeltmeye nereden başlanır?

Sıralamayı ziyaretçinin sizi arama sebebine göre kurun. Önce iletişim yolu çalışsın: numara dokununca arasın, form telefonda doldurulabilsin. Sonra sayfanın yana kayması bitsin. Sonra okunabilirlik gelsin. Görsel ince ayarlar en sona kalabilir; kimse hizalanmamış bir kenar boşluğu yüzünden sitenizden çıkmaz, ama basamadığı bir düğme yüzünden çıkar.