Avukat Web Sitesi Mobil Uyumluluk Neden Şart?

Mobil Trafik Artık Çoğunluk

\n

TÜİK'in 2025 Hanehalkı Bilişim Teknolojileri Araştırması'na göre Türkiye'de internet erişiminin birincil cihazı cep telefonu. İnternet kullanım oranı 16-74 yaş grubunda yüzde 90,9'a ulaştı. Avukat aramalarının büyük çoğunluğu mobil cihazlardan yapılıyor — "boşanma avukatı", "iş kazası tazminat avukat" gibi aramalar genellikle acil ihtiyaç anında, telefon üzerinden gerçekleşiyor.

\n

Google, 2019'dan bu yana mobile-first indexing uyguluyor. Sitenizin masaüstü versiyonu ne kadar iyi olursa olsun, Google sıralamanızı mobil versiyona göre belirliyor. Mobil uyumsuz bir avukat web sitesi hem ziyaretçi kaybeder hem de Google'da sıralama düşürür.

\n\n

Mobil Uyumluluk Neden Vazgeçilmez?

\n\n\n\n\n\n\n\n\n\n\n\n\n

Neden	Veri/Açıklama
Google mobile-first indexing	Sıralama mobil versiyona göre belirlenir
Mobil kullanıcı sabırsızlığı	3 saniyede açılmayan siteyi yüzde 53 terk ediyor
Avukat aramalarının doğası	Acil hukuki ihtiyaçlarda ilk refleks telefonu açmak
Google "mobile-friendly" etiketi	Uyumlu siteler arama sonuçlarında etiketleniyor
Core Web Vitals ölçümü	Google performans metriklerini mobilde ölçer
Dönüşüm oranı	Mobil uyumsuz sitelerde iletişim formu doldurma oranı düşük

\n\n

Responsive Tasarım: Tek Site, Tüm Ekranlar

\n

Responsive (duyarlı) tasarım, web sitesinin ekran boyutuna göre otomatik uyum sağlamasıdır. Masaüstü, tablet ve telefonda aynı içerik farklı düzenlerle gösterilir. Google'ın resmi önerisi responsive tasarımdır — ayrı mobil site (m.siteniz.com) veya dinamik sunum yerine tek URL yapısında responsive tercih edilmelidir.

\n\n

Responsive Tasarımın Temel İlkeleri

\n

\n
• Esnek grid sistemi: Piksel yerine yüzde bazlı genişlikler. Sütun sayısı ekrana göre değişir — masaüstünde 3 sütun, tablette 2, telefonda 1.
\n
• Esnek görseller: max-width: 100% ile görseller kapsayıcıdan taşmaz. Farklı ekranlar için farklı boyutlarda görsel sunma (srcset).
\n
• CSS media queries: Ekran genişliğine göre farklı stil kuralları. Yaygın kırılma noktaları: 768px (tablet), 480px (telefon).
\n
• Viewport meta etiketi: <meta name="viewport" content="width=device-width, initial-scale=1"> — bu etiket olmadan mobil tarayıcı sayfayı masaüstü genişliğinde render eder.
\n

\n\n

Mobil Tasarımda Dikkat Edilmesi Gereken 12 Nokta

\n\n

1. Dokunmatik Hedef Boyutu

\n

Butonlar ve tıklanabilir alanlar minimum 48x48 piksel olmalı. Parmak ucu yaklaşık 10mm genişliğinde — 30px'lik bir buton parmağa küçük gelir ve yanlış tıklamaya sebep olur. Google bunu Core Web Vitals (INP) kapsamında da değerlendiriyor.

\n\n

2. Telefon Numarası Tıklanabilir Olmalı

\n

Mobil kullanıcı telefon numarasını görünce tek dokunuşla aramak ister. tel: linki ile numarayı tıklanabilir yapın. Bu küçük detay mobilde dönüşüm oranını ciddi şekilde artırır.

\n\n

3. Hamburger Menü ve Navigasyon

\n

Masaüstündeki yatay menü mobilde sığmaz. Hamburger menü (üç çizgi ikonu) mobil standart. Ama menü içeriğini 5-7 ana maddeyle sınırlayın — 15 maddeli menü mobilde kullanışsız.

\n\n

4. Font Boyutu

\n

Gövde metni minimum 16px. Daha küçük font mobilde okunmaz ve kullanıcı zoom yapmak zorunda kalır — kötü deneyim. Başlıklar orantılı büyük ama ekranı taşmayacak boyutta.

\n\n

5. Form Alanları Tam Genişlik

\n

İletişim formu alanları mobilde yüzde 100 genişlik kullanmalı. Yan yana iki alan mobilde üst üste gelmeli. type="tel" sayısal klavye açar, type="email" e-posta klavyesi açar — bu input türleri mobil deneyimi doğrudan iyileştirir. İletişim formu optimizasyonu rehberimiz detayları içeriyor.

\n\n

6. Görseller ve CLS

\n

Görsellere HTML'de width ve height attribute'ları ekleyin. Bu, tarayıcının alanı önceden ayırmasını sağlar ve sayfa yüklenirken içerik kaymasını (CLS) önler. Lazy loading ile ekran altındaki görselleri ertelemeyin.

\n\n

7. Pop-up ve Interstitial Dikkat

\n

