Mobil Uyumlu E-Ticaret Sitesi Nasıl Olmalı?

Türkiye’de web sayfası görüntülemelerinin yüzde 81,86’sı telefondan geliyor (StatCounter, Eylül 2026). Google da 2024’ten beri siteleri yalnızca telefon tarayıcısıyla tarıyor. Yani mağazanızın asıl hali, telefondaki hali.

Bir sitenin telefonda açılması ile telefonda satış yapması aynı şey değil. Bu farkı görmek için Ekim 2026’da 42 yüksek trafikli Türk e-ticaret sitesini 390 piksel genişlikte bir telefon ekranında açtık, ürün sayfasından ödeme formuna kadar ölçtük. Aşağıda her madde için doğrulanabilir bir eşik ve ölçümde ne gördüğümüz var.

Önemli Noktalar

• İncelediğimiz 41 ürün sayfasının 23’ünde Sepete Ekle butonu kaydırmadan görünmüyordu, 16’sında kaydırınca da ekranda kalmıyordu.
• WCAG 2.2 dokunma hedefi için en az 24 piksel istiyor, ana butonlar için 44 piksel öneriliyor.
• 42 mağazanın 14’ü iki parmakla yakınlaştırmayı kapatıyordu. Bu bir erişilebilirlik hatası.
• Teslimat formunu ölçebildiğimiz 15 mağazanın 10’unda hiçbir alanda otomatik doldurma yoktu.
• Google mobil öncelikli dizinlemeyi 31 Ekim 2023’te tamamladı, Mobil Uyumluluk Testi 1 Aralık 2023’te kapandı.

Mobil uyumlu e-ticaret sitesi nedir?

Mobil uyumlu e-ticaret sitesi, ürün bulma, sepete ekleme ve ödeme adımlarının telefonda yakınlaştırma ve yatay kaydırma gerektirmeden tamamlanabildiği sitedir. WCAG 2.2 bu sınırı 320 CSS piksel genişlik olarak tanımlıyor. Sayfanın telefonda düzgün görünmesi işin başlangıcı, ölçüt ise müşterinin siparişi telefonda bitirebilmesi.

Telefona uyumun üç yolu var. Responsive tasarımda tek adres ve tek HTML var, düzen ekran genişliğine göre değişiyor. Dinamik sunumda aynı adres cihaza göre farklı HTML döndürüyor. Ayrı mobil sitede ise m. ile başlayan ikinci bir adres açılıyor. Google üçünü de destekliyor ama responsive tasarımı öneriyor, çünkü kurması ve sürdürmesi en kolay yöntem bu.

Bir e-ticaret ajansı olarak mağazaları mobil uyumlu ve hızlı tasarlıyor, sepet ve ödeme akışını da bu ölçütlere göre kuruyoruz. Aşağıdaki eşikler, bir siteye baktığımızda kontrol ettiğimiz maddelerin kendisi.

Türk e-ticaret sitelerini 390 piksel ekranda ölçtük

Ekim 2026’da incelediğimiz 41 ürün sayfasının 23’ünde Sepete Ekle butonu sayfa açıldığında kaydırmadan görünmüyordu. 16’sında buton ne ilk ekrandaydı ne de aşağı kaydırınca sabit bir çubukta ekranda kalıyordu. Ölçümün en çok ayrışan sonucu bu oldu. Viewport etiketi ise 42 sitenin 42’sinde doğruydu, yani temel teknik ayar artık sorun değil.

Nasıl ölçtük

Türkiye’nin en çok ziyaret edilen ilk 10.000 sitesi arasından, kendi alan adından satış yapan 42 mağaza seçtik. Pazaryerlerini, dijital ürün satanları ve yalnızca kurumsal satış yapanları dışarıda bıraktık. Giyimden kozmetiğe, mobilyadan kitaba 11 farklı kategori var. Siteleri 6 Ekim 2026’da 390 piksel genişlikte, dokunmatik ekranlı bir telefon görünümünde açtık. Her sitede ana sayfadaki ilk ürünü açtık, sepete eklemeyi ve misafir olarak ödeme formuna kadar ilerlemeyi denedik. Hiçbir alana bilgi girmedik, hiçbir form göndermedik.

Ölçüm gerçek bir iPhone’da değil, Chrome’un telefon görünümünde yapıldı. Ödeme adımına her sitede ulaşamadık, bu yüzden ödeme maddelerinde sayılar daha küçük. Site adlarını ve kullandıkları altyapıyı yazmıyoruz.

En sık çıkan sorunlar

