Bugün bir siteye girenlerin büyük kısmı masaüstünden değil, telefon veya tabletten giriyor. Bir sitenin bu farklı ekran boyutlarının hepsinde düzgün görünmesi artık tercih değil, zorunluluk. Bu ihtiyacı çözen teknik yaklaşıma responsive tasarım, yani duyarlı tasarım, deniyor. Bu rehberde responsive tasarımın CSS düzeyindeki temel tekniklerini, kesme noktalarını ve test yöntemlerini somut örneklerle ele alıyoruz.
Responsive Tasarım Nedir ve Nasıl Çalışır
Responsive tasarım, bir sayfanın içeriğini ve düzenini, görüntülendiği ekranın genişliğine göre otomatik ayarlamasıdır. Her cihaz için ayrı bir site kodlamak yerine, tek bir HTML/CSS yapısı tüm ekranlara uyum sağlar. Bunun teknik temeli viewport meta etiketiyle başlar:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Bu satır olmadan mobil tarayıcılar sayfayı masaüstü genişliğinde render edip küçültür; sonuç, okunamayacak kadar küçük bir metin yığınıdır. Viewport etiketi tarayıcıya sayfa genişliğini cihazın gerçek genişliğine eşitlemesini söyler ve responsive CSS'in çalışabilmesi için ilk şarttır.
Responsive tasarım hakkında CSS teknikleri ve güncel en iyi uygulamalar için MDN Web Docs'un responsive design rehberine bakılabilir; Mozilla'nın bu kaynağı örneklerle desteklenmiş, güvenilir bir referanstır.
Responsive tasarımın değeri, tek bir kod tabanının bakımını kolaylaştırmasında da görülür. Ayrı bir mobil site (m.siteadi.com gibi) yönetmek, iki farklı kod tabanını senkron tutmak demektir; içerik bir yerde güncellenip diğerinde unutulabilir. Tek bir responsive yapı, bu senkronizasyon sorununu baştan ortadan kaldırır.
Esnek Birimler ve Modern Düzen Sistemleri
Piksel yerine göreli birimler kullanmak, esnek tasarımın temelidir. Yüzde (%), rem ve vw/vh gibi birimler, öğelerin ekran boyutuna göre orantılı ölçeklenmesini sağlar:
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
img {
max-width: 100%;
height: auto;
}
max-width: 100% kuralı, görsellerin kapsayıcı öğeyi asla taşmamasını sağlar; tek satırlık ama etkisi büyük bir kuraldır. Flexbox ve CSS Grid, modern düzen sistemlerinin başında gelir:
.kart-listesi {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}
Bu grid tanımı, kartların ekran genişliğine göre sütun sayısını kendiliğinden değiştirmesini sağlar; geniş ekranda dört kart yan yana dizilirken, dar ekranda tek sütuna iner. Bu esneklik, ayrı bir medya sorgusu yazmadan auto-fit ve minmax() kombinasyonundan gelir.
Medya Sorguları ve Kesme Noktaları Nasıl Kurulur
Medya sorguları (media queries), belirli ekran genişliklerinde farklı CSS kuralları uygulamanızı sağlar. Yaygın kesme noktaları şöyledir:
/* Mobil: varsayılan stiller */
.menu { flex-direction: column; }
/* Tablet ve üzeri */
@media (min-width: 768px) {
.menu { flex-direction: row; }
}
/* Masaüstü */
@media (min-width: 1024px) {
.container { max-width: 1140px; }
}
768px ve 1024px yaygın kesme noktalarıdır, ama bu sayılar sabit bir kural değil. Asıl ölçüt, içeriğin bozulmaya başladığı genişliğe kesme noktası koymaktır. Menü üst üste binmeye başlıyorsa, kesme noktası tam oraya konur.
Medya sorguları yalnızca genişliğe değil, ekran yönüne (orientation: landscape) veya çözünürlüğe göre de yazılabilir; bu, örneğin tablet yatay konumdayken farklı bir düzen uygulamanıza olanak tanır. Kesme noktalarını belirli cihaz modellerine göre değil, içeriğin doğal kırılma noktalarına göre seçmek daha sürdürülebilirdir; çünkü yeni ekran boyutları sürekli çıkar, içeriğin yapısı ise aynı kalır.
Mobil Öncelikli Yaklaşım Neden Tercih Edilir
Mobil öncelikli (mobile-first) yaklaşımda CSS önce mobil için yazılır, ardından min-width medya sorgularıyla büyük ekranlara özellik eklenir. Yukarıdaki kod örneğinde görüldüğü gibi, varsayılan stiller mobil için tanımlanır ve üstüne katman eklenir. Geleneksel masaüstü-önce yaklaşımda ise tersi olur; mobil için sürekli özellik kapatmak gerekir ve bu daha kırılgan bir yöntemdir.
Mobil trafiğin ağırlığı bu yaklaşımı mantıklı kılar: en çok kullanılan deneyimi önce tasarlayıp sonra genişletmek, en az kullanılanı önce tasarlayıp sonra daraltmaktan daha az hataya yol açar. Mobil için tasarlamak tasarımcıyı temel içeriğe odaklanmaya da zorlar; gereksiz öğeler dar ekranda yer bulamadığı için baştan elenir.
Performans açısından da mobil öncelikli yaklaşım avantajlıdır. Mobil cihazlar genelde daha sınırlı işlemci gücüne ve değişken ağ bağlantısına sahiptir; CSS'i mobil temelli yazmak, gereksiz stil ve betiklerin küçük ekranlara yüklenmesini engeller.
Responsive Tasarım Nasıl Test Edilir
Tarayıcı geliştirici araçları, responsive testin ilk durağıdır. Chrome'da F12 tuşuna basıp sol üstteki cihaz simgesine tıklamak, sayfayı iPhone, iPad veya özel genişliklerde simüle etmenizi sağlar. Bu simülasyon hızlıdır ama dokunmatik gecikmeyi veya gerçek ağ koşullarını tam yansıtmaz.
Gerçek cihazlarda test etmek bu yüzden atlanmaması gereken bir adımdır. En azından bir Android ve bir iOS cihazında sitenin nasıl davrandığını kontrol etmek, simülatörün kaçırdığı sorunları ortaya çıkarır: dokunma hedefinin çok küçük kalması, klavye açılınca formun kayması gibi. Google'ın Mobil Uyumluluk Testi aracı da hızlı bir otomatik kontrol sunar.
Test sırasında şu noktalara özellikle bakılmalı:
- Menü, dar ekranda hamburger simgesine dönüşüyor mu ve açılıp kapanıyor mu
- Görseller taşıyor mu veya bulanıklaşıyor mu
- Metin, yakınlaştırma yapmadan okunabilir mu
- Butonlar parmakla rahatça dokunulabilecek büyüklükte mi
Bu kontrol listesini her yeni sayfa yayınlanmadan önce tekrar gözden geçirmek, zamanla oluşabilecek küçük düzen kaymalarını erken yakalamanızı sağlar.
Dokunmatik Etkileşim ve Okunabilirlik Nasıl Sağlanır
Mobil cihazlar dokunmatik ekran kullandığı için düğme ve bağlantı gibi etkileşim öğelerinin yeterince büyük olması gerekir; Apple ve Google'ın kendi tasarım kılavuzları, dokunma hedefleri için yaklaşık 44x44 piksel öneriyor. Birbirine çok yakın iki bağlantı, mobilde yanlış tıklamalara yol açar ve kullanıcıyı yorar.
Okunabilirlik için satır yüksekliğini (line-height: 1.5 gibi) rahat tutmak ve gövde metnini en az 16 piksel yapmak, mobilde yakınlaştırma ihtiyacını ortadan kaldırır. Başlık hiyerarşisini (H1, H2, H3) tüm ekranlarda korumak içeriğin taranabilirliğini sürdürür; bir başlık masaüstünde büyük görünüp mobilde gövde metniyle karışacak kadar küçülmemelidir.
Kontrast oranı da genelde göz ardı edilir; açık gri metin beyaz zemin üzerinde masaüstünde okunabilir görünse de, güneş ışığı altında telefon ekranında görünmez hale gelebilir. WCAG standardı, normal metin için en az 4.5:1 kontrast oranı öneriyor.
Responsive Tasarımda Sık Yapılan Hatalar
En yaygın hata, mobilde içeriği tamamen gizlemektir. Bazı tasarımcılar mobil deneyimi sadeleştirmek için bir tabloyu veya bölümü mobilde display: none ile kaldırır; bu, mobil kullanıcının masaüstü kullanıcısıyla aynı bilgiye erişememesi demektir. İçeriği gizlemek yerine, tabloyu kart görünümüne çevirmek gibi yeniden düzenlemek daha doğru bir çözümdür.
Görsel optimizasyonunu atlamak da sık görülen bir hatadır. srcset özelliği, farklı ekran boyutları için farklı çözünürlükte görsel sunmayı sağlar:
<img src="foto-800.jpg"
srcset="foto-400.jpg 400w, foto-800.jpg 800w, foto-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, 800px"
alt="Ürün fotoğrafı">
Bu yapı olmadan mobil kullanıcı, ihtiyacı olmayan büyük bir masaüstü görselini indirmek zorunda kalır ve sayfa yavaşlar. Performansı göz ardı etmek, görsel açıdan doğru ama pratikte yavaş çalışan bir tasarımla sonuçlanır; responsive olmak yalnızca görünümle değil, hızla da ilgilidir.
Bir sitenin gerçekten responsive olup olmadığının en somut kanıtı, farklı cihazlardaki gerçek kullanıcı testlerinden geçer; tarayıcı simülatörü ilk kontrol için yeterlidir ama son kararı gerçek ekranlar verir.
Tablo taşmaları da sık karşılaşılan bir sorundur; geniş bir veri tablosu mobilde ekrandan taşarsa, tabloyu yatay kaydırılabilir bir kapsayıcıya (overflow-x: auto) almak basit ama etkili bir çözümdür. Form alanlarının mobilde tam genişlik kullanması, kullanıcının parmağıyla rahatça dokunabilmesi açısından önemlidir; masaüstünde yan yana duran iki form alanı, mobilde alt alta dizilmelidir. Bu tür küçük ama sık tekrar eden düzeltmeler, responsive tasarımın günlük pratikteki gerçek karşılığıdır.
Kaynaklar ve doğrulama
Bilgileri uygulamadan önce güncel ayrıntıları aşağıdaki birincil veya alan otoritesi kaynaklardan kontrol edin.
Yazan Celil Uyanikoglu
25 yıldır bilgi işlem piyasasında farklı dallarda uzmanlaşan bir Bilgisayar Mühendisi
Henüz yorum yok.
Sohbete katıl. Yorumlar yayınlanmadan önce moderasyondan geçer.