Google, mobilde ekranın büyük bölümünü kaplayan pop-up'ları (interstitial) olumsuz değerlendiriyor ve sıralama düşürebilir. Cookie onay banner'ı gibi zorunlu pop-up'lar istisna ama tanıtım amaçlı tam ekran pop-up kaçının.

\n\n

8. Yükleme Hızı

\n

Mobil cihazlarda işlemci gücü ve bağlantı hızı masaüstüne göre sınırlı. Masaüstünde 1 saniyede yüklenen site mobilde 3 saniye sürebilir. Görsel optimizasyonu (AVIF/WebP), JavaScript azaltma ve GZIP sıkıştırma mobilde daha da kritik. Hız optimizasyonu rehberimiz tüm detayları içeriyor.

\n\n

9. Yatay Kaydırma Olmamalı

\n

Mobilde yatay kaydırma çubuğu görünüyorsa tasarım bozuk demektir. Genellikle sebep: sabit genişlikli tablo, taşan görsel veya width değeri yüzde yerine piksel olarak tanımlanmış element.

\n\n

10. Sticky Header Dikkat

\n

Sabit header (sticky/fixed) mobilde ekran alanını daraltır. Telefon ekranı zaten küçük — 60-80px'lik sabit header içerik alanının yüzde 15-20'sini yer. Sticky header kullanacaksanız scroll-down'da gizlenip scroll-up'da görünen "smart sticky" tercih edin.

\n\n

11. Tablo Görünümü

\n

Geniş tablolar mobilde taşar. Çözüm: responsive tablo tasarımı — dar ekranda tablonun yatay kaydırılabilir olması veya satır bazlı kart görünümüne dönüşmesi.

\n\n

12. Harita Embed

\n

Google Maps embed mobilde tam genişlik olmalı ve dokunarak yakınlaştırılabilmeli. İki parmakla harita üzerinde gezinme ile sayfa kaydırma çakışmamalı — pointer-events: none ile haritayı kilitleyip üzerine tıklayınca aktifleştirmek iyi bir çözüm.

\n\n

Mobil Uyumluluk Test Araçları

\n\n\n\n\n\n\n\n\n\n\n\n

Araç	Ne Yapar?	Ücretsiz
Google Mobile-Friendly Test	Sayfanızın mobil uyumlu olup olmadığını kontrol eder	Evet
Google PageSpeed Insights	Mobil performans puanı ve iyileştirme önerileri	Evet
Chrome DevTools	Farklı cihaz boyutlarını simüle eder	Evet
BrowserStack	Gerçek cihazlarda test (iPhone, Samsung vb.)	Sınırlı ücretsiz
Responsinator	Hızlı görsel kontrol — farklı cihaz boyutları	Evet

\n

En temel test: kendi telefonunuzdan sitenizi açın. Rahatça okuyabiliyor, menüyü kullanabiliyor, formu doldurabiliyor musunuz? Eğer zoom yapmanız gerekiyorsa site mobil uyumlu değil.

\n\n

Mobil Uyumluluk Kontrol Listesi

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Kontrol	Durum	Öncelik
Viewport meta etiketi var	Var / Yok	Kritik
Responsive tasarım (CSS media queries)	Var / Yok	Kritik
Butonlar minimum 48x48px	Var / Yok	Yüksek
Telefon numarası tıklanabilir	Var / Yok	Yüksek
Font boyutu minimum 16px	Var / Yok	Yüksek
Form alanları tam genişlik	Var / Yok	Yüksek
Yatay kaydırma yok	Var / Yok	Yüksek
Görsellerde width/height tanımlı	Var / Yok	Orta
Tam ekran pop-up yok	Var / Yok	Orta
PageSpeed mobil puanı 70+	Var / Yok	Yüksek

\n\n

Sıkça Sorulan Sorular

\n\n

Ayrı bir mobil site (m.site.com) yapmalı mıyım?

\n

Hayır. Google'ın resmi önerisi responsive tasarım — tek URL'de tüm cihazlara uyum. Ayrı mobil site bakım maliyetini ikiye katlar, SEO otoritesini böler ve senkronizasyon sorunları yaratır.

\n\n

WordPress temam mobil uyumlu değilse ne yapmalıyım?

\n

Tema değiştirin. 2026'da mobil uyumsuz bir WordPress teması kullanmak için hiçbir geçerli sebep yok. Modern temalar varsayılan olarak responsive gelir. Tema değişikliği sonrası içeriklerinizi kontrol edin — bazı özel düzenlemeler yeni temada bozulabilir.

\n\n

AMP (Accelerated Mobile Pages) kullanmalı mıyım?

\n

Artık gerekli değil. Google 2021'de AMP'ı üst sırada gösterme zorunluluğunu kaldırdı. İyi optimize edilmiş responsive bir site AMP'sız da mükemmel mobil performans sağlar. AMP, ek bakım yükü ve tasarım kısıtlamaları getirir — çoğu avukat sitesi için gereksiz.

\n\n

Mobil uyumluluk SEO sıralamamı ne kadar etkiler?

\n

Doğrudan etkiler. Google mobile-first indexing kullandığı için sitenizin mobil versiyonu sıralama belirleyicisi. Mobil uyumsuz site Google'da dezavantajlı. Core Web Vitals metrikleri mobilde ölçülür. SEO rehberimiz tüm sıralama faktörlerini detaylı açıklıyor.