Madde	Eşik	Sonuç
Sepete Ekle ilk ekranda	Kaydırmadan görünür	41 sitenin 18’inde
Kaydırırken Sepete Ekle ekranda	Sabit çubuk ya da her konumda erişim	41 sitenin 19’unda
Sepete Ekle butonu 44 pikselin altında	44 piksel önerilen	41 sitenin 14’ünde
İlk iki ekranda 24 pikselden küçük hedef oranı üçte birden fazla	24 piksel en az	42 sitenin 17’sinde
Yakınlaştırma kapalı	Kapatılmamalı	42 sitenin 14’ünde
Sayfa yana kayıyor	Yatay kaydırma olmamalı	42 sitenin 6’sında
Ürün sayfasında 16 pikselden küçük giriş alanı	16 piksel ve üstü	38 sitenin 31’inde
İlk açılışta çerez paneli	Ekranın küçük bir kısmı	42 sitenin 31’inde, ortanca ekranın yüzde 34’ü
Misafir ödeme	Üyelik zorunlu olmamalı	26 sitenin 20’sinde var
Ödeme formunda hiç otomatik doldurma yok	Her alanda olmalı	15 formun 10’unda

Sepete Ekle butonu mobilde nerede durmalı?

Sepete Ekle butonu, müşteri ürün sayfasının neresinde olursa olsun tek dokunuşla ulaşabileceği yerde durmalı. Telefonda bunun en yaygın çözümü sabit sepet çubuğu. Asıl buton ekrandan çıktığında ekranın altında beliren ve aynı işi yapan ince bir çubuk bu. Ölçümümüzde 41 mağazanın 19’u bu çubuğu kullanıyordu.

Telefon ekranında ürün görseli, fiyat, varyant seçimi ve kargo bilgisi üst üste diziliyor. Buton çoğu zaman ilk ekranın hemen altında kalıyor. Müşteri açıklamayı, yorumları ya da beden tablosunu okumak için aşağı indikçe buton da gözden kayboluyor. Karar anında yukarı geri dönmek zorunda kalan müşteri için bu fazladan bir adım.

Çubuğu eklerken bir ayrıntıya dikkat ediyoruz. Ürünün beden ya da renk seçeneği varsa ve müşteri seçim yapmadan çubuğa dokunursa, ürünü varsayılan bedenle sepete atmak yerine onu seçim alanına götürüyoruz. E-ticaret site tasarımında ürün sayfasını ve sabit çubuğu tasarımın ilk gününden birlikte planlıyoruz.

Mobilde dokunma alanları kaç piksel olmalı?

WCAG 2.2’nin 2.5.8 ölçütü, dokunma hedeflerinin en az 24 piksele 24 piksel olmasını istiyor. Sepete Ekle ve ödeme butonları gibi ana işlemler için 44 piksele 44 piksel öneriliyor. Apple da 44 punto alt sınırını kullanıyor, Google’ın Lighthouse aracı ise 48 pikselin altını işaretliyor.

Ölçtüğümüz 41 Sepete Ekle butonunun 14’ü 44 pikselin altındaydı. En küçüğü 32 pikseldi ve hiçbiri 24 pikselin altına inmiyordu. Asıl sorun ana butonda değil, çevresinde. 42 mağazanın 41’inde ürün sayfasının ilk iki ekranında 24 pikselden küçük en az bir dokunma hedefi vardı. 17’sinde bu hedefler bütün hedeflerin üçte birinden fazlasıydı. Ürün galerisinin altındaki noktalar ve üst banttaki küçük linkler bunun tipik örnekleri. Komşu hedefler arasında yeterli boşluk varsa WCAG küçük hedefe izin veriyor, bu yüzden bunlara ihlal değil eşik altı diyoruz.

Buton yazısının okunması da bir sayıya bağlı. WCAG normal metinde arka planla en az 4,5’e 1 kontrast istiyor. 40 mağazanın 12’sinde Sepete Ekle yazısının kontrastı bu eşiğin altındaydı.

Küçük ikonların görünümünü değiştirmeden dokunma alanını iç boşlukla büyütmek mümkün. İndirim rozeti gibi açık renkli öğelerde de rengi koyulaştırmak çoğu zaman yeterli. UI/UX tasarımında dokunma alanlarını ve kontrastı tasarım sisteminin içine yazıyoruz. Böylece her yeni sayfa bu eşiklerle başlıyor.

Mobil menü ve kategori gezintisi nasıl kurulmalı?

