Çoğu kişi mobilde dağılan bir sitenin "tasarım zevki" meselesi olduğunu sanır. Temayı beğenmez, rengi değiştirir, logoyu küçültür, yazı tipini büyütür ve sorunun geçmesini bekler. Ama telefonda yan yana kayan butonlar, ekrandan taşan fiyat tablosu ve tıklanamayan sepet ikonu bir estetik sorunu değildir; bunlar ölçü biriminin yanlış seçilmiş olmasının doğrudan sonucudur. Yani sorun senin gözünde değil, kodun içindeki tek bir sayının yanında duran iki harfte: px.
Bu yazıda sana panik yaptırmadan, sırayla nerede ne bozuluyor onu göstereceğim. Çünkü bir e-pin satış scripti mobilde bozukken kaybettiğin şey "görüntü" değil, gerçek para. Ziyaretçinin %80'i telefondan geliyorsa ve o kişi ödeme ekranında klavyenin altında kalan butonu bulamıyorsa, o sipariş hiç var olmamış sayılır. İşin acı tarafı: panelinde bunu gösteren bir uyarı yok. Sadece dönüşüm oranı düşük görünür, sen de reklam bütçesini suçlarsın.
Mobilde Bozulan Şey Tasarım Değil, Ölçü Birimi: Kimse Bunu Sana Söylemiyor
Hazır bir e-pin scripti aldığında tema dosyalarının içinde yüzlerce sabit piksel değeri bulunur. Geliştirici sayfayı 1440 piksel genişliğinde bir monitörde tasarlamıştır, her şey oraya güzelce oturmuştur. Ama 390 piksel genişliğindeki bir telefonda, içinde width:900px yazan tek bir kapsayıcı bütün sayfayı yatay olarak kaydırmaya yeter. Kullanıcı sağa sola kaydırır, ortada boşluk görür, sitenin "çökmüş" olduğuna karar verir. Oysa hiçbir şey çökmemiştir; sen sadece tarayıcıya "bu kutu ne olursa olsun 900 piksel olacak" demişsindir. Doğru yaklaşım yüzde, rem, max-width ve esnek ızgara kullanmaktır. Bir dijital ürün satış scripti için bu, kozmetik bir tercih değil mimari bir karardır: fiyat kartları, kupon alanı, bakiye göstergesi ve kategori menüsü akışkan olmadan hiçbir küçük ekranda düzgün durmaz.
Trafiğinin Neredeyse Tamamı Telefondan Geliyorsa Neden Hâlâ Masaüstünde Test Ediyorsun?
İşletme sahiplerinin en yaygın alışkanlığı şu: bilgisayardan siteye girer, tarayıcı penceresini daraltır, "tamam mobilde de çalışıyor" der. Bu test yanıltıcıdır. Pencereyi daraltmak sana sadece CSS kırılma noktalarını gösterir; gerçek telefonda ayrıca dokunma olayları, klavyenin ekranın yarısını kaplaması, tarayıcı adres çubuğunun kayması, düşük bellek yüzünden JavaScript'in yavaşlaması ve mobil verideki gecikme devreye girer. Bir e-pin satış yazılımı test edilirken en az üç senaryo denenmelidir: küçük ekranlı eski bir Android cihaz, güncel bir iPhone ve tablet. Ayrıca yatay ekran da denenmeli, çünkü oyun oynayan kitlenin telefonu sık sık yatay pozisyondadır. Bu üç cihazda sepete ekleme, kupon uygulama, ödeme yöntemi seçme ve kod teslim ekranını görme akışını baştan sona geç. Hangi adımda parmağın yanlış yere bastığını not al; düzeltmen gereken liste tam olarak o notlardır.
| Belirti | Kök neden | Nerede aranır | Satışa etkisi |
|---|---|---|---|
| Sayfa yatay kayıyor | Sabit genişlik veya taşan tablo | Tema CSS, ürün tablosu | Yüksek terk oranı |
| Yazılar mikroskobik | Viewport meta etiketi eksik | Şablon head bloğu | Okunmayan fiyatlar |
| Buton tıklanmıyor | Dokunma alanı 30 px altında | Buton sınıfları | Sepete ekleme kaybı |
| Menü açılmıyor | Hover'a bağlı açılır menü | Navigasyon betiği | Kategori keşfi sıfır |
| Ödeme butonu görünmüyor | Klavye açılınca sabit alt bar | Ödeme şablonu | Doğrudan ciro kaybı |
| Görseller ekranı taşırıyor | img için max-width tanımsız | Global stil dosyası | Yavaş ve bozuk görünüm |
Tek Bir Sabit Genişlik Bütün Sayfayı Nasıl Kaydırır?
Yatay kaydırma bulaşıcıdır. Sayfanın herhangi bir yerinde ekrandan taşan tek bir öğe varsa, tarayıcı bütün gövdeyi o öğeye göre genişletir. Sonuç olarak sen anasayfada bir kampanya şeridini suçlarsın, hâlbuki suçlu alt taraftaki uzun bir sipariş numarası ya da sığdırılamayan bir fiyat karşılaştırma tablosudur. Bunu bulmanın pratik yolu, tarayıcı geliştirici araçlarında gövdeye geçici bir çerçeve vermek ve hangi kutunun sınırı aştığını görmektir. Uzun metinler için kelime kırma, tablolar için kendi içinde kaydırılabilir bir sarmalayıcı, görseller için oransal ölçek kullanmak zorunludur. Bir epin yazılım altyapısında tabloların sayısı fazladır: bakiye hareketleri, sipariş geçmişi, bayi fiyat listesi. Bunların her biri küçük ekranda ayrı ayrı ele alınmalı; kimisi kaydırmalı tabloya, kimisi kart görünümüne dönüşmelidir.
Mobilde bozuk görünümün gerçek kaynakları
- Sabit ölçü ve taşan kutular 45%
- Dokunma ve menü hataları 25%
- Ödeme adımı ve klavye çakışması 20%
- Eklenti ve dış betik çakışmaları 10%
Ödeme Adımı Mobilde Sepette Değil, Klavyede Ölüyor
Mobil dönüşümün en çok kanayan yeri ödeme formudur. Kullanıcı telefon numarasını yazmak için alana dokunur, klavye açılır, ekranın yarısı kapanır ve "Ödemeyi Tamamla" butonu klavyenin arkasında kalır. Kullanıcı butonu göremediği için sayfayı kaydırmayı dener, form yeniden odaklanır, döngü tekrarlanır. Çözüm basittir ama çoğu hazır temada uygulanmamıştır: ödeme butonunu klavye açıkken de erişilebilir tutmak, form alanlarına doğru inputmode ve autocomplete değerlerini vermek, e-posta alanında klavyeyi e-posta düzenine geçirmek, tutar alanına sayısal klavye açtırmak. Ayrıca tek sayfalık ödeme mobilde çok adımlı akıştan daima daha iyi çalışır; her yeni sayfa yüklenmesi mobil veride ek gecikme ve ek terk demektir. Bunu düzelten bir işletme, hiç reklam bütçesi artırmadan aynı trafikten daha fazla sipariş çıkarır.
Kendi telefonundan siteye gir ve tek elini kullanarak baştan sona bir sipariş tamamla. Parmağını ekranın üst yarısına uzatmak zorunda kaldığın her an, düzeltilmesi gereken bir tasarım borcudur.
Hazır Tema Alırken Sorman Gereken Asıl Soru: Kaç Kırılma Noktası Var?
Satıcıların "mobil uyumlu" ifadesi çoğu zaman tek bir kırılma noktası anlamına gelir: 768 pikselin altında her şey alt alta dizilir, bitti. Gerçek hayatta bu yetmez. 360 piksellik ekranla 430 piksellik ekran arasında fiyat kartının davranışı farklı olmalıdır; tablet ise tamamen ayrı bir düzen ister. Bir dijital ürün satış yazılımı değerlendirirken şu üç şeyi sor: kaç kırılma noktası tanımlı, tablolar küçük ekranda nasıl davranıyor, ödeme akışı mobilde kaç adım. Ek olarak yönetim panelinin de mobil uyumlu olup olmadığını kontrol et; çünkü siparişleri akşam telefonundan onaylamak, stok yüklemek ya da bayi bakiyesi düzenlemek isteyeceksin. Panel mobilde çalışmıyorsa operasyonun bilgisayar başına zincirlenir.
| Kontrol | Nasıl test edilir | Geçme ölçütü | Durum |
|---|---|---|---|
| Viewport etiketi | Kaynak kodda head bloğunu incele | width=device-width mevcut | Zorunlu |
| Yatay kaydırma | Her sayfayı 360 px genişlikte aç | Yatay çubuk yok | Zorunlu |
| Dokunma alanı | Butonları tek elle dene | En az 48 px yükseklik | Zorunlu |
| Ödeme formu | Klavye açıkken butonu ara | Buton her an erişilebilir | Zorunlu |
| Görsel ölçeği | Ürün kapaklarını kontrol et | Taşma ve bozulma yok | Zorunlu |
| Yönetim paneli | Telefondan sipariş onayla | Tüm işlemler tamamlanır | Önerilir |
| Yatay ekran | Telefonu yan çevir | Düzen korunur | Önerilir |
Pinova Bunu Neden Baştan Farklı Kuruyor?
Mobil uyumluluğu sonradan yamayla eklemek, temelsiz bir binaya kat çıkmaya benzer. Pinova, e-pin ve dijital ürün satan işletmelerin kullandığı lisanslı bir satış yönetim yazılımı olarak arayüzünü mobil öncelikli kurgulayan bir yaklaşım izler: akışkan ızgara, kart görünümüne dönüşen tablolar, klavye çakışmasına dayanıklı ödeme adımı ve telefondan yönetilebilen bir panel. Yani yeni bir kategori eklediğinde ya da fiyat listesini güncellediğinde "acaba mobilde bozuldu mu" diye tek tek kontrol etmek zorunda kalmazsın. Neyin nasıl çalıştığını yakından görmek istersen özellikler bölümünü incele, kurulum ve lisans koşulları için fiyat sayfasına göz at.
Mobil cironu kaçırmayı bırak
Telefonda dağılan bir vitrin, açıkken bile kapalı bir dükkândır. Mobil öncelikli kurulmuş bir altyapıyla aynı trafikten daha çok sipariş çıkar.
E-pin satış scriptim mobilde bozuksa temayı değiştirmek yeterli mi?
Genellikle hayır. Sorun temanın görselliğinde değil, sabit ölçü birimlerinde ve ödeme akışının yapısındadır. Yeni tema da aynı mimariyi taşıyorsa sorun tekrar eder.
Yatay kaydırma sorununu nasıl hızlı bulurum?
Tarayıcı geliştirici araçlarında sayfayı 360 piksel genişliğe ayarla ve öğelere geçici çerçeve ver. Ekran sınırını aşan ilk kutu neredeyse her zaman suçludur.
Mobil ödeme formunda en kritik ayar hangisi?
Klavye açıkken ödeme butonunun erişilebilir kalması ve alanlara doğru klavye tipinin atanması. Bu iki ayar tek başına terk oranını belirgin şekilde düşürür.
Yönetim panelinin mobil uyumlu olması gerçekten gerekli mi?
Evet. Sipariş onayı, stok yükleme ve bayi bakiyesi gibi işlemleri telefondan yapabilmek, özellikle akşam ve hafta sonu satış yoğunluğunda operasyonu ayakta tutar.
Mobil uyumluluk bir kere yapılıp bırakılan iş değil, her yeni sayfada korunması gereken bir disiplindir. Kendi sitenin telefondaki hâlini dürüstçe test et, yukarıdaki kontrol listesini tek tek işaretle ve düzeltilmeyen her satırın sana kaç siparişe mal olduğunu hesapla. Sağlam kurulmuş bir altyapının küçük ekranda nasıl davrandığını kendi telefonundan görmek istersen canlı demo üzerinden bir sipariş akışını baştan sona dene; farkı ilk dokunuşta anlarsın.