Mobil Uyumlu Web Tasarımı: Neden Artık Tercih Değil Zorunluluk?

2015 yılında Google, mobil sorgular masaüstü sorgularını geçti. O günden bu yana fark her yıl açıldı. Türkiye'de 2025 itibarıyla internet trafiğinin %68-72'si mobil cihazlardan geliyor.

Bu rakam, web sitesi yaptırırken "mobil uyumlu" kaygısını lüks olmaktan çıkarıp temel gereklilik haline getiriyor. Ama asıl soru şu: mobil uyumlu olmak ne demek, ve neden çoğu site bunu hâlâ doğru yapamıyor?

"Responsive" ile "Mobile-First" Arasındaki Fark

İki kavram sıkça birbirine karıştırılıyor.

Responsive tasarım, masaüstü için yapılan bir siteye sonradan CSS ile "mobil görünüm" eklemek anlamına gelir. Teknik olarak doğru, pratikte yetersiz. Çünkü mobil cihazlarda yüklenmesi gerekmeyen büyük görseller, masaüstü JavaScript ve fontlar hâlâ indirilir — sadece gizlenir.

Mobile-first tasarım, tam tersine önce küçük ekran için düşünüp büyük ekrana doğru genişletmek demektir. Yük önce mobil için optimize edilir, masaüstü bu temel üzerine inşa edilir.

Bu fark, pratik performans sonuçlarına doğrudan yansır.

---

Google'ın Mobile-First Indexing Politikası

2023'ten itibaren Google, tüm web sitelerini artık yalnızca mobil versiyonlarıyla indekslemeye başladı. Bu "Mobile-First Indexing" olarak adlandırılıyor.

Ne anlama geliyor? Google'ın bot'u sitenizi ziyaret ettiğinde artık masaüstü versiyonu değil, mobil versiyonu esas alıyor. İçerik, başlıklar, linkler, meta veriler — bunların tümü mobil versiyondaki haliyle değerlendiriliyor.

Bu değişikliğin pratik sonuçları:

• Masaüstünde göründüğü halde mobilde gizlenen içerik, SEO değeri taşımıyor
• Masaüstünde farklı, mobilde farklı başlık/açıklama kullanan siteler tutarsızlık puanı alıyor
• Mobil yükleme süresi, doğrudan sıralama faktörü

Türkiye'deki pek çok kurumsal site için bu değişiklik ciddi bir risk: "Eski siteyi güncelleyin" diyoruz ama değişikliğin ciddiyeti hâlâ yeterince anlaşılmış değil.

---

Mobil Tasarımda Sık Yapılan Hatalar

1. Yazı Boyutu Hataları

Mobil ekranda okunabilir minimum yazı boyutu 16px. 12-13px'lik yazılar masaüstünde ince ve şık durabilir, ama mobilde ziyaretçiyi zoom yapmaya ya da çıkmaya zorlar. Google da küçük yazıları kullanılabilirlik sorunu olarak değerlendiriyor.

2. Dokunma Alanı Sorunları

Parmakla tıklanan bir buton veya link için minimum 44×44 piksel alan öneriliyor. Masaüstü için tasarlanmış 20px yüksekliğindeki nav linkleri veya küçük ikonlar, mobilde yanlış tıklamalara neden olur.

Özellikle form alanlarında bu kritik: küçük input'lar, yanlış veri girişine ve düşük dönüşüme yol açar.

3. Viewport Meta Etiketinin Yanlış Kullanımı

<!-- Doğru -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Yanlış: kullanıcı zoom yapamıyor -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

user-scalable=no erişilebilirlik ihlalidir ve Google'da ceza puanı alır.

4. Mobilde Yavaş Açılan Hero Görseller

Masaüstü için 2400×1600 olarak hazırlanan hero görseli, mobilde de aynı şekilde yükleniyor. Çözüm: srcset veya Next.js'in <Image> bileşeni ile cihaza özel boyutlandırma.

<img
  src="hero-mobile.webp"
  srcset="hero-mobile.webp 768w, hero-tablet.webp 1024w, hero-desktop.webp 1440w"
  sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 1440px"
  alt="Hero görseli"
>

5. Yatay Kaydırma Sorunu

Içerik ekran genişliğini aşıyor ve kullanıcı yatay kaydırmak zorunda kalıyor. Genellikle sabit genişlikte (width: 1200px) tanımlanmış alanlar veya overflow: hidden ile gizlenmiş içerik buna yol açar.

---

Mobile-First Tasarım Prensipleri

İçerik Önceliği

Mobil ekranda her şeyi göstermek zorunda değilsiniz. Asıl soruyu sorun: ziyaretçi mobil cihazdan sitenize girdiğinde ne yapmak istiyor?

Genellikle: telefon araması, yol tarifi, fiyat öğrenme, randevu alma.

Bu aksiyonlara giden yolu mobil için önceliklendirin. Masaüstü için geçerli olan "tüm detaylar bir arada" yaklaşımı, mobil için geçerli değil.

Görsel Hiyerarşi

Küçük ekranda göz hareketi farklıdır. Kullanıcılar dikey olarak tarar. Bu nedenle:

• Başlıklar net ve kısa olmalı
• Paragraflar kısa tutulmalı (3-4 cümle)
• CTA butonları parmak dostu ve ekranda belirgin olmalı
• Boşluk (whitespace) masaüstüne göre daha fazla

Yazı Tipi ve Renk Kontrastı

Mobil ekranlarda güneş ışığı, parlaklık değişkenlikleri gibi faktörler okunabilirliği etkiler. Yeterli kontrast oranı (WCAG AA: 4.5:1) sağlamak hem erişilebilirlik hem performans skoru açısından önemli.

---

Hızlı Kontrol: Siteniz Mobil Testini Geçiyor mu?

Bu araçları kullanarak sitenizi değerlendirin:

1. Google Mobile-Friendly Test — temel uyumluluk
2. PageSpeed Insights → Mobil sekmesi — performans skoru
3. Chrome DevTools → Toggle Device Toolbar — farklı ekran boyutlarını simüle edin
4. Google Search Console → Mobil Kullanılabilirlik raporu — gerçek hata bildirimleri

Search Console raporunda "Tıklanabilir öğeler çok yakın", "Görüntü alanı doğru yapılandırılmamış" veya "Metin çok küçük okunmuyor" gibi uyarılar varsa bunları öncelikli olarak çözün.

---

Sonuç

Mobil uyumluluk artık "olsa iyi olur" kategorisinde değil. Google'ın Mobile-First Indexing politikası, Türkiye'deki yüksek mobil trafik oranı ve ziyaretçilerin artan beklentileri bu konuyu her işletme için kritik hale getiriyor.

Sitenizin mobil durumunu analiz etmemizi ister misiniz? İletişim formunu doldurun, sitenizin mobil performans raporunu ücretsiz hazırlayalım.