Mobil menüde müşteri her seviyede hem alt kategoriye inebilmeli hem de bulunduğu kategorinin tamamını tek dokunuşla açabilmeli. Alt kategorisi olan bir üst kategori yalnızca açılır bir ok olarak kalırsa, o kategorinin sayfasına ne müşteri ne de arama motoru doğrudan ulaşabiliyor. Bu yüzden kategori adını link, yanındaki oku ayrı bir buton yapıyoruz.

Sorun yalnızca bizim ölçtüğümüz mağazalara özgü değil. Baymard’ın ABD ve Avrupa’daki 150’den fazla büyük siteyi incelediği 2026 mobil karşılaştırmasında sitelerin yüzde 42’si her katalog seviyesinde “tümünü gör” seçeneği sunmuyordu. Bu bir Türkiye verisi değil, ama sorunun ne kadar yaygın olduğunu gösteriyor.

Arama kutusu telefonda menünün içine gizlenmemeli. Ürününü adıyla arayan müşteri için en kısa yol bu kutu. Türkçe karakterli ve yanlış yazılmış sorguların nasıl karşılanması gerektiğini site içi arama deneyimi yazımızda ölçtük. Menünün genel bilgi mimarisini ise e-ticaret sitelerinde kullanıcı deneyimi yazımızda anlattık.

Mobil ödeme formu nasıl olmalı?

Mobil ödeme formunda misafir ödeme varsayılan olmalı, her alan doğru klavyeyi açmalı ve tarayıcının otomatik doldurmasına izin vermeli. Telefon alanı type="tel", e-posta alanı type="email" olarak işaretlendiğinde telefon doğru klavyeyi açıyor. Kart numarası gibi sayısal alanlarda ise web.dev’in ödeme formu rehberi inputmode="numeric" kullanılmasını öneriyor.

Ölçümde en iyi sonucu klavye maddesi verdi. Telefon alanını ölçebildiğimiz 16 ödeme formunun 14’ü sayısal klavye açıyordu. Otomatik doldurmada tablo tersine döndü. Teslimat formunu ölçebildiğimiz 15 mağazanın 10’unda ad, telefon, e-posta ve adres alanlarının hiçbirinde autocomplete niteliği yoktu. Bu nitelik olmayınca telefon kayıtlı adresi öneremiyor ve müşteri her şeyi parmağıyla yazıyor. WCAG 2.2’nin 1.3.5 ölçütü de kullanıcıdan bilgi isteyen alanların amacının bu yolla belirtilmesini istiyor.

İki alanın doğru kodu bu kadar kısa.

<input type="tel" name="telefon" autocomplete="tel" />
<input type="email" name="eposta" autocomplete="email" />

Aynı 15 formun 10’unda en az bir alanın yazı boyutu 16 pikselin altındaydı. iPhone’da Safari böyle bir alana dokunulduğunda sayfayı yakınlaştırıyor ve müşteri formu bitirince sayfayı elle küçültmek zorunda kalıyor. Ödeme formundaki bütün alanları en az 16 piksel yazıyla kuruyoruz.

Üyelik zorunluluğu da formdan önce gelen bir engel. Ödeme girişini netleştirebildiğimiz 26 mağazanın 20’si üye olmadan alışverişe izin veriyordu, 6’sı üyelik ya da giriş istiyordu. Hesap oluşturmayı siparişten sonraya bırakmak, telefondaki müşteriden bir form daha az doldurmasını istemek demek.

Hata mesajı da formun parçası. Baymard’ın aynı karşılaştırmasında sitelerin yüzde 93’ü doğrulama hatalarında ne yanlış olduğunu söyleyen, alana özgü bir mesaj göstermiyordu. Telefonda ekranın üstünde çıkan genel bir uyarıyı müşteri çoğu zaman görmüyor. Uyarıyı hatalı alanın hemen altına yazıyoruz.

Kapıda ödeme Türkiye’de e-ticaret hacminin yüzde 3,5’ini oluşturuyor (Ticaret Bakanlığı, 2025 verisi). Bu seçeneği sunuyorsanız ürün sayfasında söyleyin. İncelediğimiz 42 ürün sayfasının yalnızca 6’sında kapıda ödeme bilgisi geçiyordu, yani bu seçeneği arayan müşteri onu çoğu zaman ancak ödeme adımında öğreniyor. Ödeme adımında güven veren diğer öğeleri e-ticaret sitesinde güven unsurları yazımızda topladık.

Yakınlaştırmayı kapatmak neden hata?

