Mobil Uyumlu Web Site Tasarımı Nedir?
Mobil uyumlu web site tasarımı, sitenin her ekranda (telefon, tablet, masaüstü) hızlı, okunaklı ve kullanılabilir görünmesi demektir. Amaç: tek tasarım → her cihazda kusursuz deneyim → daha fazla dönüşüm.
Neden bu kadar önemli?
Trafiğin çoğu mobil: Kullanıcı ilk teması telefonda kuruyor.
Google mobil’i baz alır: Mobilde yavaş/bozuksa sıralama etkilenir.
Satış & başvuru etkisi: Hızlı, net ve parmakla kolay kullanılabilen sayfa daha çok arama/form üretir.
Temel ilkeler (müşteri dilinde net liste)
- Hız: Sayfa 2–3 saniye içinde açılmalı. Görseller WebP/AVIF, lazy-load.
- Okunabilirlik: 16–18px taban font, satır aralığı 1.6+, koyu metin.
- Tek el kullanımı: Başparmakla erişilen sabit CTA (Ara/WhatsApp/Teklif).
- Net menü: En fazla 5–7 öğe; gereksiz alt menülerden kaçın.
- Dokunmatik hedefler: Butonlar en az 44×44 px; birbirine çok yakın değil.
- Basit formlar: 3 alan idealdir (Ad, Telefon, Not). Otomatik klavye türü (tel, e-posta).
- Görsel hiyerarşi: Büyük başlık → kısa fayda → tek CTA.
- Erişilebilirlik: Alt metin, kontrast, odak halkası, klavye ile de kullanılabilir. Mobil Uyumlu Web site Tasarımı
Responsive mi, adaptive mi?
- Responsive (önerilen): Esnek grid ve yüzdesel genişliklerle tek kod tabanı; her ekranda kendini ayarlar.
- Adaptive: Belirli kırılımlar için farklı düzenler; bakım maliyeti yüksektir.
Sayfa şablonu (mobil odaklı)
Hero (ilk ekran)
1 cümle fayda: “Mobil uyumlu web site tasarımı ile hızlı ve net deneyim.”
Tek bir CTA: Teklif iste / Hemen ara.
Sosyal kanıt: kısa yorum/puan.
Sorun → Çözüm
“Yavaş açılıyor”, “menü karışık”, “form uzun” → her biri için tek satır çözüm.
Özellikler
Hız, SEO uyumu, güvenlik, içerik yönetimi; her biri 2–3 satır.
SSS (5 soru)
“Mobil hız nasıl ölçülür?”, “WhatsApp butonu SEO’yu etkiler mi?” gibi net yanıtlar.
Teknik temel (ama sade anlatım)
Core Web Vitals: LCP (ilk büyük görsel) 2.5 sn altı, INP 200 ms altı, CLS kayma yok.
CSS/JS diyeti: Kullanmadığınız eklentileri kapatın; kritik CSS’i gömün, diğerlerini
deferyükleyin.Font yönetimi: Sistem font ya da alt küme (subset) +
font-display: swap.Resim yönetimi:
srcset/sizesile her ekrana uygun boyutta resim gönderin. Mobil Uyumlu Web site Tasarımı
Mevcut sitenizi mobile uygun hale getirmenin 6 adımı
- Tema/altyapı kontrolü: Responsive tema ya da bileşen seti kullanın.
- Menü sadeleştirme: 1. seviye kısa; alt menüler için “daha fazla” yaklaşımı.
- Hero ve CTA yenileme: İlk ekranda 1 fayda + 1 buton.
- Görsel optimizasyonu: WebP, 150–250 KB hedef; gereksiz slider’ları kaldırın.
- Form kısaltma: 3 alan + otomatik klavye; gönderim sonrası teşekkür sayfası.
- Hız testi & düzeltme: PageSpeed + gerçek kullanıcı verisi (GA4) ile takip.
Mevcut sitenizi mobile uygun hale getirmenin 6 adımı
- Tema/altyapı kontrolü: Responsive tema ya da bileşen seti kullanın.
- Menü sadeleştirme: 1. seviye kısa; alt menüler için “daha fazla” yaklaşımı.
- Hero ve CTA yenileme: İlk ekranda 1 fayda + 1 buton.
- Görsel optimizasyonu: WebP, 150–250 KB hedef; gereksiz slider’ları kaldırın.
- Form kısaltma: 3 alan + otomatik klavye; gönderim sonrası teşekkür sayfası.
- Hız testi & düzeltme: PageSpeed + gerçek kullanıcı verisi (GA4) ile takip.
Sektör bazlı mobil örnekler (ne, nasıl?)
E-ticaret:
Ürün kartları büyük görsel + fiyat + tek CTA (Sepete ekle).
Filtreler çekmece içinde; sabit Sepeti gör butonu.
2 adım ödeme: adres → ödeme.
Hizmet/yerel işletme (ör. Sakarya):
Hero’da 1 cümle fayda + Ara / WhatsApp kısa yolu.
Konum, çalışma saatleri, yol tarifi tek dokunuş.
B2B (teklif odaklı):
Ürün/hizmet “özellik → fayda → vaka” sıralı.
3 alanlı teklif formu; dosya ekle butonu.
Restoran/otel:
“Menü/Rezervasyon” iki buton; telefon numarası tıklanabilir.
Harita gömme, Google yorum rozetleri.
Performans ipuçları (mobil için kritik)
Kritik CSS: İlk ekranda görünen kısmın CSS’ini gömün; kalanını
media="print"hilesi yerinedefer/asyncstratejisiyle yükleyin.3. parti diyet: Canlı sohbet, analiz, pixel… Kullanmadığını kapat. Kalanı
defer.Preconnect/Preload: Font dosyaları ve kahraman görseli için
preconnect/preload.Viewport & güvenli alan:
meta viewportdoğru; iPhone çentik içinenv(safe-area-inset*).Dokunma gecikmesi: 300ms gecikme modern tarayıcılarda yok; “zoom” engelleme için
user-scalable=nokullanma—erişilebilirlik düşer. Mobil Uyumlu Web site Tasarımı
Sık hatalar → Çözümler
Küçük butonlar / yakın tıklama alanları → 44×44 px minimum, satır içi boşluk.
Dev slider / ağır video → Tek görsel, WebP, video için “tıklayınca yükle”.
Menü labirenti → 5–7 ana öğe; kalanını “Daha fazla” altında topla.
Uzun formlar → 3 alan + otomatik klavye (tel, email); adım adım.
Okunmayan metin → 16–18px, 1.6 satır aralığı, yeterli kontrast.
Sakarya gibi yerel sinyal eksikliği → Sayfada adres/harita, yerel anahtar kelimeler doğal akışta.
Test & kalite güvencesi (hızlı checklist)
iOS Safari / Android Chrome’da gerçek cihaz testi
360–430px genişlikte layout kırılmıyor
LCP < 2.5 sn, INP < 200 ms (GA4 field data)
Tüm telefon numaraları tıklanabilir (
tel:), WhatsApp kısa yolu aktifForm gönderimi sonrası teşekkür ve dönüşüm olayı (GA4) Erişilebilirlik: Alt metinler, odak halkası, klavye ile gezilebilir
Bakım & raporlama
Haftalık: En çok ziyaret alan 5 sayfanın hız ve dönüşümleri, “çıkış” ısı haritası, 3 aksiyon.
Aylık: Görsel optimizasyonu, iç link güncellemeleri, menü/CTA A/B testi.
3 ayda bir: Tema/eklenti temizliği, 3. parti script denetimi. Mobil Uyumlu Web site Tasarımı
CTA önerileri
Mobil uyumlu web site tasarımıyla ziyaretçiyi kaybetmeden harekete geçirelim—hızlı, net ve ölçülebilir bir yapı kuruyoruz.
