Sitem telefonda bozuk görünüyor: sebepleri ve çözümü

Bilgisayarda açtığında her şey yerli yerinde. Telefonda açtığında yazılar minicik, düğmeler birbirine yapışık, sayfa sağa sola kayıyor. Türkiye'de küçük işletme sitelerine gelen ziyaretin büyük çoğunluğu telefondan geldiği için bu "ufak bir görüntü meselesi" değil: müşteri sitenin bozuk hâlini görüyor, düzgün hâlini hiç görmüyor.

Önce bir ayrım yapalım. "Telefonda bozuk" cümlesi aslında iki ayrı şikâyeti birden anlatıyor:

• Sayfa geç açılıyor. Bu bir hız sorunu; sebepleri ve ölçüsü ayrı. Web sitesi hızı yazısında ele aldık.
• Sayfa açılıyor ama yerleşim dağılıyor. Bu yazı onu anlatıyor.

İkisinin sebepleri de çözümleri de birbirinden bağımsız. Aşağıdakilerin hepsi yerleşimle ilgili.

Önce doğru testi yap

Sorunu tarif edemeden düzeltmeye çalışmak en çok zaman kaybettiren yol. Üç test yetiyor, üçü de ücretsiz.

1. Kendi telefonun

En dürüst test bu. Siteyi telefonunda aç ve dört şeye bak: yakınlaştırmadan okuyabiliyor musun, sağa sola kaydırman gerekiyor mu, telefon numarasına tek dokunuşla arama başlıyor mu, menü düğmesi açılıyor mu. Siteyi gizli sekmede açman önemli — kendi tarayıcın daha önce kapattığın pencereleri hatırlıyor, ziyaretçininki hatırlamıyor.

2. Bilgisayarda pencereyi daralt

Masaüstü tarayıcında siteyi aç, pencerenin kenarından tutup yavaşça daralt. Düzgün kurulmuş bir site belli genişliklerde kendini yeniden diziyor: yan yana duran üç kutu alt alta iniyor, menü tek düğmeye toplanıyor. Hiçbir şey değişmiyor ve altta yatay bir kaydırma çubuğu beliriyorsa sorunu bulmuşsun demektir. Çubuğun hangi bölümde çıktığına dikkat et; genelde sayfanın tamamı değil, tek bir öğe taşıyor.

3. Tarayıcının cihaz görünümü

Chrome'da sayfaya sağ tıklayıp "İncele" dediğinde açılan panelde bir telefon simgesi var; siteyi seçtiğin ekran ölçüsünde gösteriyor. Gerçek telefonun yerini tutmuyor ama deneme yanılmayı hızlandırıyor.

Bir uyarı: yıllardır tavsiye edilen Google'ın ayrı mobil uyumluluk test aracı artık yok, Search Console'daki eski "Mobil Kullanılabilirlik" raporu da kaldırıldı. Hâlâ o araca yönlendiren bir yazıya denk gelirsen o yazı güncel değil demektir. Google tarafında kalan ölçüm Core Web Vitals raporu; o da yerleşimi değil, hızı ve okurken içeriğin yerinden oynamasını ölçüyor.

Yedi tipik sebep

1. Viewport etiketi eksik

Belirti: Telefonda site, bilgisayardaki hâlinin küçültülmüş fotoğrafı gibi duruyor. Yerleşim bozulmamış, her şey orantılı biçimde ufak; okumak için iki parmakla yakınlaştırıyorsun.

Sebep: Sayfanın en üstünde bulunması gereken tek satır eksik: <meta name="viewport">. Bu satır tarayıcıya "sayfayı ekranın gerçek genişliğine göre çiz" diyor. Yoksa telefon, sayfayı bir masaüstü ekranı varsayıp küçültüyor.

Düzeltmesi: Şablon dosyasına erişimin varsa bir dakikalık iş. Ama beklenmedik bir yan etkisi var: satırı ekler eklemez sayfa gerçek genişliğe yayılıyor ve altındaki asıl sorun ortaya çıkıyor — yani bir sonraki madde.