Viewport etiketinde user-scalable=no kullanmak ya da maximum-scale değerini 2’nin altına çekmek, metnin yüzde 200 büyütülmesini engellediği için WCAG 1.4.4 ölçütünü karşılamıyor. axe erişilebilirlik denetimi bu ayarı hata olarak işaretliyor. Küçük yazıyı okuyamayan, ürün görselindeki ayrıntıya bakmak isteyen müşteri iki parmakla yakınlaştıramıyor.

Ölçtüğümüz 42 mağazanın 14’ü yakınlaştırmayı kapatıyordu. Ödeme formunu ölçebildiğimiz 15 mağazanın 12’sinde ödeme sayfasında da kapalıydı. iPhone’da Safari 2016’dan beri bu ayarı yok sayıyor ve yakınlaştırmaya izin veriyor. Ama Türkiye’deki telefonların yüzde 76,99’u Android. Doğru etiket tek satır.

<meta name="viewport" content="width=device-width, initial-scale=1" />

İlk ekranı kaplayan pencereler de aynı müşteriyi yoruyor. 42 mağazanın 31’i ilk açılışta çerez paneli gösteriyordu ve bu paneller ekranın ortanca olarak yüzde 34’ünü kaplıyordu. Panel gösteren 31 mağazanın 18’inde panel ekranın üçte birinden fazlasını kapatıyordu. 10 mağazada ise çerez paneline ek olarak bir pop-up ya da ekranı kaplayan bir katman açılıyordu. Google, içeriği örten pencereler yerine ekranın küçük bir kısmını kaplayan bir bant kullanmayı öneriyor.

Google mobil uyumu nasıl değerlendiriyor?

Google, mobil öncelikli dizinlemeye geçişi 31 Ekim 2023’te tamamladı. 5 Temmuz 2024’ten sonra siteler yalnızca Googlebot Smartphone ile taranıyor ve telefonda hiç açılmayan içerik artık dizine eklenemiyor. Yani Google sitenizi masaüstünde değil, telefonda okuyor.

Bunun pratik anlamı şu üç kontrol. Telefon sürümünden çıkardığınız ya da kısalttığınız ürün açıklaması Google için de yok. Yapılandırılmış veri, başlıklar ve görsel alt metinleri masaüstü ve telefon sürümünde aynı olmalı. Google ayrıca ana içeriğin kullanıcı bir şeye dokunduktan sonra yüklenmemesini istiyor.

Google’ın Mobil Uyumluluk Testi aracı ve Search Console’daki Mobil Kullanılabilirlik raporu 1 Aralık 2023’te kaldırıldı. Bazı rehberler hâlâ bu aracı öneriyor. Google mobil kullanılabilirliği denetlemek için artık Lighthouse’u gösteriyor. Hız ise ayrı bir ölçüt. Google’ın eşiği sık duyulan 3 saniye değil, en büyük içerik için 2,5 saniye. Ayrıntısını e-ticaret sitelerinde hız yazımızda anlattık.

Sitenizin mobil uyumunu telefonda nasıl kontrol edersiniz?

Sitenizin mobil uyumunu kontrol etmenin en hızlı yolu, kendi telefonunuzda bir ürünü sepete ekleyip kart bilgisi ekranına kadar gitmek. Bu yaklaşık 10 dakika sürüyor ve masaüstündeki hiçbir aracın göstermediği sorunları ortaya çıkarıyor. Yol boyunca şu altı maddeye bakın.

1. Ürün sayfası açıldığında Sepete Ekle butonunu kaydırmadan görüyor musunuz, aşağı indiğinizde ekranda kalıyor mu?
2. Butonlara parmağınızın ucuyla rahatça dokunabiliyor musunuz, yanlışlıkla komşu linke basıyor musunuz?
3. Ürün görselinde iki parmakla yakınlaştırabiliyor musunuz?
4. Sayfa hiçbir yerde sağa sola kayıyor mu?
5. Ödeme formunda telefon alanına dokunduğunuzda sayısal klavye açılıyor mu, telefonunuz adresinizi otomatik doldurmayı öneriyor mu?
6. Çerez paneli ya da kampanya penceresi ilk ekranda ürünü örtüyor mu?

Bu kontrol bir başlangıç. Analitik veriyle, oturum kayıtlarıyla ve ilkelere göre yapılan kapsamlı bir incelemeyi e-ticaret UX audit yazımızda adım adım anlattık. Mağazayı sıfırdan kuruyorsanız mobil uyumun kurulumun neresine oturduğunu e-ticaret nasıl yapılır rehberimizde bulabilirsiniz.