Responsive Tasarım Nedir? Esnek Düzenin Temel İlkeleri
Tek bir web sayfası; esnek sütunlar ve CSS kurallarıyla telefon, tablet ve bilgisayara uyum sağlar. Kırılma noktalarını cihaz adlarına göre değil, içeriğin sıkıştığı genişliklere göre belirleyin.
Bu yazıda neler var?
Responsive tasarım, tek bir web sayfasının farklı ekran genişliklerine uyum sağlamasıdır. Aynı sayfayı telefon, tablet ve bilgisayarda kullanmak için ayrı bir mobil site şart değildir. Esnek yerleşimler, medya sorguları ve uygun görsel ölçüleri bu uyumu sağlar.
Responsive tasarım nasıl çalışır?
Tarayıcı, sayfayı görüntü alanının genişliğine göre çizer. CSS Grid veya Flexbox ile kurduğunuz sütunlar kullanılabilir alana göre yerleşir. Medya sorguları belirlediğiniz koşullarda düzeni değiştirir; masaüstündeki iki sütun telefonda alt alta geçebilir.
HTML belgesinin head bölümüne viewport meta etiketini ekleyin. Etikette name="viewport" ve content="width=device-width, initial-scale=1" değerlerini kullanın. Bu ayar, sayfanın genişliğini cihazın görüntü alanına eşler ve mobil tarayıcıda beklenmedik ölçeklemeyi önler.
Responsive tasarım yalnızca sütunları daraltmaz. Metin, görsel ve menüler farklı genişliklerde kullanılabilir kalmalıdır. Yakınlaştırma sırasında içerik yeniden akmalı; olağan metin içeriği için yatay kaydırma gerekmemelidir.
Esnek düzenin temel bileşenleri nelerdir?
Yerleşim, görsel ve metin ölçülerini birlikte düzenleyin. CSS Grid ile iki boyutlu sütun ve satır yapıları kurun; Flexbox ile tek yöndeki öğeleri hizalayın. Görselleri kapsayıcı genişliğine sığdırın ve oranlarını koruyun.
| Bileşen | Görevi | Uygulama |
|---|---|---|
| Esnek ızgara | Sütunları kullanılabilir alana göre düzenler. | CSS Grid veya Flexbox kullanın. |
| Esnek görsel | Görselin kapsayıcıdan taşmasını önler. | Genişliği kapsayıcıyla sınırlandırın, oranı koruyun. |
| Medya sorgusu | Belirli görüntü koşullarında düzeni değiştirir. | Dar ekranda sütun sayısını azaltın. |
| Container query | Bileşeni kendi kapsayıcısına göre uyarlar. | Kart düzenini kartın alanına göre değiştirin. |
Izgara yerleşimi için CSS Grid’de grid-template-columns kullanımını inceleyin. Tek yönde hizalama ve sıralama için Flexbox’ın çalışma mantığından yararlanın. Container query, aynı bileşenin farklı genişlikteki alanlarda kullanılmasını kolaylaştırır.
Mobil öncelikli yaklaşım ve kırılma noktaları nasıl seçilir?
Mobil öncelikli yaklaşımda önce dar ekran düzenini kurun, sonra geniş ekran kurallarını ekleyin. Başlangıçta tek sütun, okunabilir metin genişliği ve temel gezinme öğelerini yerleştirin. Geniş alan açıldığında iki sütuna geçin veya kenar boşluklarını artırın.
Kırılma noktasını telefon modeline göre seçmeyin. Metin ya da menü sıkıştığında düzeni değiştirin. Örneğin 48rem, kök yazı boyutu 16 piksel olduğunda 768 piksele eşittir; bu yalnızca denenebilecek bir başlangıç değeridir.
Sayfayı daraltıp genişletirken ara genişlikleri de kontrol edin. Başlıklar taşmaya, menü öğeleri sıkışmaya veya kartlar okunmaz hâle gelmeye başladığında medya sorgusu ekleyin. CSS’in temel yapısı için CSS’in web sayfalarındaki kullanımını öğrenin.
Responsive tasarım nerelerde kullanılır?
Telefon, tablet ve bilgisayardan ziyaretçi alan sitelerde responsive düzen kullanın. Kurumsal sayfalar, haber siteleri, portföyler ve çevrim içi mağazalar aynı içeriği farklı ekranlara uyarlar. Böylece her ekran için ayrı sayfa hazırlamanız gerekmez.
Masaüstünde ürün fotoğrafı, açıklama ve satın alma bilgisi üç sütunda yer alabilir. Dar ekranda bu alanları tek sütuna alın ve satın alma düğmesini içerik akışında görünür tutun. Haber sayfasındaki yan sütunu da telefonda ana metnin altına taşıyın.
Görselleri kapsayıcıdan geniş olmayacak biçimde ayarlayın ve en-boy oranını koruyun. Uzun metinleri ekranın tüm genişliğine yaymayın; okunabilir bir maksimum genişlik belirleyin. Menü ve düğmeleri dar ekranda kolayca seçilebilecek aralıklarla yerleştirin.
Responsive ve adaptive tasarım arasındaki fark nedir?
Responsive yaklaşım, esnek ölçüler ve kırılma noktalarıyla farklı genişliklerde akan bir düzen kurar. Adaptive yaklaşım, tanımlanmış ekran aralıklarında farklı düzenler seçer. Bir projede iki yaklaşımın teknikleri birlikte kullanılabilir; adlandırma, uygulamanın tüm ayrıntılarını tek başına açıklamaz.
| Özellik | Responsive yaklaşım | Adaptive yaklaşım |
|---|---|---|
| Düzen | Genişlikle birlikte akışkan biçimde değişir. | Tanımlı aralıklarda farklı düzen seçer. |
| Uygulama | Esnek ızgara ve medya sorguları kullanır. | Birden fazla düzen tanımlayabilir. |
| Bileşen uyumu | Sayfa genişliğini temel alabilir. | Belirli ekran aralıklarına göre çalışabilir. |
İçerik akışkan sütunlarla düzenleniyorsa responsive kurallar kullanın. Bir kartın görünümü, bulunduğu alanın genişliğine göre değişecekse container query seçin. Böylece kart aynı sayfada dar bir yan sütunda veya geniş ana sütunda uygun biçimde yerleşir.
Sık yapılan hatalar ve responsive tasarımı test etme
Yalnızca birkaç cihaz boyutunda test etmek, ara genişliklerdeki sorunları gözden kaçırır. Sabit piksel genişlikleri görselleri ve kutuları dar ekranda taşır. Görselleri kapsayıcıya sığdırın; tabloların, uzun metinlerin ve menülerin davranışını da ayrı ayrı kontrol edin.
- Taşan görseller: Genişliği kapsayıcıyla sınırlayın ve görsel oranını koruyun.
- Sıkışan sütunlar: İçerik okunmaz hâle gelmeden sütunları alt alta alın.
- Küçük dokunma alanları: Bağlantı ve düğmeler arasında yeterli boşluk bırakın.
- Eksik test: Tarayıcı penceresini farklı genişliklerde daraltıp genişleterek ara durumları inceleyin.
Sayfayı 320 CSS piksel genişliğinde ve yakınlaştırma açıkken test edin. Metnin yatay kaydırma olmadan yeniden akıp akmadığını, gezinmenin kullanılabilirliğini ve görsellerin taşmadığını kontrol edin. Harita gibi iki boyutlu içerikler ayrı değerlendirilir; W3C’nin reflow açıklaması bu ölçütün kapsamını belirtir.