2. Sabit genişlikli tasarım

Belirti: Sağa sola kaydırma. Yazının sağ tarafı ekranın dışında kalıyor, başlıklar kesiliyor.

Sebep: Tasarım tek bir genişliğe göre çizilmiş; eski sitelerin çoğunda 960 ya da 1000 piksel. O ölçü telefonda yok. Sayfa daralmıyor, sadece taşıyor.

Düzeltmesi: Bu tek satırla kapanmıyor. Kutuların ekran genişliğine göre esnemesi ve belli bir daralmadan sonra alt alta inmesi gerekiyor. Sitenin yaşına ve karmaşıklığına göre bu, tasarımı baştan kurmak anlamına gelebiliyor.

3. Yazılar çok küçük

Belirti: Yerleşim yerinde ama okumak için sürekli yakınlaştırıyorsun.

Sebep: Gövde yazısı masaüstü ekranına göre seçilmiş. Telefonda rahat okunan alt sınır kabaca 16 piksel; altına inen yazı, telefonu normalde tuttuğun mesafeden okunmuyor.

Test: Telefonu her zamanki gibi tut ve yakınlaştırmadan bir paragraf oku. Gözünü kısıyorsan yazı küçüktür. Aynı testte renge de bak: açık gri zemine açık gri yazı, ölçü doğru olsa bile güneşte okunmuyor.

Düzeltmesi: Stil dosyasına erişimin varsa kolay. Yalnız yazıyı büyütmek yerleşimi bozabiliyor; büyüyen metin sabit yükseklikli kutulardan taşıyor. Değişiklikten sonra sayfayı baştan sona gez.

4. Sığmayan tablo ve görseller

Belirti: Sayfanın çoğu düzgün ama tek bir bölümde yatay kaydırma var. Genelde fiyat listesi, teknik özellik tablosu ya da geniş bir fotoğraf.

Düzeltmesi: Görsel tarafı kolay; görselin bulunduğu kutudan taşmaması tek bir kuralla sağlanıyor. Tablo tarafı daha zahmetli. İki yol var: tabloyu kendi içinde kaydırılabilir bir kutuya almak (hızlı çözüm) ya da telefonda tabloyu satır satır kartlara çevirmek (doğru çözüm, ama emek istiyor). Dört sütundan geniş hiçbir tablo telefonda rahat okunmuyor — çözüm aramadan önce sütun sayısını azaltmayı da düşün.

5. Düğmeler parmakla kullanılamıyor

Belirti: Telefon numarasına basıyorsun, yanındaki e-posta bağlantısı açılıyor. Menüde bir maddeye basmak üç denemeyi buluyor.

Sebep: Bağlantılar fareyle tıklanacak ölçüde bırakılmış. Fare imleci bir nokta, parmak ucu ise aşağı yukarı bir tırnak genişliğinde. Dokunulacak her hedefin hem yeterli alanı hem de komşusuyla arasında boşluğu olmalı.

Test: Gözünle değil, başparmağınla dene. Telefonu tek elle tutup sayfayı baştan sona kullan.

Düzeltmesi: Orta zorlukta. Dokunma alanlarını büyütmek çoğu zaman satır aralarını ve bölüm yüksekliklerini de değiştiriyor.

6. Otomatik açılan pencereler

Belirti: Site açılır açılmaz ekranı bir pencere kaplıyor: çerez bildirimi, "bültenimize katıl" kutusu, sohbet balonu, uygulama indirme çağrısı. Bilgisayarda köşede duran şey telefonda ekranın yarısını yiyor, kapatma çarpısı bazen ekranın dışında kalıyor.

Google bunu ayrı bir sorun olarak sayıyor: içeriği ziyaretçiden gizleyen araya girici pencereler mobil sonuçlarda sitenin aleyhine işliyor. Ama asıl zarar sıralamada değil — kapatamadığı bir pencereyle karşılaşan kişi geri düğmesine basıyor.

