Responsive Design Temelleri: Her Ekrana Uyumlu Tasarım

Seviye: Başlangıç - Orta Kategori: UX Design Son güncelleme: Ocak 2025

---

Giriş

Kullanıcıların %60'ından fazlası mobil cihazlardan erişiyor. Ama aynı siteyi tablet'te, laptop'ta, geniş monitörde de kullanıyorlar.

Her cihaz için ayrı tasarım mı yapacaksın? Hayır.

Responsive design, tek bir tasarımın her ekran boyutuna akıllıca uyum sağlaması demek. Mobilde tek kolon, tablette iki kolon, desktop'ta üç kolon. Aynı içerik, farklı düzenler.

2010'da Ethan Marcotte'un tanımladığı bu yaklaşım, artık standart. Responsive olmayan site, modern web'de kabul görmez.

Bu yazıda responsive design'ın temellerini, mobile-first yaklaşımı ve pratik uygulama yöntemlerini öğreneceksin.

---

Responsive Design Nedir?

Üç temel bileşen:

1. Fluid grid (esnek grid sistemi)
2. Flexible images (esnek görseller)
3. Media queries (CSS koşulları)

---

Neden Responsive?

1. Çoklu Cihaz Gerçeği

Kullanıcılar telefon, tablet, laptop, desktop, TV'den erişiyor. Hepsine hitap etmelisin.

2. SEO Faydası

Google, mobile-friendly siteleri daha üst sıralarda gösteriyor. Mobile-first indexing aktif.

3. Maliyet Verimliliği

Her platform için ayrı tasarım yerine, tek tasarım maintain etmek daha kolay.

4. Kullanıcı Deneyimi

Kullanıcı hangi cihazda olursa olsun, optimum deneyim almalı.

5. Gelecek Uyumluluğu

Yeni cihazlar çıktığında (katlanabilir telefonlar gibi) adaptasyon daha kolay.

---

Mobile-First Yaklaşım

Nedir?

Tasarıma en küçük ekrandan başlayıp, büyük ekranlara doğru genişletme.

Geleneksel (Desktop-first): Desktop tasarla → Küçült → Mobil'e sığdır

Mobile-first: Mobil tasarla → Genişlet → Desktop'a yay

Neden Mobile-First?

1. Önceliklendirme zorlar Küçük ekranda her şey sığmaz. En önemli içeriği seçmek zorundasın.

2. Performans Mobil için optimize edilmiş kod, desktop'ta da hızlı çalışır. Tersi zor.

3. Progressive enhancement Temel deneyim herkese, gelişmiş özellikler büyük ekranlara.

4. Gerçek kullanım Çoğu kullanıcı mobilde başlıyor. Önce onları düşün.

[COMPARISON] ❌ Desktop-first: "Bu güzel tasarımı mobilde nasıl sığdırırız?" ✅ Mobile-first: "Temel deneyimi kurduk, desktop'ta nasıl zenginleştiririz?" [/COMPARISON]

---

Breakpoint'ler

Tasarımın değiştiği ekran genişliği noktaları.

Yaygın Breakpoint'ler

[TABLE] | İsim | Genişlik | Cihazlar | |------|----------|----------| | xs (Extra small) | <640px | Küçük telefonlar | | sm (Small) | 640px+ | Büyük telefonlar | | md (Medium) | 768px+ | Tabletler (portrait) | | lg (Large) | 1024px+ | Tabletler (landscape), küçük laptop | | xl (Extra large) | 1280px+ | Laptop, desktop | | 2xl | 1536px+ | Büyük desktop | [/TABLE]

Breakpoint Seçimi

İçeriğe göre belirle: Rastgele cihaz boyutlarına değil, içeriğin "kırıldığı" noktaya göre breakpoint koy.

Fazla breakpoint kaçın: 3-4 breakpoint çoğu proje için yeterli. Fazlası karmaşıklık yaratır.

Yaygın sistem (Tailwind-style):

• Mobile: 0-767px
• Tablet: 768-1023px
• Desktop: 1024px+

---

Responsive Davranışlar

Elementler breakpoint'lerde nasıl değişir?

1. Reflow (Yeniden Akış)

Elementler yeniden dizilir.

Örnek: Desktop'ta 3 kolon kart → Mobilde tek kolon stack

2. Resize (Yeniden Boyutlandırma)

Elementler küçülür veya büyür.

Örnek: Hero başlık 64px → Mobilde 36px

3. Reposition (Yeniden Konumlandırma)

Elementler farklı yere taşınır.

Örnek: Desktop'ta sidebar sağda → Mobilde içeriğin altında

4. Show/Hide (Göster/Gizle)

Bazı elementler belirli boyutlarda gizlenir.

Örnek: Desktop'ta genişletilmiş menü → Mobilde hamburger menü

5. Replace (Değiştirme)

Farklı boyutlar için farklı element.

Örnek: Desktop'ta tablo → Mobilde kart listesi

---

Grid Değişimleri

Kolon Sayısı Değişimi

[TABLE] | Breakpoint | Kolon Sayısı | Kullanım | |------------|--------------|----------| | Mobile | 4 | Sınırlı alan, basit layout | | Tablet | 8 | Orta karmaşıklık | | Desktop | 12 | Tam esneklik | [/TABLE]

İçerik Genişliği

Mobil: Tam genişlik (padding ile) veya küçük margin

Tablet: Max-width başlar (örn: 720px)

Desktop: Max-width artar (örn: 1200px) veya container

Large: Max-width sabit, ortada kalır

