Responsive Tasarım Nedir?

Üç temel yapı taşı

Terim, Ethan Marcotte'un 2010'da A List Apart'ta yayımladığı makaleyle yaygınlaştı. Fikir basittir: farklı cihazlar için ayrı siteler yapmak yerine tek bir sayfa, içinde bulunduğu ekrana uyum sağlar. Bunu üç teknik birlikte mümkün kılar:

• Esnek ızgara: Sütun genişlikleri sabit piksel yerine yüzde, fr, rem gibi göreli birimlerle tanımlanır; bugün bu iş çoğunlukla CSS Grid ve Flexbox ile yapılır.
• Esnek medya: Görseller ve videolar kapsayıcılarından taşmaz (max-width: 100%). srcset ve sizes ile tarayıcı, ekrana uygun boyuttaki dosyayı seçer.
• Media query'ler: Belirli koşullarda (örneğin genişlik belli bir değeri aştığında) devreye giren CSS kurallarıdır.

Bunların çalışabilmesi için sayfanın <head> bölümünde viewport etiketi bulunmalıdır. Bu etiket yoksa mobil tarayıcı sayfayı masaüstü genişliğinde çizip küçültür ve media query'ler beklendiği gibi tetiklenmez.

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

Breakpoint ve media query örneği

Breakpoint, düzenin değiştiği genişlik eşiğidir. Aşağıdaki örnekte kartlar telefonda tek sütun, orta genişlikte iki, geniş ekranda üç sütun olur:

/* Temel kurallar: her ekran için tek sütun */
.kartlar { display: grid; gap: 1rem; grid-template-columns: 1fr; }
img { max-width: 100%; height: auto; }

/* 40em (yaklaşık 640px) ve üzeri: iki sütun */
@media (min-width: 40em) {
  .kartlar { grid-template-columns: repeat(2, 1fr); }
}

/* 64em (yaklaşık 1024px) ve üzeri: üç sütun */
@media (min-width: 64em) {
  .kartlar { grid-template-columns: repeat(3, 1fr); }
}

Burada küçük ekrandan büyüğe doğru min-width ile ilerleniyor; bu kurgu mobile-first yaklaşımının CSS'teki karşılığıdır. Güncel tarayıcılar aynı koşulu @media (width >= 40em) şeklinde yazılan aralık söz dizimiyle de anlar. Bazı düzenler hiç media query gerektirmez: grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)) sütun sayısını alana göre kendiliğinden ayarlar. Bir bileşenin ekran yerine içinde durduğu alana göre değişmesi gerekiyorsa container query (@container) daha doğru araçtır.

Breakpoint'leri popüler cihaz genişliklerine göre değil, içeriğin bozulduğu noktaya göre seçmek gerekir. Pencereyi yavaşça daraltın; satırların fazla uzadığı ya da öğelerin sıkıştığı yer, doğal breakpoint'inizdir.

Responsive, adaptive ve ayrı mobil site

Google, bu üç yapıyı da desteklediğini belirtir; ancak uygulaması ve bakımı en kolay seçenek olduğu için responsive tasarımı önerir. Tek URL, bağlantıların ve sinyallerin bölünmesini de önler.

Sık yapılan hatalar

• Piksel cinsinden sabit genişlikler yüzünden telefonda yatay kaydırma çubuğu çıkması.
• Önemli içeriği mobilde display: none ile gizlemek. Google sayfayı mobil sürümüyle değerlendirdiği için bu içerik hem kullanıcı hem arama motoru açısından kaybolur.
• Görsellere width ve height vermemek; görsel yüklendiğinde içerik aşağı kayar ve CLS değeri bozulur.
• Telefona masaüstü boyutunda görsel göndermek. Doğru boyut, WebP gibi verimli formatlar ve ekran dışındaki görseller için lazy loading mobil hızı belirgin biçimde etkiler.
• user-scalable=no ile yakınlaştırmayı kapatmak; küçük metni büyütmek isteyen kullanıcıyı engeller.
• Dokunma hedeflerini (butonlar, menü bağlantıları) parmakla seçilemeyecek kadar küçük ve sık yerleştirmek.

Nasıl test edilir?

Tarayıcı geliştirici araçlarındaki cihaz modu iyi bir başlangıçtır, ama yalnızca hazır cihaz boyutlarına bakmayın: pencereyi 320px civarından geniş ekrana kadar adım adım genişletin, gerçek bir telefonda dokunma ve klavye davranışını da deneyin. Viewport etiketinin eksik ya da sabit genişlikte olup olmadığını SEO Analiz Aracı ile kontrol edebilirsiniz. Temel kavramların ayrıntılı anlatımı için web.dev'deki Responsive web design basics rehberi, media query söz dizimi için MDN belgeleri güvenilir kaynaklardır.