Responsive Design

📱 Mobil Uyumluluk (Responsive Design) — Kapsamlı Ders Rehberi

📌 Bölüm 1 — Mobil Uyumluluk Nedir? (Temel Tanım ve Kapsam)

🔢 Gerçek Dünya İstatistikleri (Neden Acil?)

📚 Bölüm 2 — Responsive Tasarımın Temel Prensipleri (Adım Adım)

1) Viewport ve Temel Meta Ayarları

2) Esnek Grid Sistemleri (CSS Grid & Flexbox)

• Flexbox: Tek boyutlu düzenler için ideal; nav bar, buton grupları, satır içi düzenlemeler.
• CSS Grid: İki boyutlu kompleks düzenler için güçlüdür; sayfa şablonları, kart yerleşimleri.
• Oranlar kullanın (em, rem, %) — sabit px yerine esnek ölçüler adaptasyonu kolaylaştırır.

3) Media Queries (Medya Sorguları)

/* Mobil */
@media (max-width: 767px) {
  .container { padding: 16px; }
  .sidebar { display: none; }
}
/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid { grid-template-columns: 1fr 2fr; }
}
/* Masaüstü */
@media (min-width: 1024px) {
  .grid { grid-template-columns: 1fr 3fr; }
}

4) Progressive Enhancement vs. Graceful Degradation

5) İçerik Önceliklendirme (Content Prioritization)

🔧 Bölüm 3 — Teknik Uygulama Rehberi (Kod & Pratik)

Viewport Etiketi — En Temel Adım

<meta name="viewport" content="width=device-width, initial-scale=1">

Esnek Görseller — img { max-width:100%; height:auto; }

img { max-width: 100%; height: auto; display: block; }

Dokunmatik Hedefler (Touch Targets)

Form Tasarımı Mobilde Basitleştirilmeli

⚡ Bölüm 4 — Performans ve Mobil (Hız, Görsel Optimizasyon)

• Görsel sıkıştırma: WebP/AVIF formatlarını kullanın.
• Lazy loading: görselleri sadece görünür olduğunda yükleyin (loading="lazy").
• Minify CSS/JS: Gereksiz boşluk ve yorumları kaldırın.
• Critical CSS: Başlangıçta gerekli stil kodlarını inline verip geri kalanını erteleme.
• CDN kullanımı: Coğrafi olarak yakın sunucular ile içerik dağıtımı (Cloudflare, Fastly vb.).

🔍 Bölüm 5 — Mobil SEO ve Mobile-First Indexing

• Mobildeki içerik masaüstü ile aynı olmalı (gizlenmiş içerikler SEO için risklidir).
• Structured data (schema.org) her iki versiyonda da bulunmalı.
• Görsellerin alt text'leri mobilde de görünür olmalı.
• Sayfa hızı kritik—PageSpeed Insights puanını yükseltmek mobil SEO'yu destekler.

🧰 Bölüm 6 — Test Etme & Araçlar

• Google Mobile-Friendly Test — temel mobil uyumluluk uyarılarını verir.
• PageSpeed Insights — hız ve en iyi uygulamalar önerileri.
• BrowserStack veya LambdaTest — gerçek cihazlarda çapraz tarayıcı testi.
• Chrome DevTools — cihaz simülasyonları ve performans profilleri.
• Accessibility Tools (axe, WAVE) — mobil erişilebilirlik testleri.

🧩 Bölüm 7 — İleri Konular: PWA, AMP ve Yapay Zeka Destekleri

⚠️ Bölüm 8 — Mobil Uyumlulukta Yapılan Yaygın Hatalar

1. Viewport eksikliği — sayfa mobilde ölçeklenmez.
2. Pop-up bombardımanı — mobil kullanıcıyı kapatır, Google cezalandırır.
3. Sabit genişlikli tasarımlar — küçük ekranlarda yatay kaydırma gerektirir.
4. Yetersiz dokunmatik hedefler — yanlış tıklamalar ve sinir bozucu deneyim.
5. Performans dikkate alınmaması — görseller, JS, üçüncü parti script’ler hız düşürür.

✅ Bölüm 9 — Mobil Uyumluluk Kontrol Listesi (Uygulama Öncesi/ Sonrası)

1. 🔲 <meta name="viewport"> eklendi mi?
2. 🔲 Esnek grid ve medya sorguları kullanıldı mı?
3. 🔲 Görseller responsive ve WebP/AVIF formatlı mı?
4. 🔲 Butonlar minimum 44x44px mi ayarlandı?
5. 🔲 Lazy-load ve kritikal CSS uygulandı mı?
6. 🔲 PageSpeed Insights mobil skoru 90+ hedefleniyor mu?
7. 🔲 Klavye erişimi ve ekran okuyucu testleri yapıldı mı?
8. 🔲 PWA veya AMP uygulanmalı mı, karar verildi mi?

🔬 Bölüm 10 — Kısa Bir Uygulamalı Örnek (Adım Adım)

1. HTML başlığı — viewport meta ekle.

   <meta name="viewport" content="width=device-width, initial-scale=1">

2. Grid kur — mobilde tek sütun, tablet/massüstünde iki-sütun:

   .grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
   @media(min-width:768px){ .grid{ grid-template-columns: 2fr 1fr; } }
   

3. Görselleri optimize et — srcset ile farklı çözünürlükler tanımla:

   
     <source srcset="image-800.webp" media="(min-width:801px)">
     <img src="image-400.webp" alt="..."/>
   
   

4. Butonları büyük yap — mobil için padding artır:

   .button { padding: 8px 12px; }
   @media(min-width:768px){ .button{ padding: 12px 20px; } }
   

🔎 Sonuç ve Özet

📣 Call to Action