Mobil uyumlu web sitesi, ekran boyutu ne olursa olsun içeriğin okunabilir, butonların rahat tıklanabilir ve sayfanın hızlı açıldığı sitedir. Bugün birçok sektörde ziyaretçilerin büyük kısmı telefondan geliyor; bu nedenle mobil deneyim artık "ekstra" değil, sitenin ana deneyimidir.
Responsive tasarım nedir?
Responsive (duyarlı) tasarım, tek bir HTML yapısının CSS ile farklı ekran genişliklerine uyum sağlamasıdır. Masaüstünde üç sütun olan bir kart listesi, tablette iki, telefonda tek sütuna dönüşür. Ayrı bir "mobil site" (m.alanadi.com) yapmak yerine tek sitenin her cihazda doğru görünmesi hedeflenir.
Mobile-first indeksleme ne demek?
Google, sitelerin sıralamasını belirlerken ağırlıklı olarak sayfaların mobil sürümünü değerlendirir. Yani mobilde gizlenen içerik, eksik başlıklar veya yavaş yüklenen sayfalar arama görünürlüğünüzü doğrudan etkileyebilir. Masaüstünde kusursuz görünen ama telefonda zorlanan bir site, arama motoru gözünde zayıf bir sitedir.
Mobil uyumluluğun temel kuralları
1. Viewport etiketini doğru kullanın
Her sayfanın <head> bölümünde viewport etiketi bulunmalıdır. Bu etiket olmadan telefon, sayfayı masaüstü genişliğinde çizip küçültür.
<meta name="viewport" content="width=device-width, initial-scale=1">
2. Önce mobil için tasarlayın
Tasarıma küçük ekrandan başlamak, gerçekten önemli içeriği öne çıkarmaya zorlar. Sonra geniş ekranlar için düzen zenginleştirilir.
3. Dokunma hedeflerini büyük tutun
Butonlar ve bağlantılar parmakla rahat tıklanabilecek boyutta olmalı, birbirine çok yakın durmamalıdır.
4. Okunabilir yazı boyutu
Gövde metni için 16 piksel civarı iyi bir başlangıçtır. Kullanıcıyı yakınlaştırmaya zorlayan metinler terk oranını artırır.
5. Görselleri akıllıca sunun
srcset ile ekrana uygun boyutta görsel sunun, WebP veya AVIF gibi modern formatları tercih edin ve ekran dışındaki görsellere loading="lazy" ekleyin.
6. Yatay kaydırmayı engelleyin
Tablolar, kod blokları ve geniş görseller kendi kapsayıcısı içinde kaydırılmalı, sayfanın tamamı yana taşmamalıdır.
7. Formları kolaylaştırın
Doğru type değerleri (email, tel) telefonda uygun klavyeyi açar. Alan sayısını azaltmak dönüşümü artırır.
Nasıl test edilir?
- Tarayıcının geliştirici araçlarındaki cihaz görünümüyle farklı genişlikleri deneyin.
- Gerçek bir Android ve iOS cihazda mutlaka kontrol edin.
- PageSpeed Insights ile mobil performans skorunu ve Core Web Vitals değerlerini inceleyin.
- Search Console'daki raporlarla sorunlu sayfaları takip edin.
Sık yapılan hatalar
- Mobilde menünün açılmaması veya kapanmaması
- Açılır pencerelerin (pop-up) tüm ekranı kaplaması
- Telefon numarasının tıklanabilir olmaması
- Masaüstü için hazırlanmış çok büyük görsellerin telefona gönderilmesi
- Önemli içeriğin mobilde gizlenmesi
Sık sorulan sorular
Mobil uygulama yerine mobil uyumlu site yeterli mi?
Çoğu işletme için evet. Bildirim veya çevrimdışı kullanım gibi ihtiyaçlarda PWA yaklaşımı, ayrı bir uygulama geliştirmeden önce değerlendirilebilir.
Eski sitemi mobil uyumlu hale getirebilir miyim?
Mümkündür, ancak çok eski altyapılarda baştan tasarlamak daha verimli olabilir. Önce mevcut kodun durumu incelenmelidir.
Sonuç
Mobil uyumluluk; kullanıcı memnuniyeti, arama görünürlüğü ve dönüşüm oranı için temel bir gerekliliktir. Sitenizin telefonda nasıl göründüğünü düzenli kontrol edin ve performansı ölçün. Mevcut sitenizin mobil deneyimini iyileştirmek isterseniz teklif isteyebilirsiniz.