Responsive Tasarım: Tüm Cihazlara Uyumlu Web Siteleri

Günümüzde internet trafiğinin yarısından fazlası mobil cihazlardan geliyor. Responsive (duyarlı) web tasarımı, bir web sitesinin masaüstü, tablet ve mobil cihazlarda sorunsuz görüntülenmesini sağlayan yaklaşımdır. Google'ın mobil öncelikli dizinleme (mobile-first indexing) politikası ile responsive tasarım artık bir tercih değil, zorunluluktur.

Viewport Meta Etiketi

Responsive tasarımın ilk adımı, viewport meta etiketini eklemektir:

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

Bu etiket olmadan mobil tarayıcılar sayfanızı masaüstü genişliğinde (genellikle 980px) render eder ve kullanıcılar içeriği okumak için yakınlaştırmak zorunda kalır.

• width=device-width — sayfanın genişliğini cihazın ekran genişliğine eşitler
• initial-scale=1 — başlangıç yakınlaştırma seviyesini %100 yapar

Mobile-First Yaklaşım

Mobile-first, CSS kodunuzu önce mobil cihazlar için yazıp, ardından büyük ekranlar için genişletme stratejisidir:

/* Mobil (varsayılan) */
.container {
  padding: 16px;
}

.card {
  width: 100%;
  margin-bottom: 16px;
}

/* Tablet ve üzeri */
@media (min-width: 768px) {
  .container {
    padding: 24px;
    max-width: 720px;
    margin: 0 auto;
  }
}

/* Masaüstü */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
  }
}

Mobile-first yaklaşımın avantajları:

• Mobil cihazlar daha az CSS indirir (performans avantajı)
• İçerik önceliği doğal olarak belirlenir
• Progresif geliştirme prensibine uyar

Media Queries

Media queries, farklı ekran boyutları ve cihaz özelliklerine göre CSS kuralları tanımlamanızı sağlar:

/* Genişlik bazlı */
@media (min-width: 768px) { ... }
@media (max-width: 1024px) { ... }
@media (min-width: 768px) and (max-width: 1024px) { ... }

/* Yön bazlı */
@media (orientation: landscape) { ... }

/* Çözünürlük bazlı */
@media (min-resolution: 2dppx) { ... }

/* Tercih bazlı */
@media (prefers-color-scheme: dark) { ... }
@media (prefers-reduced-motion: reduce) { ... }

Yaygın Breakpoint Değerleri

• 576px: Küçük telefonlar (landscape)
• 768px: Tabletler
• 1024px: Küçük masaüstü / tablet landscape
• 1200px: Standart masaüstü
• 1440px: Geniş ekranlar

Esnek Grid Sistemleri

Sabit piksel değerleri yerine esnek birimler kullanmak responsive tasarımın temelidir:

/* Yüzde bazlı esnek grid */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.col-half {
  flex: 0 0 calc(50% - 10px);
}

/* Modern CSS Grid yaklaşımı */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

auto-fit ve minmax() kombinasyonu, media query yazmadan tamamen responsive bir grid oluşturur.

Responsive Görseller

Görsellerin farklı ekran boyutlarına uyum sağlaması için birkaç teknik kullanılır:

/* Temel responsive görsel */
img {
  max-width: 100%;
  height: auto;
}

/* HTML srcset ile farklı çözünürlükler */
<img
  srcset="image-400.jpg 400w,
          image-800.jpg 800w,
          image-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1024px) 50vw,
         33vw"
  src="image-800.jpg"
  alt="Açıklama"
>

/* picture elementi ile format kontrolü */
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Açıklama">
</picture>

Responsive Tipografi

Yazı boyutlarının ekrana göre ölçeklenmesi için CSS clamp() fonksiyonu kullanılır:

h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
  /* En az 1.5rem, tercihen viewport'un %4'ü, en fazla 3rem */
}

body {
  font-size: clamp(1rem, 1.2vw, 1.25rem);
}

Sık Yapılan Hatalar

• Viewport meta etiketini unutmak
• Sabit genişlik (width: 500px) kullanmak — max-width tercih edin
• Sadece tek bir cihazda test etmek
• Touch hedeflerini çok küçük yapmak (minimum 44x44px olmalı)
• Yatay kaydırmaya neden olan elemanları fark etmemek