Düzeltmesi: Genelde listenin en kolayı. Bu pencerelerin çoğu sonradan eklenmiş araçlar; kapatmak bir ayar meselesi. Çerez bildirimi kalacaksa ekranı kaplayan kutu yerine küçük bir şerit olmalı.

7. Menü telefonda kayboluyor

Belirti: Üstteki menü ya alt satıra taşıp sayfayı aşağı itiyor ya da tek bir düğmeye toplanıyor fakat basınca açılmıyor.

Sebep: Menü çoğu sitede tasarımın en kırılgan parçası; ekran daralınca davranışını değiştirmesi gerekiyor ve eski sitelerde en sık bozulan yer burası.

Düzeltmesi: Menü düğmesi basınca açılmıyorsa sorun genelde küçük bir hatadır ve düzeltilebilir. Ekran daraldığında menü hiç uyum sağlamıyorsa iş ikinci maddeye bağlanıyor.

Sekizinci bir madde daha var ama o yerleşim değil hız sorunu: işlenmemiş, ağır fotoğraflar. Telefonla çekilip olduğu gibi yüklenmiş 5 MB'lık bir kare, mobil veriyle giren ziyaretçiyi sayfa daha görünmeden kaybettiriyor. Yerleşim tarafında da bir etkisi var: ölçüsü belirtilmemiş bir görsel yüklendiğinde altındaki metni aşağı itiyor, okuduğun satır yerinden oynuyor. Ayrıntısı hız yazısında.

Hangisi siteyi yenilemeden düzelir?

Ne zaman yama yapmak yerine baştan kurmak gerekiyor?

Kaba bir ölçü: listedeki maddelerden ikiden fazlası aynı sitede varsa ve bunlardan biri sabit genişlikli tasarımsa, tek tek yama yapmak yeni bir site kurmaktan uzun sürüyor. Sebebi şu: sabit genişliği düzeltmek zaten yerleşimi baştan kurmak demek. Yerleşim değişince yazı ölçüleri, düğme boşlukları ve menü davranışı da yeniden ele alınıyor — yani listenin geri kalanı o işin içinde çözülüyor.

Buna karşılık tek bir sorun varsa — diyelim yalnız tablo taşıyor ya da yalnız çerez penceresi ekranı kaplıyor — siteyi yenilemek gereksiz bir masraf. Eski bir siteyi yenilemenin gerçekten gerekip gerekmediğini ayrı bir karar listesinde topladık.

Yapmaman gereken şey: ayrı bir "mobil site"

Bir dönem yaygın bir çözüm vardı: bilgisayar için bir site, telefon için m.siteadi.com diye ikinci bir site. Bugün bu yol iki sebeple yanlış. Birincisi, Google siteleri artık mobil sürümüne bakarak değerlendiriyor; içeriği eksik bırakılmış bir mobil sürüm sitenin tamamını aşağı çekiyor. İkincisi, iki ayrı site iki ayrı bakım demek — fiyatı bir yerde güncelleyip diğerinde unutuyorsun.

Doğru yol tek site: aynı adres, aynı içerik, ekran genişliğine göre kendini dizen bir tasarım.

İyziWeb ile kurulan siteler tek bir tasarımla her ekran genişliğine uyacak biçimde çıkıyor; telefon için ayrı bir sürüm ya da sonradan yapılacak bir mobil düzeltme yok. Yine de kural değişmiyor: kurduktan sonra siteyi kendi telefonundan bir kez aç ve baştan sona gez.

Kısacası

Telefondaki bozukluğun sebebi neredeyse her zaman görülebilir bir şey; tahmin etmeye gerek yok. Siteyi telefonundan aç, sonra bilgisayarda pencereyi daralt, hangi maddede takıldığını not et. Yedi maddeden hangisi olduğunu bulduğun anda iş "biri baksın" olmaktan çıkıp tarif edilebilir bir işe dönüşüyor — hem kendin denerken hem birinden yardım isterken.

Telefonda düzgün açılan bir site kur