Gutter ve Margin

[TABLE] | Breakpoint | Gutter | Page Margin | |------------|--------|-------------| | Mobile | 16px | 16px | | Tablet | 24px | 24-32px | | Desktop | 24-32px | 32-64px | [/TABLE]

---

Responsive Tipografi

Font boyutları ekran boyutuna göre değişmeli.

Yaklaşımlar

1. Breakpoint bazlı: Her breakpoint için sabit değerler.

Mobile: H1 = 32px, Body = 16px
Desktop: H1 = 48px, Body = 18px

2. Fluid typography: Viewport genişliğine göre sürekli değişen boyut.

font-size: clamp(1.5rem, 4vw, 3rem);

Minimum 1.5rem, maksimum 3rem, arada viewport'a bağlı.

Pratik Değerler

[TABLE] | Element | Mobile | Desktop | |---------|--------|---------| | H1 | 28-36px | 48-64px | | H2 | 24-28px | 36-42px | | H3 | 20-24px | 24-30px | | Body | 16px | 16-18px | | Small | 14px | 14px | [/TABLE]

---

Responsive Görseller

Esnek Görsel Temel

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

Görsel container'dan taşmaz, oranını korur.

Art Direction

Farklı ekranlar için farklı görsel crop'ları.

Örnek:

• Desktop: Yatay geniş görsel
• Mobil: Kare veya dikey crop (yüz odaklı)

Performans

srcset kullan: Farklı çözünürlükler için farklı dosyalar. Mobil küçük dosya yükler.

Lazy loading: Görünür alanda olmayan görselleri sonra yükle.

---

Navigation Patterns

Mobilde navigasyon en zorlu konulardan biri.

Hamburger Menu

En yaygın pattern. Üç çizgi ikonu, tıklayınca açılır menü.

Avantaj: Alan tasarrufu Dezavantaj: Gizli, keşfedilebilirlik düşük

Bottom Navigation

Mobil uygulamalarda popüler. Ekranın altında 4-5 ikon.

Avantaj: Kolay erişim, görünür Dezavantaj: Sınırlı sayıda item

Tab Bar

Yatay kaydırılabilir sekmeler.

Avantaj: Çok sayıda kategori Dezavantaj: Tümü görünmez

Priority+ Navigation

Sığan linkler görünür, sığmayanlar "More" altında.

Avantaj: Önemli linkler her zaman görünür Dezavantaj: Tutarsız görünüm

---

Touch Considerations

Mobilde parmak, mouse değil.

Touch Target

Minimum 44x44px (Apple), 48x48px (Google önerisi).

Küçük butonlar mobilde kullanılamaz.

Spacing

Butonlar arası yeterli boşluk. Yanlışlıkla yanlış butona basmayı önle.

Hover Yok

Mobilde hover state çalışmaz. Hover'a bağımlı tasarım yapma.

Gesture

Swipe, pinch, long-press gibi gesture'ları düşün ama temel işlevler için şart koşma.

---

Figma'da Responsive Tasarım

Frame Boyutları

Yaygın frame preset'leri:

• iPhone 14: 390 x 844
• iPad: 768 x 1024 (veya 834 x 1194)
• Desktop: 1440 x 900 (veya 1920 x 1080)

Constraints

Element'in parent resize olduğunda nasıl davranacağını belirler:

• Left, Right, Center
• Scale
• Left and Right (stretch)

Auto Layout

Responsive davranış için güçlü araç:

• Wrap özelliği (elementler sarmala)
• Min/Max width
• Fill container vs Hug contents

Component Variants

Aynı component'in mobil ve desktop versiyonları:

• Button/Mobile, Button/Desktop
• Card/Compact, Card/Full

---

Test Etme

Browser DevTools

Chrome/Firefox'ta responsive mode. Farklı ekran boyutlarını simüle et.

Gerçek Cihazlar

Simülasyon yetmez. Gerçek telefon ve tablette test et.

Kritik Test Noktaları

• Navigation açılıyor/kapanıyor mu?
• Touch target'lar yeterli mi?
• Metin okunabiliyor mu?
• Görseller düzgün mi?
• Form'lar kullanılabilir mi?
• Breakpoint geçişleri smooth mu?

---

Sık Yapılan Hatalar

1. Desktop-first düşünmek

2. Çok fazla breakpoint

5-6 breakpoint karmaşıklık yaratır. 3-4 yeterli.

3. Sabit piksel değerleri

Her yerde px kullanmak esnekliği kırar. Relative unit'ler (rem, %, vw) kullan.

4. Hover'a bağımlılık

Mobilde hover yok. Kritik bilgi hover'da olmamalı.

5. Küçük touch target

44px altı butonlar mobilde kullanılamaz.

6. Yatay scroll

İçerik ekrandan taşarsa yatay scroll oluşur. Genellikle hata.

7. Test etmemek

Sadece simülasyona güvenme. Gerçek cihazda test et.

---

---

---

İlgili İçerikler

Önceki: Spacing ve Layout Sistemleri

Sonraki: Figma Temelleri (yakında)

İlgili konular:

• Spacing ve Layout Sistemleri
• Design System Nedir?
• Mobile UX Best Practices (yakında)

İlgili Roadmap: UI Designer Roadmap → Responsive Design

---

Kaynaklar

Derinleşmek istersen:

• Responsive Web Design - Ethan Marcotte (İngilizce, orijinal makale)
• Mobile First - Luke Wroblewski (İngilizce, mobile-first konsept)
• Responsive Design - NNGroup (İngilizce, 8 dk)