Responsive web tasarım, bir web sitesinin telefon, tablet ve masaüstü gibi farklı ekran boyutlarına otomatik olarak uyum sağlamasını amaçlayan tasarım yaklaşımıdır. Google'ın mobil öncelikli indeksleme (mobile-first indexing) politikası ve mobil cihazlardan gelen trafiğin sürekli artması, bu yaklaşımı modern web geliştirmenin temel taşı haline getirdi. Bu rehberde mobil öncelikli düşünme biçimini, media query kullanımını, esnek görselleri ve breakpoint stratejisini gerçek CSS örnekleriyle adım adım inceliyoruz.
Responsive Web Tasarım Nedir?
Responsive web tasarım kavramı, 2010 yılında Ethan Marcotte'un A List Apart dergisinde yayımladığı makaleyle popülerleşti. Marcotte'a göre responsive bir site üç teknik bileşene dayanır: akışkan ızgaralar (fluid grids), esnek görseller (flexible images) ve media query'ler. Bu üçlü sayesinde aynı HTML belgesi, ekran genişliğine göre farklı düzenlerde sunulabilir; her cihaz için ayrı site geliştirme zahmeti ortadan kalkar.
İşe başlamadan önce tarayıcıya görünüm alanını doğru ölçeklendirmesini söylemek gerekir. Bunun için sayfanın head bölümüne width=device-width, initial-scale=1 değerlerine sahip viewport meta etiketi eklenir. Bu etiket olmadan mobil tarayıcılar sayfayı masaüstü genişliğinde işleyip küçültür ve yazdığınız media query'ler beklediğiniz gibi çalışmaz.
Mobil Öncelikli Yaklaşım Neden Önemli?
Mobil öncelikli (mobile-first) yaklaşım, stillerinizi önce en küçük ekran için yazmanız, ardından ekran genişledikçe min-width media query'leriyle düzeni zenginleştirmeniz anlamına gelir. Bu yöntemin masaüstünden küçültme (desktop-first) yaklaşımına göre somut avantajları vardır:
- Mobil cihazlar varsayılan olarak en sade CSS'i yükler; gereksiz stil geçersiz kılmaları azalır.
- İçerik önceliklendirmesi netleşir: küçük ekranda neyin gerçekten önemli olduğuna baştan karar verirsiniz.
- Kod tabanı genellikle daha kısa, daha öngörülebilir ve bakımı daha kolay olur.
Aşağıdaki örnekte kart listesi mobilde tek sütun olarak başlar, geniş ekranlarda yan yana dizilir:
/* Temel stiller: tüm cihazlar için geçerli */
.card-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Ekran 48em ve üzerine çıkınca düzeni zenginleştir */
@media (min-width: 48em) {
.card-list {
flex-direction: row;
flex-wrap: wrap;
}
.card-list .card {
flex: 1 1 calc(50% - 1rem);
}
}
Media Query Kullanımı
Media query'ler, CSS kurallarını belirli koşullara bağlamanızı sağlar. En sık kullanılan koşul ekran genişliğidir; ancak yönelim (orientation), çözünürlük ve kullanıcı tercihleri de sorgulanabilir:
/* Klasik sözdizimi */
@media (min-width: 768px) {
.sidebar { display: block; }
}
/* Media Queries Level 4 ile gelen aralık sözdizimi */
@media (768px <= width < 1200px) {
.container { padding-inline: 2rem; }
}
/* Hareket azaltma tercihine saygı göster */
@media (prefers-reduced-motion: reduce) {
.hero-banner { animation: none; }
}
Breakpoint değerlerinde em birimi kullanmak, kullanıcı tarayıcıda yazı boyutunu büyüttüğünde düzenin de buna uyum sağlamasına yardımcı olur. Örneğin 48em, varsayılan 16px yazı boyutunda 768px'e karşılık gelir; kullanıcı yazıyı büyüttüğünde breakpoint de onunla birlikte ölçeklenir.
Esnek Görseller ve Akışkan Tipografi
Sabit genişlikli bir görsel, dar ekranda yatay kaydırmaya ve taşmaya neden olur. İki satırlık şu kural bu sorunun büyük bölümünü çözer:
img {
max-width: 100%;
height: auto;
}
Farklı ekran yoğunlukları ve genişlikleri için aynı görselin birden çok sürümünü sunmak istiyorsanız srcset ve sizes özniteliklerini kullanabilirsiniz; tarayıcı koşullara en uygun dosyayı kendisi seçer. Bu yöntem özellikle mobil bağlantılarda ciddi bant genişliği tasarrufu sağlar.
Tipografide ise clamp() fonksiyonu, yazı boyutunun alt ve üst sınır arasında ekran genişliğiyle birlikte akıcı biçimde büyümesini sağlar:
h1 {
font-size: clamp(1.75rem, 4vw + 1rem, 3rem);
}
Bu tek satır, küçük ekranda 1.75rem'in altına inmeyen, geniş ekranda 3rem'i aşmayan ve arada akıcı biçimde ölçeklenen bir başlık üretir; çoğu durumda başlıklar için ayrıca media query yazma ihtiyacını ortadan kaldırır.
Breakpoint Stratejisi
En sık yapılan hata, breakpoint'leri belirli cihaz modellerine göre seçmektir. Piyasada yüzlerce farklı ekran boyutu varken belirli bir telefon modelinin genişliği gibi referanslar hızla eskir. Doğru yaklaşım, tarayıcı penceresini yavaşça daraltıp tasarımın bozulduğu noktaları breakpoint olarak belirlemektir.
Yine de başlangıç için sektörde yaygın kabul gören referans aralıkları şunlardır:
Modern CSS'te bileşen bazlı uyarlama için container query'ler de kullanılabilir. Bileşen, pencerenin değil içinde bulunduğu kapsayıcının genişliğine tepki verir; böylece aynı bileşen dar kenar çubuğunda farklı, geniş içerik alanında farklı dizilir:
.sidebar {
container-type: inline-size;
}
@container (min-width: 400px) {
.widget {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
Breakpoint'lerinizi cihazlara göre değil, içeriğinizin bozulduğu noktalara göre belirleyin. İçerik önce gelir; düzen onu takip eder.
Test Süreci ve Araçlar
Responsive bir tasarımı yayına almadan önce farklı koşullarda test etmek şarttır. Yalnızca pencereyi daraltıp genişletmek yeterli değildir; dokunmatik etkileşim, yavaş ağ ve gerçek cihaz davranışı da denenmelidir:
Sonuç
Responsive web tasarım, tek seferlik bir teknik ayar değil, projenin her aşamasına yayılan bir düşünme biçimidir. Mobil öncelikli CSS yazmak, esnek görseller kullanmak, breakpoint'leri içeriğe göre seçmek ve clamp() ile container query gibi modern araçlardan yararlanmak, sitenizin bugünün ve yarının cihazlarında sorunsuz görünmesini sağlar. Küçük bir projede bu rehberdeki örnekleri uygulayarak başlayın; alışkanlık kazandıkça responsive düşünmek doğal bir refleks haline gelecektir.
Yorumlar (0)
Henüz yorum yapılmamış. İlk yorumu siz yapın!
Yorum Yazın