Web Sitem Mobilde Bozuk Görünüyor: Sağa Kayma, Taşan Yazı ve Çözümleri

Web siteniz mobilde bozuk görünüyorsa, sebep büyük ihtimalle şunlardan biri: sayfada ekrandan geniş bir öğe var (görsel, tablo, harita ya da video), sayfa düzenleyicideki mobil ayarlar hiç yapılmamış, temanın kodunda sabit genişlikler kullanılmış ya da sayfada mobil görünüm etiketi (viewport) eksik. İlk üçü birkaç ayarla düzelir. Dördüncüsü ve sitenin genel olarak mobile göre kurulmamış olması ise genellikle yenileme işaretidir.

Mesele kozmetik değil. Türkiye'de web trafiğinin büyük kısmı telefondan geliyor ve Google siteleri öncelikle mobil sürümlerine bakarak değerlendiriyor. Mobilde bozuk bir site, ziyaretçinin çoğuna bozuk bir site demek.

Belirtiyi tanımlayın

Sorunu tarif etmek çözümün yarısı. Telefonunuzda siteyi açın ve hangisini gördüğünüzü not edin:

• Sayfa yana kayıyor, sağda boş bir şerit var.
• Yazılar ekrandan taşıyor ya da çok küçük.
• Görseller kesiliyor veya üst üste biniyor.
• Menü düğmesi açılmıyor ya da menü ekranın yarısında kalıyor.
• Butonlar birbirine çok yakın, yanlış olana dokunuluyor.
• Bir açılır pencere ekranı kaplıyor ve kapatılamıyor.
• Site yalnızca iPhone'da ya da yalnızca bir Android tarayıcıda bozuk.

Her belirtinin sebebi farklı. Aşağıda en sık olanlarla başlıyoruz.

Sayfa yana kayıyorsa: ekrandan geniş bir öğe var

En yaygın belirti bu. Sayfadaki tek bir öğe ekranın genişliğini aşınca, tüm sayfa yana kaymaya başlar. Tipik suçlular:

• Genişliği piksel olarak sabitlenmiş bir görsel (örneğin 1200 piksel).
• Çok sütunlu bir tablo. Fiyat listeleri ve teknik tablolar en sık rastlananlar.
• Google Haritalar ya da YouTube'dan kopyalanan gömme kodu. Bu kodlar genellikle sabit genişlik ve yükseklikle gelir.
• Bölünemeyen uzun bir kelime: e-posta adresi, uzun bir web adresi, IBAN numarası.
• Sayfa düzenleyicide bir bölüme verilmiş sabit genişlik ya da negatif kenar boşluğu.

Hangi öğenin taştığını bulmak için Chrome'da sayfayı açın, F12 ile geliştirici araçlarını açın ve sol üstteki telefon simgesine basarak mobil görünüme geçin. Sayfayı aşağı kaydırırken sağa taşan öğeyi genellikle gözle görürsünüz. Öğeye sağ tıklayıp 'İncele' dediğinizde hangi bölüm olduğu ortaya çıkar.

Çözüm öğeye göre değişir. Görsellerde en fazla genişliğin yüzde 100 olması, tabloları yatay kaydırılabilen bir kutuya almak, gömme kodlarında genişliği yüzde 100 yapmak ve uzun kelimelerin satır sonunda bölünmesine izin vermek. Bunlar temanın ya da sayfa düzenleyicinin ayarlarından ya da birkaç satır CSS ile yapılır.

Sayfa düzenleyicinin mobil ayarları

Elementor, Divi ve WPBakery gibi sayfa düzenleyiciler her bölüm için masaüstü, tablet ve mobil ayarlarını ayrı tutar. Sayfa masaüstünde tasarlanıp mobil görünüme hiç bakılmadıysa, 72 punto bir başlık telefonda da 72 punto kalır, dört sütunlu bir düzen dört dar sütuna sıkışır.

Düzenleyicinin alt kısmındaki cihaz simgesinden mobil görünüme geçin ve her bölümü kontrol edin. Sık yapılan düzeltmeler:

• Başlık yazı boyutlarını mobilde küçültmek.
• Yan yana sütunları mobilde alt alta dizmek.
• Masaüstündeki geniş iç boşlukları mobilde azaltmak.
• Mobilde gereksiz bölümleri gizlemek yerine sadeleştirmek.

Viewport etiketi ve eski temalar

Sayfanın kaynak kodunda name='viewport' içeren bir satır yoksa, telefon sayfayı masaüstü genişliğinde çizip küçültür. Her şey minicik görünür ve kullanıcı yakınlaştırmak zorunda kalır. Sayfaya sağ tıklayıp kaynağı görüntüleyin ve viewport kelimesini arayın.

Etiket yoksa, site büyük ihtimalle mobil düşünülmeden yapılmış eski bir temada çalışıyor. Etiketi eklemek tek başına yetmez; içerik bu sefer dar ekranda karmakarışık dizilir. Bu durumda sorun tek tek düzeltmelerle değil, temanın ya da sitenin yenilenmesiyle çözülür. Yenileme kararını vermek için sitenizi yenileme zamanı geldi mi yazısındaki işaretlere bakabilirsiniz.

Yalnızca bir cihazda bozuksa

• Önbellek eklentisi mobil ve masaüstü için aynı sayfayı sunuyorsa, mobil için ayrı ayar yapılmış bir tema yanlış sürümü gösterebilir. Önbelleği temizleyip tekrar deneyin.
• iPhone'da ekranın tamamını kaplaması gereken bir bölüm adres çubuğunun altında kalıyorsa, sebep Safari'nin ekran yüksekliğini farklı hesaplaması. Temanın güncel sürümü çoğu zaman bunu düzeltir.
• Samsung Internet'in karanlık modu sitenin renklerini kendi kafasına göre değiştirebilir. Siteniz karanlık mod desteklemiyorsa bu tarayıcıda renkler tuhaf görünebilir.

Menü açılmıyor, butona dokunulamıyor

Mobil menü JavaScript ile çalışır. Bir eklentinin ya da optimizasyon aracının JavaScript dosyalarını birleştirip ertelemesi, menüyü bozan en sık sebep. Optimizasyon eklentisinde JavaScript ayarlarını geçici olarak kapatıp deneyin.

Butonların birbirine yakınlığı ise bir ölçü meselesi. Parmakla dokunulan hedeflerin en az 44-48 piksel boyunda ve aralarında boşluk olacak şekilde yerleşmesi yanlış dokunmayı önler.

Düzelttikten sonra nasıl test edilir?

Google'ın eski Mobil Uyumluluk Testi aracı ve Search Console'daki mobil kullanılabilirlik raporu 2023 sonunda kaldırıldı. Bugün en pratik yol üç katmanlı:

• Chrome geliştirici araçlarındaki mobil görünümde farklı ekran genişliklerini denemek (360, 390 ve 430 piksel iyi bir başlangıç).
• PageSpeed Insights'ta mobil sekmesini çalıştırmak.
• Gerçek telefonlarda denemek: en az bir iPhone ve bir Android.

Test yöntemlerini mobil uyumlu site testi yazısında ayrıntılı anlattık. Mobilde yavaş açılma da ayrı bir sorun; onun için yavaş web sitesi nasıl hızlandırılır rehberine bakın.

Sitenizin tek tek düzeltmelerle mi kurtulacağını yoksa yenilenmesi mi gerektiğini birlikte değerlendirebiliriz. Yaptığımız sitelerden örnekleri portfolyomuzda telefonunuzdan açıp kendiniz deneyebilirsiniz. Kurumsal web sitesi paketimizde mobil uyumlu tasarım, kapsamın standart bir parçası.