Bir cümlelik özet
Responsive tasarım, aynı web sayfasının telefonda, tablette ve masaüstünde okunaklı ve kullanışlı görünmesini sağlayan CSS yaklaşımıdır.
Neden önemli?
Bir web sayfasını bilgisayarında tasarlarsın ama onu çoğu insan telefonundan açar. Ekran genişlikleri çok farklıdır: dar bir telefon yaklaşık 360 piksel, geniş bir masaüstü ekranı 1400 pikselden fazla olabilir.
Eğer sayfa sadece geniş ekrana göre hazırlanırsa, telefonda yazılar minicik kalır, kullanıcı sağa sola kaydırmak zorunda olur ve resimler ekrandan taşar. Responsive tasarım (İngilizcede "responsive design", yani "uyum sağlayan tasarım") bu sorunu çözer: düzen, ekranın genişliğine göre kendini yeniden ayarlar.
Bu ders boyunca üç fikri öğreneceğiz: esnek birimler, esnek görseller ve düzeni değiştiren media query. Sonunda dar ekranda tek sütuna inen bir sayfa yapacağız.
Responsive tasarım aynı zamanda bir erişilebilirlik konusudur. Sayfanı farklı ekranlara uyumlu yaparsan, küçük telefonu olan biri de, büyük ekranda okuyan biri de içeriğine rahatça ulaşır. Yani "güzel görünsün" kadar "herkes kullanabilsin" demektir.
Viewport meta etiketi
Telefonlar eskiden geniş bir masaüstü sayfasını küçültüp gösterirdi. Bunu engellemek için sayfanın <head> bölümüne bir satır ekleriz. Bu satıra viewport meta etiketi denir; tarayıcıya "sayfayı gerçek cihaz genişliğinde göster" der.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>İlk Responsive Sayfam</title>
</head>width=device-width: sayfa genişliği, cihazın genişliğine eşit olsun.initial-scale=1: başlangıçta yakınlaştırma yapılmasın.
Bu etiket olmadan diğer bütün responsive çabaların telefonda çalışmaz. Yani ilk adım her zaman budur.
Esnek birimler ve esnek görseller
Piksel yerine yüzde ve rem
Sabit birimler bir kutuya "her zaman tam 600 piksel geniş ol" der. Dar bir ekranda bu kutu taşar. Bunun yerine esnek birimler kullanırız.
%(yüzde): genişliği, ana kutuya göre orantılı verir.width: 90%demek "ebeveyninin yüzde 90'ı kadar geniş ol" demektir.rem: yazı tipi boyutuna bağlı bir birimdir.1remgenellikle 16 pikseldir;2remonun iki katıdır. Kullanıcı yazı boyutunu büyütünceremile verilen ölçüler de büyür.
Örnek: içeriği ortalayan ve ekranla birlikte daralan bir sarmalayıcı.
.sarmalayici {
width: 90%;
max-width: 960px;
margin: 0 auto;
padding: 1rem;
font-size: 1.125rem;
}Burada kutu ekranın yüzde 90'ı kadar geniştir ama en fazla 960 piksele çıkar. Büyük ekranda çok fazla uzayıp okumayı zorlaştırmaz.
max-width ile taşmayan görseller
Bir resmin gerçek genişliği 1200 piksel olabilir. Dar bir telefonda bu resim ekrandan taşar. Tek bir kuralla bunu önleriz.
img {
max-width: 100%;
height: auto;
}max-width: 100% "kutundan daha geniş olma" der; height: auto ise yüksekliği orantılı ayarlayarak resmin ezilmesini engeller. Erişilebilirlik için resimlerde alt metnini unutmayalım.
<img src="robot.jpg" alt="Masada duran küçük eğitim robotu" />Media query ile düzeni değiştirmek
Media query nedir?
Media query, "eğer ekran şu kadar genişse şu kuralları uygula" demenin CSS yoludur. Böylece dar ekran ve geniş ekran için farklı düzenler yazabiliriz.
Aşağıdaki kural yalnızca ekran 600 pikselden geniş olduğunda çalışır:
@media (min-width: 600px) {
body {
background-color: lightyellow;
}
}600 pikselden dar ekranlarda bu blok görmezden gelinir. min-width değerine kırılma noktası (breakpoint) denir.
Dar ekranda tek sütuna inen düzen
Şimdi asıl hedefimize gelelim. Geniş ekranda yan yana iki kart, dar ekranda alt alta tek sütun isteriz. Önce HTML:
<main class="kartlar">
<article class="kart">Kart 1</article>
<article class="kart">Kart 2</article>
</main>Temel yaklaşım "önce mobil": varsayılan olarak tek sütun yazarız, sonra geniş ekran için iki sütuna geçeriz.
.kartlar {
display: flex;
flex-direction: column;
gap: 1rem;
}
@media (min-width: 600px) {
.kartlar {
flex-direction: row;
}
.kart {
flex: 1;
}
}Dar ekranda kartlar alt alta (column) durur. Ekran 600 pikseli geçince row olur ve flex: 1 sayesinde iki kart alanı eşit paylaşır. "Önce mobil" yazmak genellikle daha kolaydır, çünkü dar ekran düzeni sade olur ve geniş ekran için sadece birkaç kural eklersin.
Flex ve grid fikri
display: flex öğeleri bir sıra veya bir sütun boyunca dizer; hangi yöne dizeceğini flex-direction belirler. display: grid ise öğeleri satır ve sütunlardan oluşan bir tabloya yerleştirir. İkisi de responsive düzenin temel araçlarıdır. Şimdilik flex'i hatırlaman yeterli; grid'i ileride daha derin göreceğiz.
Mini uygulama
Kendi responsive kart sayfanı yapacaksın.
- Bir
index.htmldosyası oluştur ve<head>içine viewport meta etiketini ekle. - İçine üç
<article class="kart">koyan bir<main class="kartlar">yaz. - Aşağıdaki CSS'i bağla:
.kartlar {
display: flex;
flex-direction: column;
gap: 1rem;
width: 90%;
max-width: 900px;
margin: 0 auto;
}
.kart {
padding: 1rem;
background-color: #eef;
}
@media (min-width: 700px) {
.kartlar { flex-direction: row; }
.kart { flex: 1; }
}- Tarayıcı penceresini yavaşça daralt ve genişlet. Kartların 700 pikselde yan yanaya ve alt alta geçişini izle.
İpucu: Chrome veya Firefox'ta F12 ile geliştirici araçlarını açıp cihaz görünümünü kullanarak telefon ekranını taklit edebilirsin.
Uygulama laboratuvarı: Responsive Tasarım
Responsive Tasarım konusunu kalıcı hâle getirmenin en iyi yolu, kavramı küçük ve ölçülebilir bir göreve dönüştürmektir. Bu çalışmada Viewport meta etiketi ile Piksel yerine yüzde ve rem arasındaki ilişkiyi kullanarak anlamlı HTML, düzenli CSS, gerektiğinde küçük JavaScript ve erişilebilirlik kontrolü hazırlayacaksın. Amaç yalnız sonucun çalışması değil; hangi kararı neden verdiğini, neyi test ettiğini ve hangi durumda tasarımı değiştireceğini açıklayabilmektir.
Görev senaryosu
Şu senaryoyu ele al: farklı ekranlarda okunabilen ders kartları arayüzü. Dersin ana hedefi “Viewport, esnek birimler ve media query ile farklı ekranlara uyum sağlayan tasarımlar yap” olduğuna göre önce problemi tek cümleyle tanımla. Ardından sistemin alacağı girdiyi, uygulayacağı işlemi ve üreteceği çıktıyı ayrı ayrı yaz. Bilmediğin bir ayrıntı varsa onu varsayım olarak işaretle; varsayımı gerçek bilgi gibi kullanma.
- Planla: Başlangıç durumunu, beklenen sonucu ve kullanacağın kavramları yaz.
- En küçük sürümü kur: Yalnız temel davranışı çalıştır; süsleme ve ek özellikleri sonraya bırak.
- Üç test hazırla: Normal bir durum, sınırda bir durum ve hatalı ya da beklenmeyen bir durum seç.
- Sonucu kaydet: Beklenen ile gerçekleşeni yan yana yaz; fark varsa olası nedeni belirt.
- Tek değişiklik yap: Aynı anda birçok şeyi değiştirmek yerine bir kararı düzeltip testi yeniden çalıştır.
Başarı ölçütleri
- Başlık hiyerarşisi mantıklı mı?
- Bağlantılar klavye ve dokunmayla çalışıyor mu?
- Mobil ekranda yatay taşma var mı?
- Görsellerin alternatif metni ve boyutları tanımlı mı?
- HTML, CSS ve JavaScript sorumlulukları birbirine karışıyor mu?
“Responsive Tasarım” çalışmasını bitirdiğinde ürünü bir arkadaşına yalnız bölüm başlıklarıyla anlat. Arkadaşın farklı ekranlarda okunabilen ders kartları arayüzü senaryosundaki adımları ve karar nedenlerini takip edebiliyorsa anlatım yeterince açıktır. Anlaşılmayan noktayı daha fazla terim ekleyerek değil, Viewport meta etiketi ve Piksel yerine yüzde ve rem ilişkisini daha küçük adımlara bölerek düzelt.
Sık yapılan hatalar
Viewport meta etiketini unutmak
En sık hata budur. Etiket olmadan media query'ler telefonda çalışmaz gibi görünür. Sayfa açıldığında telefonda küçülmüş görünüyorsa önce bu satırı kontrol et.
Her yeri sabit piksel yapmak
width: 600px gibi sabit değerler dar ekranda taşar. Genişlikler için %, max-width ve rem gibi esnek ölçüler tercih et.
Görsele max-width vermemek
max-width: 100% yoksa büyük bir resim telefonda ekranı yatay kaydırmaya zorlar. Bu, en can sıkıcı mobil sorunlarından biridir.
Kırılma noktalarını cihaz adına göre seçmek
"iPhone için", "Samsung için" diye düşünme. Bunun yerine içeriğin ne zaman bozulduğuna bak ve kırılma noktasını oraya koy.
Güvenlik notu
Responsive tasarım görünümle ilgilidir, ama sayfa yaparken gizliliğe de dikkat etmeliyiz. Test amaçlı sayfalarına kendi adını, adresini, okulunu, telefon numaranı veya fotoğrafını yazma. İnternette yayınlanan her sayfayı başkaları görebilir.
Bu akademinin gerçek bir kayıt veya iletişim formu yoktur; derslerdeki örnekler yalnızca alıştırma içindir. Ödevini internete koymak istersen önce bir yetişkinle konuş ve kişisel bilgi içermediğinden emin ol.
Ders özeti
- Responsive tasarım, sayfanın telefon, tablet ve masaüstünde uyumlu görünmesini sağlar.
- Viewport meta etiketi her responsive sayfanın zorunlu ilk adımıdır.
- Esnek birimler (
%,rem) sabit piksellere göre farklı ekranlara daha iyi uyum sağlar. max-width: 100%görsellerin ekrandan taşmasını önler.- Media query, kırılma noktasına göre düzeni değiştirir; flex ile dar ekranda tek sütuna inebiliriz.
Kontrol soruları
- Responsive tasarımın amacı nedir?
- Viewport meta etiketi ne işe yarar ve nereye yazılır?
width: 90%ilewidth: 900pxarasındaki fark nedir?- Bir resmin dar ekranda taşmasını hangi CSS kuralı önler?
- Media query'de
min-width: 600pxne anlama gelir?
Cevaplar
- Aynı sayfanın farklı ekran genişliklerinde okunaklı ve kullanışlı görünmesini sağlamak; düzenin ekrana göre kendini ayarlaması.
- Tarayıcıya sayfayı cihazın gerçek genişliğinde göstermesini söyler; sayfanın
<head>bölümüne yazılır. 90%esnektir ve ana kutuya göre orantılı daralır;900pxsabittir ve dar ekranda taşabilir.max-width: 100%(genellikleheight: autoile birlikte) resmin kutusundan daha geniş olmasını engeller.- "Ekran en az 600 piksel genişse bu kuralları uygula" demektir; 600 pikseli kırılma noktası olarak kullanır.
Kaynak ve doğrulama notu
“Responsive Tasarım” dersi için doğrulama odağı Viewport meta etiketi ile Piksel yerine yüzde ve rem arasındaki ilişkinin örnekler üzerinde tutarlı çalışmasıdır. Örnekler standart HTML, CSS ve tarayıcı JavaScript’i yaklaşımıyla hazırlanmıştır. Sayfa yalnız görsel olarak değil; klavye kullanımı, odak sırası, mobil görünüm ve anlamlı başlık yapısı açısından da kontrol edilmelidir.
Sonraki ders
JavaScript'e Giriş: Sayfaya davranış katıyoruz; bir düğmeye tıklanınca metnin değiştiği ilk küçük etkileşimli örneği yazıyoruz.