Technical Deep Dive

Modern Responsive Design: Sıfırdan Proje Yaparken Yol Haritası

"Sadece küçülen ekranlar" devri bitti. Artık container query'ler, fluid tipografi ve performans odaklı mimari konuşuyoruz. İşte 2025 standartlarında responsive yaklaşımım.

01. Paradigma Değişimi: Eski vs Yeni

Junior seviyesinde responsive, "ekran küçülünce bunu gizle" demekti. Profesyonel seviyede ise bu, bir içerik koreografisi ve performans stratejisidir.

Legacy (Eski)

• Desktop-first (max-width)
• Sabit pikseller (px)
• Sadece Viewport Media Queries
• Layout için float veya hantal gridler

Modern (2025)

• Mobile-first (min-width)
• Fluid Units (rem, ch, clamp())
• Container Queries (@container)
• CSS Grid & Subgrid

02. Mimari ve Performans

Responsive tasarım sadece CSS yazmak değildir; tarayıcının render sürecini yönetmektir.

Neden Mobile-First?

Sadece stil tercihi değil, bir performans kararıdır. Mobile-first yazdığınızda, tarayıcı varsayılan olarak en basit (ve genellikle en hafif) stili işler. Desktop stilleri sadece ekran genişlediğinde parse edilir. Tersi durumda (Desktop-first), mobil cihazlar kullanmayacakları tonla CSS override işlemini parse etmek zorunda kalır.

        /* Mobile First: Varsayılan stil en hafif olandır */
.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Sadece ekran genişlediğinde bu kod çalışır */
@media (min-width: 768px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
}

/* Container Queries: Component'in yaşadığı alana göre tepki vermesi */
.card-container {
  container-type: inline-size;
}

@container (min-width: 500px) {
  .card-image {
    aspect-ratio: 16/9; /* Geniş alanda sinematik */
  }
}

03. Yol Haritam (The Roadmap)

Atomik Analiz & İçerik Önceliği

Tasarımı "sayfa" olarak değil, "component" olarak incelerim. Hangi component hangi genişlikte kırılıyor? İçerik hiyerarşisi mobilde nasıl olmalı? (Örn: Sidebar mobilde off-canvas menüye mi dönüşmeli, yoksa bottom-nav'a mı?)

Global Fluid Tipografi Kurulumu

Her breakpoint için tek tek font-size yazmak ameleliktir. clamp() fonksiyonu ile minimum ve maksimum değerleri belirleyip, aradaki geçişi tarayıcıya bırakırım.

        :root {
  /* 
    320px ekranda 1rem (16px), 
    1200px ekranda 1.25rem (20px) olacak şekilde 
    akışkan bir font büyüklüğü.
  */
  --font-size-fluid: clamp(1rem, 0.909rem + 0.45vw, 1.25rem);
}

body {
  font-size: var(--font-size-fluid);
}

Layout & Container Queries

Sayfa iskeletini Grid ile kurarım. Componentlerin kendi içindeki responsive davranışları için ise Container Queries kullanırım. Bu sayede bir kart componenti, sidebar içinde de olsa, main content içinde de olsa bulunduğu alana göre şekil alır.

Interaction & Touch Targets

Mobilde "hover" yoktur. Hover efektlerinin mobilde tetiklenmemesi için @media (hover: hover) kullanırım. Tıklanabilir alanların (touch targets) en az 44x44px olduğundan emin olurum.