Sayfanın telefonda yana kayması, gövdenin ekran genişliğinden daha geniş bir içerik taşıması demek ve nedeni her zaman tek bir öğedir. Bulmanın yolu göz kararı değil ölçüm: sayfa farklı ekran genişliklerinde açılıp gövdenin gerçek genişliği ile görünen alanın genişliği karşılaştırılıyor. İkisi arasındaki fark, taşmanın kanıtı oluyor.
Yatay taşma nedir ve neden mobilde ortaya çıkıyor
Masaüstünde geniş bir ekran çoğu hatayı gizliyor. Sabit genişlikli bir tablo, uzun bir kod parçası ya da negatif boşluk verilmiş bir bölüm bin dört yüz pikselde rahatça sığıyor; üç yüz altmış pikselde sığmıyor. Sığmayan içerik ekranın dışına çıkıyor ve tarayıcı sayfaya yatay kaydırma ekliyor.
Ziyaretçi açısından sonuç can sıkıcı: parmakla dikey kaydırırken sayfa yana kaçıyor, okunan satır kayboluyor, sabit duran menü ya da buton ekranın dışında kalıyor. Arama motoru açısından sonuç daha somut: mobil kullanılabilirlik sorunu olarak kaydediliyor ve mobil ziyaretçinin ağırlıkta olduğu bir sitede doğrudan kayıp anlamına geliyor.
Önemli bir ayrım var: içeriğin kendi kutusu içinde kaydırılması sorun değil. Geniş bir tabloyu kendi çerçevesi içinde yana kaydırmak doğru çözüm. Sorun, sayfanın gövdesinin kaymasıdır.
Taşmanın en can sıkıcı tarafı tek bir öğeden kaynaklanması. Sayfada yüz bölüm olabilir; yana kaydırmayı yaratan genellikle bir tanesidir ve o bir tanesi bulunup düzeltildiğinde sayfanın tamamı düzeliyor. Bu yüzden iş, tasarımı yeniden kurmak değil, taşan öğeyi tespit etmek oluyor.
Taşma göz kararıyla değil ölçülerek bulunur
Uyguladığımız ölçüm şöyle: sayfa beş genişlikte açılıyor ve her birinde gövdenin genişliği görünen alanla karşılaştırılıyor.
- 320 piksel: bugün hâlâ kullanılan en dar ekran. Burada taşan bir tablo, mobil ziyaretçinin önemli bir kısmını kaybettiriyor.
- 360 piksel: yaygın Android genişliği.
- 390 piksel: yaygın iPhone genişliği; ağırlık ve istek ölçümlerini de bu genişlikte alıyoruz.
- 768 piksel: tablet ve dikey yerleşimin kırıldığı sınır.
- 1440 piksel: masaüstü; burada taşma varsa sorun içerikte değil yerleşimde.
Ölçüm tek bir sayfada yapılmıyor. Sayfa türü başına örnek alınıyor: ana sayfa, liste sayfası, ürün ya da hizmet detayı, blog listesi, blog yazısı, kurumsal sayfalar ve hata sayfası. Bir sayfa türüne hiç bakılmadıysa o türde taşma olmadığı söylenemiyor; pratikte en çok taşma, kimsenin ölçmediği detay sayfalarından çıkıyor.
Taşmaya en sık yol açan altı yapı
| Neden | Nasıl belli oluyor | Çözüm |
|---|---|---|
| Sabit piksel genişliği verilmiş kutu | Dar ekranda kutu ekranı aşıyor | Genişlik esnek tanımlanır, üst sınır konur |
| Geniş tablo | Tablo satırları ekranın dışına taşıyor | Tablo kendi çerçevesi içinde yana kaydırılır |
| Bölünemeyen uzun metin | Uzun adres ya da kod parçası satıra sığmıyor | Kelime kırma kuralı verilir |
| Ölçüsü verilmemiş görsel | Görsel yüklendiğinde yerleşim kayıyor | Her görsele genişlik ve yükseklik yazılır, üst sınır konur |
| Tam ekran genişliği artı iç boşluk | Toplam genişlik ekranı aşıyor | Boşluk hesaba katılarak genişlik tanımlanır |
| Negatif boşluk ve kaydırılmış bölüm | Bölüm bir kenardan dışarı çıkıyor | Taşan eksen kapatılır, boşluk yeniden kurulur |
Listedeki dördüncü satır küçük görünüp etkisi büyük olanı: ölçüsü belirtilmeyen görsel yüklendiği anda sayfayı aşağı itiyor, ziyaretçi okuduğu satırı kaybediyor ve bu kayma, ölçülen temel sayfa deneyimi metriklerinden biri olarak sitenin aleyhine yazılıyor.
Aynı denetimde ölçülen diğer iki şey
Taşma ölçümü yalnız yapılmıyor; aynı turda iki ölçüm daha alınıyor.
Erişilebilirlik. Sayfada otomatik erişilebilirlik taraması çalıştırılıyor ve ihlal sayısı sıfıra indiriliyor. Bu yalnızca engelli kullanıcıyla ilgili bir konu değil: etiketi olmayan form alanı, görünmeyen odak halkası ve düşük metin kontrastı herkesi yavaşlatıyor. Otomatik tarama her şeyi yakalamıyor, ama yakaladıklarının tamamı gerçek ve düzeltilebilir bulgular.
Ağırlık ve istek sayısı. Sayfanın gerçek ağ yanıtları üzerinden kaç kilobayt indirdiği ve kaç istek yaptığı ölçülüyor, mobil bağlantı varsayılıyor. Bir sitenin yavaş olmasının nedeni genellikle içeriği değil, içeriğin etrafına yıllar içinde eklenmiş ve kimsenin kaldırmaya cesaret edemediği eklentiler oluyor.
Kendi markalarımızda ana sayfa üzerinde aldığımız ölçümler (1 Ekim 2026, 390 piksel mobil görünüm) şöyleydi: webteknogaraj.com 0,94 MB ve 39 istek; webteknoservis.com 1,30 MB ve 62 istek; kavservis.com.tr 2,20 MB ve 94 istek; digiwss.com 0,86 MB ve 29 istek. Dört sitede de 320, 360, 390, 768 ve 1440 pikselde yatay taşma yoktu. Bu sayıları yayınlıyoruz, çünkü aynı ölçümü siz de tekrarlayabilirsiniz; ölçülmemiş bir rakam yazmak yerine ölçülenin tarihini vermeyi tercih ediyoruz.
Düzeltme sırası neden önemli
Bulgular bulunduğu sırayla değil, etkisine göre kapatılıyor. İzlediğimiz sıra şu: önce her sayfa türünde görülen şablon kaynaklı taşmalar, sonra erişilebilirlik ihlalleri, en sonunda ağırlık. Nedeni basit: şablonda bulunan tek bir hata onlarca sayfayı birden düzeltiyor, oysa tek bir sayfanın görselini küçültmek yalnızca o sayfayı etkiliyor.
Her kapanan maddeden sonra aynı ölçüm tekrarlanıyor ve önceki değerle yan yana yazılıyor. Yeniden ölçülmemiş bir düzeltme, yapılmış sayılmıyor; pratikte en sık rastlanan durum, bir yerde kapatılan taşmanın başka bir genişlikte yeniden açılması oluyor.
Kısa kontrol listesi
- Taşma beş genişlikte de ölçüldü mü, yalnızca telefona bakılarak mı karar verildi?
- Ölçüm sayfa türü başına mı yapıldı, yoksa yalnızca ana sayfada mı?
- Geniş tablolar kendi çerçevesinde kaydırılıyor mu?
- Her görselde genişlik ve yükseklik yazıyor mu?
- Erişilebilirlik ihlali sayısı ölçüldü mü?
- Ağırlık ve istek sayısı mobil görünümde mi alındı?
- Düzeltme sonrası aynı ölçüm tekrarlanıp önce-sonra değeri yazıldı mı?
DigiWSS teknik denetimde bu ölçümleri alıp her bulgunun yanına nasıl ölçüldüğünü ve ne yapıldığını yazıyor; kapanan her madde yeniden ölçülüyor.